diff --git a/12.x/cookbook/advanced/network-requests.html b/12.x/cookbook/advanced/network-requests.html index 18f2184e..ba679fe0 100644 --- a/12.x/cookbook/advanced/network-requests.html +++ b/12.x/cookbook/advanced/network-requests.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/cookbook/basics/async-tests.html b/12.x/cookbook/basics/async-tests.html index cf909796..031e6501 100644 --- a/12.x/cookbook/basics/async-tests.html +++ b/12.x/cookbook/basics/async-tests.html @@ -9,7 +9,7 @@ - + @@ -48,7 +48,7 @@ // 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(); @@ -81,7 +81,7 @@ options?: { timeout: number; interval: number; - } + }, ): Promise<T>;

It accepts an expectation to be validated and repeats the check every defined interval until it no longer throws an error. Similarly to findBy* queries they accept timeout and interval options and have the same default values of 1000ms for timeout, and a checking interval of 50 ms.

Example

@@ -94,7 +94,7 @@ options?: { timeout: number; interval: number; - } + }, ): Promise<T> {}

This function is, in a way, the negation of waitFor 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 timeout and interval parameters as findBy* queries and waitFor.

Example

diff --git a/12.x/cookbook/basics/async-tests.md b/12.x/cookbook/basics/async-tests.md index b8ba6936..0d805f34 100644 --- a/12.x/cookbook/basics/async-tests.md +++ b/12.x/cookbook/basics/async-tests.md @@ -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( options?: { timeout: number; interval: number; - } + }, ): Promise; ``` @@ -111,7 +111,7 @@ function waitForElementToBeRemoved( options?: { timeout: number; interval: number; - } + }, ): Promise {} ``` diff --git a/12.x/cookbook/basics/custom-render.html b/12.x/cookbook/basics/custom-render.html index b01c6617..29aadf78 100644 --- a/12.x/cookbook/basics/custom-render.html +++ b/12.x/cookbook/basics/custom-render.html @@ -9,7 +9,7 @@ - + @@ -33,12 +33,12 @@ 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>, ); }
custom-render/index.test.tsx
import { screen } from '@testing-library/react-native';
diff --git a/12.x/cookbook/basics/custom-render.md b/12.x/cookbook/basics/custom-render.md
index 6d1d88ff..17b626ba 100644
--- a/12.x/cookbook/basics/custom-render.md
+++ b/12.x/cookbook/basics/custom-render.md
@@ -16,12 +16,12 @@ interface RenderWithProvidersProps {
 
 export function renderWithProviders(
   ui: React.ReactElement,
-  options?: RenderWithProvidersProps
+  options?: RenderWithProvidersProps,
 ) {
   return render(
     
       {ui}
-    
+    ,
   );
 }
 ```
diff --git a/12.x/cookbook/index.html b/12.x/cookbook/index.html
index 91fcd55e..144eac90 100644
--- a/12.x/cookbook/index.html
+++ b/12.x/cookbook/index.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/12.x/cookbook/state-management/jotai.html b/12.x/cookbook/state-management/jotai.html
index 76d961f6..9bfbba90 100644
--- a/12.x/cookbook/state-management/jotai.html
+++ b/12.x/cookbook/state-management/jotai.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -116,10 +116,10 @@ corresponding values as an argument.

  */
 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>,
   );
 };
 
diff --git a/12.x/cookbook/state-management/jotai.md b/12.x/cookbook/state-management/jotai.md
index 0e0c72e8..8471367c 100644
--- a/12.x/cookbook/state-management/jotai.md
+++ b/12.x/cookbook/state-management/jotai.md
@@ -110,10 +110,10 @@ export interface RenderWithAtomsOptions {
  */
 export const renderWithAtoms = (
   component: React.ReactElement,
-  options: RenderWithAtomsOptions
+  options: RenderWithAtomsOptions,
 ) => {
   return render(
-    {component}
+    {component},
   );
 };
 
diff --git a/12.x/docs/advanced/testing-env.html b/12.x/docs/advanced/testing-env.html
index 754e1441..1408b7b9 100644
--- a/12.x/docs/advanced/testing-env.html
+++ b/12.x/docs/advanced/testing-env.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/12.x/docs/advanced/understanding-act.html b/12.x/docs/advanced/understanding-act.html
index b5990e87..a1484c99 100644
--- a/12.x/docs/advanced/understanding-act.html
+++ b/12.x/docs/advanced/understanding-act.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/12.x/docs/api.html b/12.x/docs/api.html
index 5718c757..2b054b7c 100644
--- a/12.x/docs/api.html
+++ b/12.x/docs/api.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/12.x/docs/api/events/fire-event.html b/12.x/docs/api/events/fire-event.html
index a7def7db..66c49f83 100644
--- a/12.x/docs/api/events/fire-event.html
+++ b/12.x/docs/api/events/fire-event.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -34,7 +34,7 @@ more realistic event simulation by emitting a sequence of events with proper eve
   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');
@@ -51,7 +51,7 @@ Please note that from version 7.0 fireEvent performs c
 render(
   <View>
     <TextInput placeholder="my placeholder" onBlur={onBlurMock} />
-  </View>
+  </View>,
 );
 
 // you can omit the `on` prefix
@@ -78,7 +78,7 @@ It is recommended to use the User Event     <TouchableOpacity onPress={onPressMock}>
       <Text>Press me</Text>
     </TouchableOpacity>
-  </View>
+  </View>,
 );
 
 fireEvent.press(screen.getByText('Press me'), eventData);
@@ -97,7 +97,7 @@ It is recommended to use the User Event render(
   <View>
     <TextInput placeholder="Enter data" onChangeText={onChangeTextMock} />
-  </View>
+  </View>,
 );
 
 fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT);
@@ -120,7 +120,7 @@ It is recommended to use the User Event render( <ScrollView onScroll={onScrollMock}> <Text>XD</Text> - </ScrollView> + </ScrollView>, ); fireEvent.scroll(screen.getByText('scroll-view'), eventData);
diff --git a/12.x/docs/api/events/fire-event.md b/12.x/docs/api/events/fire-event.md index 452aa351..301cd61b 100644 --- a/12.x/docs/api/events/fire-event.md +++ b/12.x/docs/api/events/fire-event.md @@ -23,7 +23,7 @@ test('fire changeText event', () => { render( // MyComponent renders TextInput which has a placeholder 'Enter details' // and with `onChangeText` bound to handleChangeText - + , ); fireEvent(screen.getByPlaceholderText('change'), 'onChangeText', 'ab'); @@ -46,7 +46,7 @@ const onBlurMock = jest.fn(); render( - + , ); // you can omit the `on` prefix @@ -84,7 +84,7 @@ render( Press me - + , ); fireEvent.press(screen.getByText('Press me'), eventData); @@ -113,7 +113,7 @@ const CHANGE_TEXT = 'content'; render( - + , ); fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT); @@ -145,7 +145,7 @@ const eventData = { render( XD - + , ); fireEvent.scroll(screen.getByText('scroll-view'), eventData); diff --git a/12.x/docs/api/events/user-event.html b/12.x/docs/api/events/user-event.html index 6b201cb7..902c097c 100644 --- a/12.x/docs/api/events/user-event.html +++ b/12.x/docs/api/events/user-event.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/api/jest-matchers.html b/12.x/docs/api/jest-matchers.html index 6c377390..8dd72d82 100644 --- a/12.x/docs/api/jest-matchers.html +++ b/12.x/docs/api/jest-matchers.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/api/misc/accessibility.html b/12.x/docs/api/misc/accessibility.html index 4b090a43..54d5d543 100644 --- a/12.x/docs/api/misc/accessibility.html +++ b/12.x/docs/api/misc/accessibility.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/api/misc/async.html b/12.x/docs/api/misc/async.html index 5f1abcd7..e3641940 100644 --- a/12.x/docs/api/misc/async.html +++ b/12.x/docs/api/misc/async.html @@ -9,7 +9,7 @@ - + @@ -26,7 +26,7 @@

waitFor

function waitFor<T>(
   expectation: () => T,
-  options?: { timeout: number; interval: number }
+  options?: { timeout: number; interval: number },
 ): Promise<T>;

Waits for a period of time for the expectation callback to pass. waitFor may run the callback a number of times until timeout is reached, as specified by the timeout and interval 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 waitFor function.

await waitFor(() => expect(mockFunction).toHaveBeenCalledWith());
@@ -86,7 +86,7 @@ If you receive warnings related to act() function consult our waitForElementToBeRemoved 
function waitForElementToBeRemoved<T>(
   expectation: () => T,
-  options?: { timeout: number; interval: number }
+  options?: { timeout: number; interval: number },
 ): Promise<T>;

Waits for non-deterministic periods of time until queried element is removed or times out. waitForElementToBeRemoved periodically calls expectation every interval milliseconds to determine whether the element has been removed or not.

import { render, screen, waitForElementToBeRemoved } from '@testing-library/react-native';
diff --git a/12.x/docs/api/misc/async.md b/12.x/docs/api/misc/async.md
index 0acc29dd..0a58e393 100644
--- a/12.x/docs/api/misc/async.md
+++ b/12.x/docs/api/misc/async.md
@@ -9,7 +9,7 @@ The `findBy*` queries are used to find elements that are not instantly available
 ```tsx
 function waitFor(
   expectation: () => T,
-  options?: { timeout: number; interval: number }
+  options?: { timeout: number; interval: number },
 ): Promise;
 ```
 
@@ -109,7 +109,7 @@ If you receive warnings related to `act()` function consult our [Understanding A
 ```ts
 function waitForElementToBeRemoved(
   expectation: () => T,
-  options?: { timeout: number; interval: number }
+  options?: { timeout: number; interval: number },
 ): Promise;
 ```
 
diff --git a/12.x/docs/api/misc/config.html b/12.x/docs/api/misc/config.html
index f1121743..cae4bd41 100644
--- a/12.x/docs/api/misc/config.html
+++ b/12.x/docs/api/misc/config.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/12.x/docs/api/misc/other.html b/12.x/docs/api/misc/other.html
index 56456479..66932dcf 100644
--- a/12.x/docs/api/misc/other.html
+++ b/12.x/docs/api/misc/other.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/12.x/docs/api/misc/render-hook.html b/12.x/docs/api/misc/render-hook.html
index edb3c7a7..54249dda 100644
--- a/12.x/docs/api/misc/render-hook.html
+++ b/12.x/docs/api/misc/render-hook.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -23,7 +23,7 @@
     
You're viewing the documentation for 12.x. Current latest version is 13.x.View latest version here.
  • 12.x
      • renderHook function 
      
 
      function renderHook<Result, Props>(
   callback: (props?: Props) => Result,
-  options?: RenderHookOptions<Props>
+  options?: RenderHookOptions<Props>,
 ): RenderHookResult<Result, Props>;
      
 
      Renders a test component that will call the provided callback, including any hooks it calls, every time it renders. Returns RenderHookResult object, which you can interact with.
      
 
      import { renderHook } from '@testing-library/react-native';
diff --git a/12.x/docs/api/misc/render-hook.md b/12.x/docs/api/misc/render-hook.md
index 9fe20b54..c1b426d2 100644
--- a/12.x/docs/api/misc/render-hook.md
+++ b/12.x/docs/api/misc/render-hook.md
@@ -3,7 +3,7 @@
 ```ts
 function renderHook(
   callback: (props?: Props) => Result,
-  options?: RenderHookOptions
+  options?: RenderHookOptions,
 ): RenderHookResult;
 ```
 
diff --git a/12.x/docs/api/queries.html b/12.x/docs/api/queries.html
index 0db427d0..1f1f151b 100644
--- a/12.x/docs/api/queries.html
+++ b/12.x/docs/api/queries.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -126,7 +126,7 @@ In order for *ByRole queries to match an element it needs to be con
 render(
   <Pressable accessibilityRole="button" disabled>
     <Text>Hello</Text>
-  </Pressable>
+  </Pressable>,
 );
 const element = screen.getByRole('button');
 const element2 = screen.getByRole('button', { name: 'Hello' });
@@ -307,13 +307,15 @@ In the spirit of 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();
      
 
      TextMatch type
      
 
      type TextMatch = string | RegExp;
      
diff --git a/12.x/docs/api/queries.md b/12.x/docs/api/queries.md
index d8eb1e3d..a63bfdba 100644
--- a/12.x/docs/api/queries.md
+++ b/12.x/docs/api/queries.md
@@ -183,7 +183,7 @@ import { render, screen } from '@testing-library/react-native';
 render(
   
     Hello
-  
+  ,
 );
 const element = screen.getByRole('button');
 const element2 = screen.getByRole('button', { name: 'Hello' });
@@ -398,13 +398,15 @@ render(Hidden from accessibility);
 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();
 ```
 
diff --git a/12.x/docs/api/render.html b/12.x/docs/api/render.html
index 8cd7da4c..4df12d8a 100644
--- a/12.x/docs/api/render.html
+++ b/12.x/docs/api/render.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/12.x/docs/api/screen.html b/12.x/docs/api/screen.html
index 7aff50d0..d56fdda0 100644
--- a/12.x/docs/api/screen.html
+++ b/12.x/docs/api/screen.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/12.x/docs/guides/community-resources.html b/12.x/docs/guides/community-resources.html
index 17266800..91f1d71e 100644
--- a/12.x/docs/guides/community-resources.html
+++ b/12.x/docs/guides/community-resources.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/12.x/docs/guides/faq.html b/12.x/docs/guides/faq.html
index c1f1a0e9..4443a68c 100644
--- a/12.x/docs/guides/faq.html
+++ b/12.x/docs/guides/faq.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/12.x/docs/guides/how-to-query.html b/12.x/docs/guides/how-to-query.html
index 43ede621..5eea740f 100644
--- a/12.x/docs/guides/how-to-query.html
+++ b/12.x/docs/guides/how-to-query.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/12.x/docs/guides/troubleshooting.html b/12.x/docs/guides/troubleshooting.html
index 95da055f..33e3e10c 100644
--- a/12.x/docs/guides/troubleshooting.html
+++ b/12.x/docs/guides/troubleshooting.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/12.x/docs/migration/jest-matchers.html b/12.x/docs/migration/jest-matchers.html
index 97c3574f..b0dfe0d4 100644
--- a/12.x/docs/migration/jest-matchers.html
+++ b/12.x/docs/migration/jest-matchers.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/12.x/docs/migration/previous/v11.html b/12.x/docs/migration/previous/v11.html
index c62af6d7..459ae966 100644
--- a/12.x/docs/migration/previous/v11.html
+++ b/12.x/docs/migration/previous/v11.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -34,7 +34,7 @@
 function findAllByText(
   text: TextMatch,
   options?: TextMatchOptions,
-  waitForOptions?: WaitForOptions
+  waitForOptions?: WaitForOptions,
 );

      In order to facilitate transition, in version 9 and 10, we provided a temporary possibility to pass WaitForOptions like timeout, interval, etc inside options argument. From this release we require passing these as the proper third parameter.

      This change is easy to implement:

      diff --git a/12.x/docs/migration/previous/v11.md b/12.x/docs/migration/previous/v11.md index f9a90904..5477cd6c 100644 --- a/12.x/docs/migration/previous/v11.md +++ b/12.x/docs/migration/previous/v11.md @@ -24,7 +24,7 @@ function findByText(text: TextMatch, options?: TextMatchOptions, waitForOptions? function findAllByText( text: TextMatch, options?: TextMatchOptions, - waitForOptions?: WaitForOptions + waitForOptions?: WaitForOptions, ); ``` diff --git a/12.x/docs/migration/previous/v2.html b/12.x/docs/migration/previous/v2.html index 51bde26b..b66336b8 100644 --- a/12.x/docs/migration/previous/v2.html +++ b/12.x/docs/migration/previous/v2.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/migration/previous/v7.html b/12.x/docs/migration/previous/v7.html index ea4506e1..59b65b91 100644 --- a/12.x/docs/migration/previous/v7.html +++ b/12.x/docs/migration/previous/v7.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/migration/previous/v9.html b/12.x/docs/migration/previous/v9.html index 9cf11d98..88d29379 100644 --- a/12.x/docs/migration/previous/v9.html +++ b/12.x/docs/migration/previous/v9.html @@ -9,7 +9,7 @@ - + @@ -41,7 +41,7 @@ This is a breaking change.

      const { getByText } = render(
   <Text>
     Hello <Text>world</Text>
-  </Text>
+  </Text>,
 );
 getByText('Hello world'); // matches

      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.

      diff --git a/12.x/docs/migration/previous/v9.md b/12.x/docs/migration/previous/v9.md index cdeb8db7..f9aa897c 100644 --- a/12.x/docs/migration/previous/v9.md +++ b/12.x/docs/migration/previous/v9.md @@ -37,7 +37,7 @@ In v1.14 we've introduced a feature allowing to match text when it's spread acro const { getByText } = render( Hello world - + , ); getByText('Hello world'); // matches ``` diff --git a/12.x/docs/migration/v12.html b/12.x/docs/migration/v12.html index 1eb1f6dc..99f20737 100644 --- a/12.x/docs/migration/v12.html +++ b/12.x/docs/migration/v12.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/start/intro.html b/12.x/docs/start/intro.html index 7077b9f3..9c6793d4 100644 --- a/12.x/docs/start/intro.html +++ b/12.x/docs/start/intro.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/start/quick-start.html b/12.x/docs/start/quick-start.html index 1013905c..bc81517c 100644 --- a/12.x/docs/start/quick-start.html +++ b/12.x/docs/start/quick-start.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/index.html b/12.x/index.html index 721dbbd8..a9833306 100644 --- a/12.x/index.html +++ b/12.x/index.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/llms-full.txt b/12.x/llms-full.txt index cc6a4cfb..254d0d0d 100644 --- a/12.x/llms-full.txt +++ b/12.x/llms-full.txt @@ -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( options?: { timeout: number; interval: number; - } + }, ): Promise; ``` @@ -502,7 +502,7 @@ function waitForElementToBeRemoved( options?: { timeout: number; interval: number; - } + }, ): Promise {} ``` @@ -556,12 +556,12 @@ interface RenderWithProvidersProps { export function renderWithProviders( ui: React.ReactElement, - options?: RenderWithProvidersProps + options?: RenderWithProvidersProps, ) { return render( {ui} - + , ); } ``` @@ -771,10 +771,10 @@ export interface RenderWithAtomsOptions { */ export const renderWithAtoms = ( component: React.ReactElement, - options: RenderWithAtomsOptions + options: RenderWithAtomsOptions, ) => { return render( - {component} + {component}, ); }; @@ -1326,7 +1326,7 @@ test('fire changeText event', () => { render( // MyComponent renders TextInput which has a placeholder 'Enter details' // and with `onChangeText` bound to handleChangeText - + , ); fireEvent(screen.getByPlaceholderText('change'), 'onChangeText', 'ab'); @@ -1349,7 +1349,7 @@ const onBlurMock = jest.fn(); render( - + , ); // you can omit the `on` prefix @@ -1387,7 +1387,7 @@ render( Press me - + , ); fireEvent.press(screen.getByText('Press me'), eventData); @@ -1416,7 +1416,7 @@ const CHANGE_TEXT = 'content'; render( - + , ); fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT); @@ -1448,7 +1448,7 @@ const eventData = { render( XD - + , ); 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( expectation: () => T, - options?: { timeout: number; interval: number } + options?: { timeout: number; interval: number }, ): Promise; ``` @@ -2152,7 +2152,7 @@ If you receive warnings related to `act()` function consult our [Understanding A ```ts function waitForElementToBeRemoved( expectation: () => T, - options?: { timeout: number; interval: number } + options?: { timeout: number; interval: number }, ): Promise; ``` @@ -2336,7 +2336,7 @@ url: /react-native-testing-library/12.x/docs/api/misc/render-hook.md ```ts function renderHook( callback: (props?: Props) => Result, - options?: RenderHookOptions + options?: RenderHookOptions, ): RenderHookResult; ``` @@ -2649,7 +2649,7 @@ import { render, screen } from '@testing-library/react-native'; render( Hello - + , ); const element = screen.getByRole('button'); const element2 = screen.getByRole('button', { name: 'Hello' }); @@ -2864,13 +2864,15 @@ render(Hidden from accessibility); 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( Hello world - + , ); getByText('Hello world'); // matches ``` diff --git a/14.x/cookbook/advanced/network-requests.html b/14.x/cookbook/advanced/network-requests.html index c3120cd4..d453b674 100644 --- a/14.x/cookbook/advanced/network-requests.html +++ b/14.x/cookbook/advanced/network-requests.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/cookbook/basics/async-events.html b/14.x/cookbook/basics/async-events.html index 9a4efb2b..961c5027 100644 --- a/14.x/cookbook/basics/async-events.html +++ b/14.x/cookbook/basics/async-events.html @@ -9,7 +9,7 @@ - + @@ -49,7 +49,7 @@ // 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(); @@ -75,7 +75,7 @@ 
      const button = await screen.findByRole(
   'button',
   { name: 'Start' },
-  { timeout: 1000, interval: 50 }
+  { timeout: 1000, interval: 50 },
 );

      Alternatively, a default global timeout value can be set using the configure function:

      configure({ asyncUtilTimeout: timeout });
      @@ -86,7 +86,7 @@ options?: { timeout: number; interval: number; - } + }, ): Promise<T>;

      It accepts an expectation to be validated and repeats the check every defined interval until it no longer throws an error. Similarly to findBy* queries they accept timeout and interval options and have the same default values of 1000ms for timeout, and a checking interval of 50 ms.

      Example

      @@ -99,7 +99,7 @@ options?: { timeout: number; interval: number; - } + }, ): Promise<T> {}

      This function is, in a way, the negation of waitFor 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 timeout and interval parameters as findBy* queries and waitFor.

      Example

      diff --git a/14.x/cookbook/basics/async-events.md b/14.x/cookbook/basics/async-events.md index 823755ba..27fefa49 100644 --- a/14.x/cookbook/basics/async-events.md +++ b/14.x/cookbook/basics/async-events.md @@ -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( options?: { timeout: number; interval: number; - } + }, ): Promise; ``` @@ -116,7 +116,7 @@ function waitForElementToBeRemoved( options?: { timeout: number; interval: number; - } + }, ): Promise {} ``` diff --git a/14.x/cookbook/basics/custom-render.html b/14.x/cookbook/basics/custom-render.html index 0d99bbca..365fb0a1 100644 --- a/14.x/cookbook/basics/custom-render.html +++ b/14.x/cookbook/basics/custom-render.html @@ -9,7 +9,7 @@ - + @@ -33,12 +33,12 @@ 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>, ); }
      custom-render/index.test.tsx
      import { screen } from '@testing-library/react-native';
diff --git a/14.x/cookbook/basics/custom-render.md b/14.x/cookbook/basics/custom-render.md
index aa3a645f..4e8830ec 100644
--- a/14.x/cookbook/basics/custom-render.md
+++ b/14.x/cookbook/basics/custom-render.md
@@ -16,12 +16,12 @@ interface RenderWithProvidersProps {
 
 export async function renderWithProviders(
   ui: React.ReactElement,
-  options?: RenderWithProvidersProps
+  options?: RenderWithProvidersProps,
 ) {
   return await render(
     
       {ui}
-    
+    ,
   );
 }
 ```
diff --git a/14.x/cookbook/index.html b/14.x/cookbook/index.html
index c28c8e97..7b0134df 100644
--- a/14.x/cookbook/index.html
+++ b/14.x/cookbook/index.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/14.x/cookbook/state-management/jotai.html b/14.x/cookbook/state-management/jotai.html
index f58a68ae..d4df630e 100644
--- a/14.x/cookbook/state-management/jotai.html
+++ b/14.x/cookbook/state-management/jotai.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -116,10 +116,10 @@ corresponding values as an argument.
      
  */
 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>,
   );
 }
 
diff --git a/14.x/cookbook/state-management/jotai.md b/14.x/cookbook/state-management/jotai.md
index e599ea36..3d6348b4 100644
--- a/14.x/cookbook/state-management/jotai.md
+++ b/14.x/cookbook/state-management/jotai.md
@@ -110,10 +110,10 @@ export interface RenderWithAtomsOptions {
  */
 export async function renderWithAtoms(
   component: React.ReactElement,
-  options: RenderWithAtomsOptions
+  options: RenderWithAtomsOptions,
 ) {
   return await render(
-    {component}
+    {component},
   );
 }
 
diff --git a/14.x/docs/advanced/testing-env.html b/14.x/docs/advanced/testing-env.html
index f7ce8df5..fb662830 100644
--- a/14.x/docs/advanced/testing-env.html
+++ b/14.x/docs/advanced/testing-env.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/14.x/docs/advanced/third-party-integration.html b/14.x/docs/advanced/third-party-integration.html
index d5c7f997..90d6b31e 100644
--- a/14.x/docs/advanced/third-party-integration.html
+++ b/14.x/docs/advanced/third-party-integration.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/14.x/docs/advanced/understanding-act.html b/14.x/docs/advanced/understanding-act.html
index 02ea794c..0c94d18d 100644
--- a/14.x/docs/advanced/understanding-act.html
+++ b/14.x/docs/advanced/understanding-act.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/14.x/docs/api.html b/14.x/docs/api.html
index 0f22d003..61ae1338 100644
--- a/14.x/docs/api.html
+++ b/14.x/docs/api.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/14.x/docs/api/events/fire-event.html b/14.x/docs/api/events/fire-event.html
index 30efc60c..6511d8b6 100644
--- a/14.x/docs/api/events/fire-event.html
+++ b/14.x/docs/api/events/fire-event.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -36,7 +36,7 @@ For common events like press or type, use the   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');
@@ -53,7 +53,7 @@ For common events like press or type, use the await render(
   <View>
     <TextInput placeholder="my placeholder" onBlur={onBlurMock} />
-  </View>
+  </View>,
 );
 
 // you can omit the `on` prefix
@@ -83,7 +83,7 @@ Use the User Event     <TouchableOpacity onPress={onPressMock}>
       <Text>Press me</Text>
     </TouchableOpacity>
-  </View>
+  </View>,
 );
 
 await fireEvent.press(screen.getByText('Press me'), eventData);
@@ -105,7 +105,7 @@ Use the User Event await render(
   <View>
     <TextInput placeholder="Enter data" onChangeText={onChangeTextMock} />
-  </View>
+  </View>,
 );
 
 await fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT);
      @@ -133,7 +133,7 @@ Prefer await render( <ScrollView testID="scroll-view" onScroll={onScrollMock}> <Text>Content</Text> - </ScrollView> + </ScrollView>, ); await fireEvent.scroll(screen.getByTestId('scroll-view'), eventData);

      Need React or React Native diff --git a/14.x/docs/api/events/fire-event.md b/14.x/docs/api/events/fire-event.md index ed373a9f..9745ea9d 100644 --- a/14.x/docs/api/events/fire-event.md +++ b/14.x/docs/api/events/fire-event.md @@ -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 - + , ); await fireEvent(screen.getByPlaceholderText('change'), 'onChangeText', 'ab'); @@ -51,7 +51,7 @@ const onBlurMock = jest.fn(); await render( - + , ); // you can omit the `on` prefix @@ -92,7 +92,7 @@ await render( Press me - + , ); await fireEvent.press(screen.getByText('Press me'), eventData); @@ -124,7 +124,7 @@ const CHANGE_TEXT = 'content'; await render( - + , ); await fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT); @@ -163,7 +163,7 @@ const eventData = { await render( Content - + , ); await fireEvent.scroll(screen.getByTestId('scroll-view'), eventData); diff --git a/14.x/docs/api/events/user-event.html b/14.x/docs/api/events/user-event.html index 193c2a36..81f57ee1 100644 --- a/14.x/docs/api/events/user-event.html +++ b/14.x/docs/api/events/user-event.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/docs/api/jest-matchers.html b/14.x/docs/api/jest-matchers.html index 414e9cab..6425f1b8 100644 --- a/14.x/docs/api/jest-matchers.html +++ b/14.x/docs/api/jest-matchers.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/docs/api/misc/accessibility.html b/14.x/docs/api/misc/accessibility.html index e2c8c887..d7b08669 100644 --- a/14.x/docs/api/misc/accessibility.html +++ b/14.x/docs/api/misc/accessibility.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/docs/api/misc/async.html b/14.x/docs/api/misc/async.html index d541e314..441402d2 100644 --- a/14.x/docs/api/misc/async.html +++ b/14.x/docs/api/misc/async.html @@ -9,7 +9,7 @@ - + @@ -30,7 +30,7 @@ timeout?: number; interval?: number; onTimeout?: (error: Error) => Error; - } + }, ): Promise<T>;

      Waits for the expectation callback to pass. waitFor runs the callback multiple times until timeout is reached, as specified by the timeout and interval 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.

      await waitFor(() => expect(mockFunction).toHaveBeenCalledWith());
      @@ -81,7 +81,7 @@ Avoiding side effects in expectation callback can be partially enfo () => { expect(someFunction).toHaveBeenCalledWith(); }, - { timeout: 10000 } + { timeout: 10000 }, );
      Note

      If you receive warnings related to act() function consult our Understanding Act function document.

      @@ -98,7 +98,7 @@ If you receive warnings related to act() function consult our timeout?: number; interval?: number; onTimeout?: (error: Error) => Error; - } + }, ): Promise<T>;

      Waits for non-deterministic periods of time until queried element is removed or times out. waitForElementToBeRemoved periodically calls expectation every interval milliseconds to determine whether the element has been removed or not.

      import { render, screen, waitForElementToBeRemoved } from '@testing-library/react-native';
diff --git a/14.x/docs/api/misc/async.md b/14.x/docs/api/misc/async.md
index 63ce94c4..d2316a99 100644
--- a/14.x/docs/api/misc/async.md
+++ b/14.x/docs/api/misc/async.md
@@ -13,7 +13,7 @@ function waitFor(
     timeout?: number;
     interval?: number;
     onTimeout?: (error: Error) => Error;
-  }
+  },
 ): Promise;
 ```
 
@@ -93,7 +93,7 @@ await waitFor(
   () => {
     expect(someFunction).toHaveBeenCalledWith();
   },
-  { timeout: 10000 }
+  { timeout: 10000 },
 );
 ```
 
@@ -116,7 +116,7 @@ function waitForElementToBeRemoved(
     timeout?: number;
     interval?: number;
     onTimeout?: (error: Error) => Error;
-  }
+  },
 ): Promise;
 ```
 
diff --git a/14.x/docs/api/misc/config.html b/14.x/docs/api/misc/config.html
index 3d99265b..27c58485 100644
--- a/14.x/docs/api/misc/config.html
+++ b/14.x/docs/api/misc/config.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/14.x/docs/api/misc/other.html b/14.x/docs/api/misc/other.html
index 943b5aef..e44c68ff 100644
--- a/14.x/docs/api/misc/other.html
+++ b/14.x/docs/api/misc/other.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/14.x/docs/api/misc/render-hook.html b/14.x/docs/api/misc/render-hook.html
index e241655b..5fc9a03b 100644
--- a/14.x/docs/api/misc/render-hook.html
+++ b/14.x/docs/api/misc/render-hook.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -24,7 +24,7 @@
 
 
      async function renderHook<Result, Props>(
   hookFn: (props: Props) => Result,
-  options?: RenderHookOptions<Props>
+  options?: RenderHookOptions<Props>,
 ): Promise<RenderHookResult<Result, Props>>;
      
 
      Renders a test component that calls the provided callback (and any hooks it uses) on each render. Returns a Promise that resolves to a RenderHookResult object.
      
 
      This is the recommended default API for testing hooks. It uses async act internally to ensure all pending React updates are executed during rendering. This makes it compatible with async React features like Suspense boundaries and the use() hook.
      
diff --git a/14.x/docs/api/misc/render-hook.md b/14.x/docs/api/misc/render-hook.md
index f8c12f82..c6325247 100644
--- a/14.x/docs/api/misc/render-hook.md
+++ b/14.x/docs/api/misc/render-hook.md
@@ -5,7 +5,7 @@
 ```ts
 async function renderHook(
   hookFn: (props: Props) => Result,
-  options?: RenderHookOptions
+  options?: RenderHookOptions,
 ): Promise>;
 ```
 
diff --git a/14.x/docs/api/queries.html b/14.x/docs/api/queries.html
index 34502a72..815d711c 100644
--- a/14.x/docs/api/queries.html
+++ b/14.x/docs/api/queries.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -126,7 +126,7 @@ In order for *ByRole queries to match an element it needs to be con
 await render(
   <Pressable accessibilityRole="button" disabled>
     <Text>Hello</Text>
-  </Pressable>
+  </Pressable>,
 );
 const element = screen.getByRole('button');
 const element2 = screen.getByRole('button', { name: 'Hello' });
@@ -309,12 +309,14 @@ Following 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();
      renderHook

      TextMatch type

      type TextMatch = string | RegExp;
      diff --git a/14.x/docs/api/queries.md b/14.x/docs/api/queries.md index 75e99bce..eb9a8521 100644 --- a/14.x/docs/api/queries.md +++ b/14.x/docs/api/queries.md @@ -183,7 +183,7 @@ import { render, screen } from '@testing-library/react-native'; await render( Hello - + , ); const element = screen.getByRole('button'); const element2 = screen.getByRole('button', { name: 'Hello' }); @@ -401,12 +401,14 @@ await render(Hidden from accessibility) 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(); ``` diff --git a/14.x/docs/api/render.html b/14.x/docs/api/render.html index 85b38e37..38ded19f 100644 --- a/14.x/docs/api/render.html +++ b/14.x/docs/api/render.html @@ -9,7 +9,7 @@ - + @@ -24,7 +24,7 @@

      render function

      async function render<T>(
   element: React.ReactElement<T>,
-  options?: RenderOptions
+  options?: RenderOptions,
 ): Promise<RenderResult>;

      The render 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 act internally, so all pending React updates run before it resolves. This works with async React features like Suspense boundaries and the use() hook.

      import { render, screen } from '@testing-library/react-native';
diff --git a/14.x/docs/api/render.md b/14.x/docs/api/render.md
index be9c2b6b..c699a915 100644
--- a/14.x/docs/api/render.md
+++ b/14.x/docs/api/render.md
@@ -5,7 +5,7 @@
 ```ts
 async function render(
   element: React.ReactElement,
-  options?: RenderOptions
+  options?: RenderOptions,
 ): Promise;
 ```
 
diff --git a/14.x/docs/api/screen.html b/14.x/docs/api/screen.html
index 93d3b670..76e4309f 100644
--- a/14.x/docs/api/screen.html
+++ b/14.x/docs/api/screen.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -86,7 +86,10 @@
 
      import { StyleSheet } from 'react-native';
 
 screen.debug({
-  mapProps: ({ style, ...props }) => ({ style: StyleSheet.flatten(style), ...props }),
+  mapProps: ({ style, ...props }) => ({
+    style: StyleSheet.flatten(style),
+    ...props,
+  }),
 });
      
 
      Or remove props that have little value when debugging tests, e.g. path prop for svgs
      
 
      screen.debug({ mapProps: ({ path, ...props }) => ({ ...props }) });
      
@@ -116,7 +119,7 @@
   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');
diff --git a/14.x/docs/api/screen.md b/14.x/docs/api/screen.md
index c88ba114..0cc462be 100644
--- a/14.x/docs/api/screen.md
+++ b/14.x/docs/api/screen.md
@@ -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(
     
       Hello
-    
+    ,
   );
   // root is the View element you rendered
   expect(screen.root.props.testID).toBe('root-view');
diff --git a/14.x/docs/guides/common-mistakes.html b/14.x/docs/guides/common-mistakes.html
index 7e6e6d2c..2e8959b4 100644
--- a/14.x/docs/guides/common-mistakes.html
+++ b/14.x/docs/guides/common-mistakes.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -58,7 +58,7 @@
   await render(
     <View>
       <TextInput aria-label="Username" placeholder="Enter username" value="" />
-    </View>
+    </View>,
   );
 
   // ✅ Good - uses accessible label
@@ -83,7 +83,7 @@
         <Text>Submit</Text>
       </Pressable>
       <TextInput role="searchbox" aria-label="Search" placeholder="Search..." />
-    </View>
+    </View>,
   );
 
   // ✅ Good - uses role query
@@ -115,7 +115,7 @@
   await render(
     <Pressable role="button" aria-disabled>
       <Text>Submit</Text>
-    </Pressable>
+    </Pressable>,
   );
 
   const button = screen.getByRole('button', { name: 'Submit' });
@@ -144,7 +144,7 @@
   await render(
     <View>
       <Text>Hello</Text>
-    </View>
+    </View>,
   );
 
   // ✅ Good - uses queryBy for non-existence check
@@ -230,7 +230,7 @@
   const { container } = await render(
     <View>
       <Text testID="message">Hello</Text>
-    </View>
+    </View>,
   );
 
   // ❌ Bad - using container.queryAll directly
@@ -267,7 +267,7 @@
   const { getByText } = await render(
     <View>
       <Text>Hello</Text>
-    </View>
+    </View>,
   );
 
   expect(getByText('Hello')).toBeOnTheScreen();
@@ -280,7 +280,7 @@
   await render(
     <View>
       <Text>Hello</Text>
-    </View>
+    </View>,
   );
 
   expect(screen.getByText('Hello')).toBeOnTheScreen();
@@ -374,7 +374,7 @@
   await render(
     <View>
       <Text>Hello World</Text>
-    </View>
+    </View>,
   );
 
   // ✅ Good - queries by visible text
@@ -415,7 +415,7 @@
   await render(
     <View>
       <Text>Hello</Text>
-    </View>
+    </View>,
   );
 
   // ✅ Good - getBy throws if not found, so it's an assertion
diff --git a/14.x/docs/guides/common-mistakes.md b/14.x/docs/guides/common-mistakes.md
index 4e1d26e1..afea5b42 100644
--- a/14.x/docs/guides/common-mistakes.md
+++ b/14.x/docs/guides/common-mistakes.md
@@ -34,7 +34,7 @@ test('finds input by label', async () => {
   await render(
     
       
-    
+    ,
   );
 
   // ✅ Good - uses accessible label
@@ -65,7 +65,7 @@ test('uses role queries', async () => {
         Submit
       
       
-    
+    ,
   );
 
   // ✅ Good - uses role query
@@ -104,7 +104,7 @@ test('button is disabled', async () => {
   await render(
     
       Submit
-    
+    ,
   );
 
   const button = screen.getByRole('button', { name: 'Submit' });
@@ -139,7 +139,7 @@ test('checks non-existence', async () => {
   await render(
     
       Hello
-    
+    ,
   );
 
   // ✅ Good - uses queryBy for non-existence check
@@ -243,7 +243,7 @@ test('finds element incorrectly', async () => {
   const { container } = await render(
     
       Hello
-    
+    ,
   );
 
   // ❌ Bad - using container.queryAll directly
@@ -293,7 +293,7 @@ test('renders component', async () => {
   const { getByText } = await render(
     
       Hello
-    
+    ,
   );
 
   expect(getByText('Hello')).toBeOnTheScreen();
@@ -310,7 +310,7 @@ test('renders component', async () => {
   await render(
     
       Hello
-    
+    ,
   );
 
   expect(screen.getByText('Hello')).toBeOnTheScreen();
@@ -422,7 +422,7 @@ test('finds text correctly', async () => {
   await render(
     
       Hello World
-    
+    ,
   );
 
   // ✅ Good - queries by visible text
@@ -489,7 +489,7 @@ test('uses getBy as assertion', async () => {
   await render(
     
       Hello
-    
+    ,
   );
 
   // ✅ Good - getBy throws if not found, so it's an assertion
diff --git a/14.x/docs/guides/community-resources.html b/14.x/docs/guides/community-resources.html
index 738744a0..092418be 100644
--- a/14.x/docs/guides/community-resources.html
+++ b/14.x/docs/guides/community-resources.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/14.x/docs/guides/faq.html b/14.x/docs/guides/faq.html
index 6f0a6997..72a00882 100644
--- a/14.x/docs/guides/faq.html
+++ b/14.x/docs/guides/faq.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/14.x/docs/guides/how-to-query.html b/14.x/docs/guides/how-to-query.html
index d64d2e75..e14bff7a 100644
--- a/14.x/docs/guides/how-to-query.html
+++ b/14.x/docs/guides/how-to-query.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/14.x/docs/guides/llm-guidelines.html b/14.x/docs/guides/llm-guidelines.html
index 08112d9f..ed910b06 100644
--- a/14.x/docs/guides/llm-guidelines.html
+++ b/14.x/docs/guides/llm-guidelines.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/14.x/docs/guides/troubleshooting.html b/14.x/docs/guides/troubleshooting.html
index 69e79a75..9a4c25f2 100644
--- a/14.x/docs/guides/troubleshooting.html
+++ b/14.x/docs/guides/troubleshooting.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/14.x/docs/start/intro.html b/14.x/docs/start/intro.html
index ec5b1ebf..8f986cc7 100644
--- a/14.x/docs/start/intro.html
+++ b/14.x/docs/start/intro.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/14.x/docs/start/migration-v14.html b/14.x/docs/start/migration-v14.html
index 9f10192e..bccbe8ab 100644
--- a/14.x/docs/start/migration-v14.html
+++ b/14.x/docs/start/migration-v14.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -162,7 +162,7 @@ bun add -D test-renderer@1.2
      expect(onPress).toHaveBeenCalledWith( expect.objectContaining({ nativeEvent: expect.objectContaining({ pageX: 20, pageY: 30 }), - }) + }), );

      If your v13 assertions expected the handler to receive exactly the object you passed to fireEvent.press() or fireEvent.scroll(), update them to use partial matching.

      act is now async

      diff --git a/14.x/docs/start/migration-v14.md b/14.x/docs/start/migration-v14.md index fb376cb3..62500edb 100644 --- a/14.x/docs/start/migration-v14.md +++ b/14.x/docs/start/migration-v14.md @@ -289,7 +289,7 @@ await fireEvent.press(screen.getByText('Press me'), { expect(onPress).toHaveBeenCalledWith( expect.objectContaining({ nativeEvent: expect.objectContaining({ pageX: 20, pageY: 30 }), - }) + }), ); ``` diff --git a/14.x/docs/start/quick-start.html b/14.x/docs/start/quick-start.html index 17b300a6..c2e7de95 100644 --- a/14.x/docs/start/quick-start.html +++ b/14.x/docs/start/quick-start.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/index.html b/14.x/index.html index 4a49a753..1689d38d 100644 --- a/14.x/index.html +++ b/14.x/index.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/llms-full.txt b/14.x/llms-full.txt index de87e3f9..62c6df55 100644 --- a/14.x/llms-full.txt +++ b/14.x/llms-full.txt @@ -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( options?: { timeout: number; interval: number; - } + }, ): Promise; ``` @@ -507,7 +507,7 @@ function waitForElementToBeRemoved( options?: { timeout: number; interval: number; - } + }, ): Promise {} ``` @@ -561,12 +561,12 @@ interface RenderWithProvidersProps { export async function renderWithProviders( ui: React.ReactElement, - options?: RenderWithProvidersProps + options?: RenderWithProvidersProps, ) { return await render( {ui} - + , ); } ``` @@ -781,10 +781,10 @@ export interface RenderWithAtomsOptions { */ export async function renderWithAtoms( component: React.ReactElement, - options: RenderWithAtomsOptions + options: RenderWithAtomsOptions, ) { return await render( - {component} + {component}, ); } @@ -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 - + , ); await fireEvent(screen.getByPlaceholderText('change'), 'onChangeText', 'ab'); @@ -1373,7 +1373,7 @@ const onBlurMock = jest.fn(); await render( - + , ); // you can omit the `on` prefix @@ -1414,7 +1414,7 @@ await render( Press me - + , ); await fireEvent.press(screen.getByText('Press me'), eventData); @@ -1446,7 +1446,7 @@ const CHANGE_TEXT = 'content'; await render( - + , ); await fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT); @@ -1485,7 +1485,7 @@ const eventData = { await render( Content - + , ); await fireEvent.scroll(screen.getByTestId('scroll-view'), eventData); @@ -2059,7 +2059,7 @@ function waitFor( timeout?: number; interval?: number; onTimeout?: (error: Error) => Error; - } + }, ): Promise; ``` @@ -2139,7 +2139,7 @@ await waitFor( () => { expect(someFunction).toHaveBeenCalledWith(); }, - { timeout: 10000 } + { timeout: 10000 }, ); ``` @@ -2162,7 +2162,7 @@ function waitForElementToBeRemoved( timeout?: number; interval?: number; onTimeout?: (error: Error) => Error; - } + }, ): Promise; ``` @@ -2370,7 +2370,7 @@ url: /react-native-testing-library/14.x/docs/api/misc/render-hook.md ```ts async function renderHook( hookFn: (props: Props) => Result, - options?: RenderHookOptions + options?: RenderHookOptions, ): Promise>; ``` @@ -2731,7 +2731,7 @@ import { render, screen } from '@testing-library/react-native'; await render( Hello - + , ); const element = screen.getByRole('button'); const element2 = screen.getByRole('button', { name: 'Hello' }); @@ -2949,12 +2949,14 @@ await render(Hidden from accessibility) 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( element: React.ReactElement, - options?: RenderOptions + options?: RenderOptions, ): Promise; ``` @@ -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( Hello - + , ); // 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( - + , ); // ✅ Good - uses accessible label @@ -3390,7 +3395,7 @@ test('uses role queries', async () => { Submit - + , ); // ✅ Good - uses role query @@ -3429,7 +3434,7 @@ test('button is disabled', async () => { await render( Submit - + , ); const button = screen.getByRole('button', { name: 'Submit' }); @@ -3464,7 +3469,7 @@ test('checks non-existence', async () => { await render( Hello - + , ); // ✅ Good - uses queryBy for non-existence check @@ -3568,7 +3573,7 @@ test('finds element incorrectly', async () => { const { container } = await render( Hello - + , ); // ❌ Bad - using container.queryAll directly @@ -3618,7 +3623,7 @@ test('renders component', async () => { const { getByText } = await render( Hello - + , ); expect(getByText('Hello')).toBeOnTheScreen(); @@ -3635,7 +3640,7 @@ test('renders component', async () => { await render( Hello - + , ); expect(screen.getByText('Hello')).toBeOnTheScreen(); @@ -3747,7 +3752,7 @@ test('finds text correctly', async () => { await render( Hello World - + , ); // ✅ Good - queries by visible text @@ -3814,7 +3819,7 @@ test('uses getBy as assertion', async () => { await render( Hello - + , ); // ✅ 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 }), - }) + }), ); ``` diff --git a/404.html b/404.html index e7272d4f..b5c2b7b1 100644 --- a/404.html +++ b/404.html @@ -9,7 +9,7 @@ - + diff --git a/cookbook/advanced/network-requests.html b/cookbook/advanced/network-requests.html index 78bb7f4a..38a6f009 100644 --- a/cookbook/advanced/network-requests.html +++ b/cookbook/advanced/network-requests.html @@ -9,7 +9,7 @@ - + diff --git a/cookbook/basics/async-tests.html b/cookbook/basics/async-tests.html index febfa014..3ddf6a29 100644 --- a/cookbook/basics/async-tests.html +++ b/cookbook/basics/async-tests.html @@ -9,7 +9,7 @@ - + @@ -48,7 +48,7 @@ // 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(); @@ -81,7 +81,7 @@ options?: { timeout: number; interval: number; - } + }, ): Promise<T>;

      It accepts an expectation to be validated and repeats the check every defined interval until it no longer throws an error. Similarly to findBy* queries they accept timeout and interval options and have the same default values of 1000ms for timeout, and a checking interval of 50 ms.

      Example

      @@ -94,7 +94,7 @@ options?: { timeout: number; interval: number; - } + }, ): Promise<T> {}

      This function is, in a way, the negation of waitFor 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 timeout and interval parameters as findBy* queries and waitFor.

      Example

      diff --git a/cookbook/basics/async-tests.md b/cookbook/basics/async-tests.md index fec5614c..277345a9 100644 --- a/cookbook/basics/async-tests.md +++ b/cookbook/basics/async-tests.md @@ -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( options?: { timeout: number; interval: number; - } + }, ): Promise; ``` @@ -111,7 +111,7 @@ function waitForElementToBeRemoved( options?: { timeout: number; interval: number; - } + }, ): Promise {} ``` diff --git a/cookbook/basics/custom-render.html b/cookbook/basics/custom-render.html index 2af21b94..7b3b1304 100644 --- a/cookbook/basics/custom-render.html +++ b/cookbook/basics/custom-render.html @@ -9,7 +9,7 @@ - + @@ -33,12 +33,12 @@ 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>, ); }
      custom-render/index.test.tsx
      import { screen } from '@testing-library/react-native';
diff --git a/cookbook/basics/custom-render.md b/cookbook/basics/custom-render.md
index 6d1d88ff..17b626ba 100644
--- a/cookbook/basics/custom-render.md
+++ b/cookbook/basics/custom-render.md
@@ -16,12 +16,12 @@ interface RenderWithProvidersProps {
 
 export function renderWithProviders(
   ui: React.ReactElement,
-  options?: RenderWithProvidersProps
+  options?: RenderWithProvidersProps,
 ) {
   return render(
     
       {ui}
-    
+    ,
   );
 }
 ```
diff --git a/cookbook/index.html b/cookbook/index.html
index 3fdd3882..378a71dc 100644
--- a/cookbook/index.html
+++ b/cookbook/index.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/cookbook/state-management/jotai.html b/cookbook/state-management/jotai.html
index 03e71c5a..b61f18b3 100644
--- a/cookbook/state-management/jotai.html
+++ b/cookbook/state-management/jotai.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -116,10 +116,10 @@ corresponding values as an argument.
      
  */
 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>,
   );
 };
 
diff --git a/cookbook/state-management/jotai.md b/cookbook/state-management/jotai.md
index 0e0c72e8..8471367c 100644
--- a/cookbook/state-management/jotai.md
+++ b/cookbook/state-management/jotai.md
@@ -110,10 +110,10 @@ export interface RenderWithAtomsOptions {
  */
 export const renderWithAtoms = (
   component: React.ReactElement,
-  options: RenderWithAtomsOptions
+  options: RenderWithAtomsOptions,
 ) => {
   return render(
-    {component}
+    {component},
   );
 };
 
diff --git a/docs/advanced/testing-env.html b/docs/advanced/testing-env.html
index c391516b..f682f5e6 100644
--- a/docs/advanced/testing-env.html
+++ b/docs/advanced/testing-env.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/advanced/third-party-integration.html b/docs/advanced/third-party-integration.html
index 51d443b9..b355352a 100644
--- a/docs/advanced/third-party-integration.html
+++ b/docs/advanced/third-party-integration.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/advanced/understanding-act.html b/docs/advanced/understanding-act.html
index adfc5c8e..5bfd63a8 100644
--- a/docs/advanced/understanding-act.html
+++ b/docs/advanced/understanding-act.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/api.html b/docs/api.html
index 2d454c28..b826b522 100644
--- a/docs/api.html
+++ b/docs/api.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/api/events/fire-event.html b/docs/api/events/fire-event.html
index 190476ca..514b98ba 100644
--- a/docs/api/events/fire-event.html
+++ b/docs/api/events/fire-event.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -35,7 +35,7 @@ more realistic event simulation by emitting a sequence of events with proper eve
   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');
@@ -52,7 +52,7 @@ more realistic event simulation by emitting a sequence of events with proper eve
 render(
   <View>
     <TextInput placeholder="my placeholder" onBlur={onBlurMock} />
-  </View>
+  </View>,
 );
 
 // you can omit the `on` prefix
@@ -82,7 +82,7 @@ It is recommended to use the User Event     <TouchableOpacity onPress={onPressMock}>
       <Text>Press me</Text>
     </TouchableOpacity>
-  </View>
+  </View>,
 );
 
 fireEvent.press(screen.getByText('Press me'), eventData);
@@ -104,7 +104,7 @@ It is recommended to use the User Event render(
   <View>
     <TextInput placeholder="Enter data" onChangeText={onChangeTextMock} />
-  </View>
+  </View>,
 );
 
 fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT);
      @@ -132,7 +132,7 @@ Prefer using render( <ScrollView onScroll={onScrollMock}> <Text>XD</Text> - </ScrollView> + </ScrollView>, ); fireEvent.scroll(screen.getByText('scroll-view'), eventData);
      diff --git a/docs/api/events/fire-event.md b/docs/api/events/fire-event.md index 7580d472..2a5a88ff 100644 --- a/docs/api/events/fire-event.md +++ b/docs/api/events/fire-event.md @@ -25,7 +25,7 @@ test('fire changeText event', () => { render( // MyComponent renders TextInput which has a placeholder 'Enter details' // and with `onChangeText` bound to handleChangeText - + , ); fireEvent(screen.getByPlaceholderText('change'), 'onChangeText', 'ab'); @@ -48,7 +48,7 @@ const onBlurMock = jest.fn(); render( - + , ); // you can omit the `on` prefix @@ -89,7 +89,7 @@ render( Press me - + , ); fireEvent.press(screen.getByText('Press me'), eventData); @@ -121,7 +121,7 @@ const CHANGE_TEXT = 'content'; render( - + , ); fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT); @@ -160,7 +160,7 @@ const eventData = { render( XD - + , ); fireEvent.scroll(screen.getByText('scroll-view'), eventData); diff --git a/docs/api/events/user-event.html b/docs/api/events/user-event.html index c440215f..97e245b0 100644 --- a/docs/api/events/user-event.html +++ b/docs/api/events/user-event.html @@ -9,7 +9,7 @@ - + diff --git a/docs/api/jest-matchers.html b/docs/api/jest-matchers.html index 5471fa40..54c18568 100644 --- a/docs/api/jest-matchers.html +++ b/docs/api/jest-matchers.html @@ -9,7 +9,7 @@ - + diff --git a/docs/api/misc/accessibility.html b/docs/api/misc/accessibility.html index f1ca07a6..aaa00572 100644 --- a/docs/api/misc/accessibility.html +++ b/docs/api/misc/accessibility.html @@ -9,7 +9,7 @@ - + diff --git a/docs/api/misc/async.html b/docs/api/misc/async.html index f47a81dd..c7d005ff 100644 --- a/docs/api/misc/async.html +++ b/docs/api/misc/async.html @@ -9,7 +9,7 @@ - + @@ -26,7 +26,7 @@

      waitFor

      function waitFor<T>(
   expectation: () => T,
-  options?: { timeout: number; interval: number }
+  options?: { timeout: number; interval: number },
 ): Promise<T>;

      Waits for the expectation callback to pass. waitFor may run the callback multiple times until the timeout is reached, as specified by the timeout and interval options. The callback must throw an error when the expectation isn't met. Returning any value, including a falsy one, is treated as meeting the expectation, and the callback result is returned to the caller of waitFor.

      await waitFor(() => expect(mockFunction).toHaveBeenCalledWith());
      @@ -81,7 +81,7 @@ If you receive warnings related to act() function consult our waitForElementToBeRemoved 
      function waitForElementToBeRemoved<T>(
   expectation: () => T,
-  options?: { timeout: number; interval: number }
+  options?: { timeout: number; interval: number },
 ): Promise<T>;

      Waits until the queried element is removed or times out. waitForElementToBeRemoved periodically calls expectation every interval milliseconds to determine whether the element has been removed or not.

      import { render, screen, waitForElementToBeRemoved } from '@testing-library/react-native';
diff --git a/docs/api/misc/async.md b/docs/api/misc/async.md
index abb69add..c851b494 100644
--- a/docs/api/misc/async.md
+++ b/docs/api/misc/async.md
@@ -9,7 +9,7 @@ The `findBy*` queries are used to find elements that are not instantly available
 ```tsx
 function waitFor(
   expectation: () => T,
-  options?: { timeout: number; interval: number }
+  options?: { timeout: number; interval: number },
 ): Promise;
 ```
 
@@ -99,7 +99,7 @@ If you receive warnings related to `act()` function consult our [Understanding A
 ```ts
 function waitForElementToBeRemoved(
   expectation: () => T,
-  options?: { timeout: number; interval: number }
+  options?: { timeout: number; interval: number },
 ): Promise;
 ```
 
diff --git a/docs/api/misc/config.html b/docs/api/misc/config.html
index b92916fd..d82573d1 100644
--- a/docs/api/misc/config.html
+++ b/docs/api/misc/config.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/api/misc/other.html b/docs/api/misc/other.html
index cc1664d0..2231bce5 100644
--- a/docs/api/misc/other.html
+++ b/docs/api/misc/other.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/api/misc/render-hook.html b/docs/api/misc/render-hook.html
index f20bc5ef..fd4e61da 100644
--- a/docs/api/misc/render-hook.html
+++ b/docs/api/misc/render-hook.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -24,7 +24,7 @@
 
      renderHook
      
 
      function renderHook<Result, Props>(
   hookFn: (props?: Props) => Result,
-  options?: RenderHookOptions<Props>
+  options?: RenderHookOptions<Props>,
 ): RenderHookResult<Result, Props>;
      
 
      Renders a test component that calls the provided callback, including any hooks it calls, every time it renders. Returns a RenderHookResult object that you can interact with.
      
 
      import { renderHook } from '@testing-library/react-native';
@@ -113,7 +113,7 @@ Otherwise, render will default to using concurrent rendering used i
 
      renderHookAsync function
      
 
      async function renderHookAsync<Result, Props>(
   hookFn: (props?: Props) => Result,
-  options?: RenderHookOptions<Props>
+  options?: RenderHookOptions<Props>,
 ): Promise<RenderHookAsyncResult<Result, Props>>;
      
 
      Async versions of renderHook designed for working with React 19 and React Suspense. This method uses async act function internally to ensure all pending React updates are executed during rendering.
      
 
      
 
      TextMatch type
      
 
      type TextMatch = string | RegExp;
      
diff --git a/docs/api/queries.md b/docs/api/queries.md
index 7e44212c..2bc4ab22 100644
--- a/docs/api/queries.md
+++ b/docs/api/queries.md
@@ -180,7 +180,7 @@ import { render, screen } from '@testing-library/react-native';
 render(
   
     Hello
-  
+  ,
 );
 const element = screen.getByRole('button');
 const element2 = screen.getByRole('button', { name: 'Hello' });
@@ -395,13 +395,15 @@ render(Hidden from accessibility);
 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();
 ```
 
diff --git a/docs/api/render.html b/docs/api/render.html
index 1321eb6a..c3325275 100644
--- a/docs/api/render.html
+++ b/docs/api/render.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -60,7 +60,7 @@ This options is experimental, in some cases it might not work as intended, and i
 
      RNTL minimal version
      This API requires RNTL v13.3.0 or later.
      
 
      async function renderAsync(
   component: React.Element<any>,
-  options?: RenderAsyncOptions
+  options?: RenderAsyncOptions,
 ): Promise<RenderAsyncResult>;
      
 
      The renderAsync function is the async version of render designed for working with React 19 and React Suspense. This function uses async act function internally to ensure all pending React updates are executed during rendering.
      
 
      import { renderAsync, screen } from '@testing-library/react-native';
diff --git a/docs/api/render.md b/docs/api/render.md
index 323ee00f..d7f46b80 100644
--- a/docs/api/render.md
+++ b/docs/api/render.md
@@ -78,7 +78,7 @@ This API requires RNTL v13.3.0 or later.
 ```tsx
 async function renderAsync(
   component: React.Element,
-  options?: RenderAsyncOptions
+  options?: RenderAsyncOptions,
 ): Promise;
 ```
 
diff --git a/docs/api/screen.html b/docs/api/screen.html
index 66873bfb..6461e4cb 100644
--- a/docs/api/screen.html
+++ b/docs/api/screen.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/guides/common-mistakes.html b/docs/guides/common-mistakes.html
index 171e64bc..ee4c119a 100644
--- a/docs/guides/common-mistakes.html
+++ b/docs/guides/common-mistakes.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -58,7 +58,7 @@
   render(
     <View>
       <TextInput aria-label="Username" placeholder="Enter username" value="" />
-    </View>
+    </View>,
   );
 
   // ✅ Good - uses accessible label
@@ -83,7 +83,7 @@
         <Text>Submit</Text>
       </Pressable>
       <TextInput role="searchbox" aria-label="Search" placeholder="Search..." />
-    </View>
+    </View>,
   );
 
   // ✅ Good - uses role query
@@ -115,7 +115,7 @@
   render(
     <Pressable role="button" aria-disabled>
       <Text>Submit</Text>
-    </Pressable>
+    </Pressable>,
   );
 
   const button = screen.getByRole('button', { name: 'Submit' });
@@ -144,7 +144,7 @@
   render(
     <View>
       <Text>Hello</Text>
-    </View>
+    </View>,
   );
 
   // ✅ Good - uses queryBy for non-existence check
@@ -230,7 +230,7 @@
   const { UNSAFE_root } = render(
     <View>
       <Text testID="message">Hello</Text>
-    </View>
+    </View>,
   );
 
   // ❌ Bad - using UNSAFE_root directly
@@ -267,7 +267,7 @@
   const { getByText } = render(
     <View>
       <Text>Hello</Text>
-    </View>
+    </View>,
   );
 
   expect(getByText('Hello')).toBeOnTheScreen();
@@ -280,7 +280,7 @@
   render(
     <View>
       <Text>Hello</Text>
-    </View>
+    </View>,
   );
 
   expect(screen.getByText('Hello')).toBeOnTheScreen();
@@ -374,7 +374,7 @@
   render(
     <View>
       <Text>Hello World</Text>
-    </View>
+    </View>,
   );
 
   // ✅ Good - queries by visible text
@@ -415,7 +415,7 @@
   render(
     <View>
       <Text>Hello</Text>
-    </View>
+    </View>,
   );
 
   // ✅ Good - getBy throws if not found, so it's an assertion
diff --git a/docs/guides/common-mistakes.md b/docs/guides/common-mistakes.md
index 36e1e96f..495db1c2 100644
--- a/docs/guides/common-mistakes.md
+++ b/docs/guides/common-mistakes.md
@@ -34,7 +34,7 @@ test('finds input by label', () => {
   render(
     
       
-    
+    ,
   );
 
   // ✅ Good - uses accessible label
@@ -65,7 +65,7 @@ test('uses role queries', () => {
         Submit
       
       
-    
+    ,
   );
 
   // ✅ Good - uses role query
@@ -104,7 +104,7 @@ test('button is disabled', () => {
   render(
     
       Submit
-    
+    ,
   );
 
   const button = screen.getByRole('button', { name: 'Submit' });
@@ -139,7 +139,7 @@ test('checks non-existence', () => {
   render(
     
       Hello
-    
+    ,
   );
 
   // ✅ Good - uses queryBy for non-existence check
@@ -243,7 +243,7 @@ test('finds element incorrectly', () => {
   const { UNSAFE_root } = render(
     
       Hello
-    
+    ,
   );
 
   // ❌ Bad - using UNSAFE_root directly
@@ -293,7 +293,7 @@ test('renders component', () => {
   const { getByText } = render(
     
       Hello
-    
+    ,
   );
 
   expect(getByText('Hello')).toBeOnTheScreen();
@@ -310,7 +310,7 @@ test('renders component', () => {
   render(
     
       Hello
-    
+    ,
   );
 
   expect(screen.getByText('Hello')).toBeOnTheScreen();
@@ -422,7 +422,7 @@ test('finds text correctly', () => {
   render(
     
       Hello World
-    
+    ,
   );
 
   // ✅ Good - queries by visible text
@@ -489,7 +489,7 @@ test('uses getBy as assertion', () => {
   render(
     
       Hello
-    
+    ,
   );
 
   // ✅ Good - getBy throws if not found, so it's an assertion
diff --git a/docs/guides/community-resources.html b/docs/guides/community-resources.html
index 6ad7d003..2e8ebbf6 100644
--- a/docs/guides/community-resources.html
+++ b/docs/guides/community-resources.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/guides/faq.html b/docs/guides/faq.html
index 8aeab46a..9939c82a 100644
--- a/docs/guides/faq.html
+++ b/docs/guides/faq.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/guides/how-to-query.html b/docs/guides/how-to-query.html
index 56baff05..04815e96 100644
--- a/docs/guides/how-to-query.html
+++ b/docs/guides/how-to-query.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/guides/llm-guidelines.html b/docs/guides/llm-guidelines.html
index 8f62e491..3bdcb183 100644
--- a/docs/guides/llm-guidelines.html
+++ b/docs/guides/llm-guidelines.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/guides/react-19.html b/docs/guides/react-19.html
index 3a543f43..4f078733 100644
--- a/docs/guides/react-19.html
+++ b/docs/guides/react-19.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/guides/troubleshooting.html b/docs/guides/troubleshooting.html
index 57ecc292..fc7253b1 100644
--- a/docs/guides/troubleshooting.html
+++ b/docs/guides/troubleshooting.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/migration/jest-matchers.html b/docs/migration/jest-matchers.html
index b1bb5356..7555ba92 100644
--- a/docs/migration/jest-matchers.html
+++ b/docs/migration/jest-matchers.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/migration/previous/v11.html b/docs/migration/previous/v11.html
index e4a3db0c..7c6a58b4 100644
--- a/docs/migration/previous/v11.html
+++ b/docs/migration/previous/v11.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -34,7 +34,7 @@
 function findAllByText(
   text: TextMatch,
   options?: TextMatchOptions,
-  waitForOptions?: WaitForOptions
+  waitForOptions?: WaitForOptions,
 );
      
 
      In order to facilitate transition, in version 9 and 10, we provided a temporary possibility to pass WaitForOptions like timeout, interval, etc inside options argument. From this release we require passing these as the proper third parameter.
      
 
      This change is easy to implement:
      
diff --git a/docs/migration/previous/v11.md b/docs/migration/previous/v11.md
index f9a90904..5477cd6c 100644
--- a/docs/migration/previous/v11.md
+++ b/docs/migration/previous/v11.md
@@ -24,7 +24,7 @@ function findByText(text: TextMatch, options?: TextMatchOptions, waitForOptions?
 function findAllByText(
   text: TextMatch,
   options?: TextMatchOptions,
-  waitForOptions?: WaitForOptions
+  waitForOptions?: WaitForOptions,
 );
 ```
 
diff --git a/docs/migration/previous/v12.html b/docs/migration/previous/v12.html
index 4faa70db..57ef77ee 100644
--- a/docs/migration/previous/v12.html
+++ b/docs/migration/previous/v12.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/migration/previous/v2.html b/docs/migration/previous/v2.html
index 59341f5c..6b46e042 100644
--- a/docs/migration/previous/v2.html
+++ b/docs/migration/previous/v2.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/migration/previous/v7.html b/docs/migration/previous/v7.html
index 5f0dfc9a..699947ed 100644
--- a/docs/migration/previous/v7.html
+++ b/docs/migration/previous/v7.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
diff --git a/docs/migration/previous/v9.html b/docs/migration/previous/v9.html
index fbcd7879..76945080 100644
--- a/docs/migration/previous/v9.html
+++ b/docs/migration/previous/v9.html
@@ -9,7 +9,7 @@
 
 
 
-
+
 
 
 
@@ -41,7 +41,7 @@ This is a breaking change.
      const { getByText } = render(
   <Text>
     Hello <Text>world</Text>
-  </Text>
+  </Text>,
 );
 getByText('Hello world'); // matches

      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.

      diff --git a/docs/migration/previous/v9.md b/docs/migration/previous/v9.md index fc933c48..affc812a 100644 --- a/docs/migration/previous/v9.md +++ b/docs/migration/previous/v9.md @@ -37,7 +37,7 @@ In v1.14 we've introduced a feature allowing to match text when it's spread acro const { getByText } = render( Hello world - + , ); getByText('Hello world'); // matches ``` diff --git a/docs/migration/v13.html b/docs/migration/v13.html index 5cfda4d6..00b454c6 100644 --- a/docs/migration/v13.html +++ b/docs/migration/v13.html @@ -9,7 +9,7 @@ - + diff --git a/docs/start/intro.html b/docs/start/intro.html index 07be95fe..ecf97377 100644 --- a/docs/start/intro.html +++ b/docs/start/intro.html @@ -9,7 +9,7 @@ - + diff --git a/docs/start/quick-start.html b/docs/start/quick-start.html index 4b40184c..b2f3a6b7 100644 --- a/docs/start/quick-start.html +++ b/docs/start/quick-start.html @@ -9,7 +9,7 @@ - + diff --git a/index.html b/index.html index 2fa3e3d0..f0b293b5 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - + diff --git a/llms-full.txt b/llms-full.txt index c5d401a9..decfa3d0 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -185,7 +185,7 @@ This API requires RNTL v13.3.0 or later. ```tsx async function renderAsync( component: React.Element, - options?: RenderAsyncOptions + options?: RenderAsyncOptions, ): Promise; ``` @@ -602,7 +602,7 @@ import { render, screen } from '@testing-library/react-native'; render( Hello - + , ); const element = screen.getByRole('button'); const element2 = screen.getByRole('button', { name: 'Hello' }); @@ -817,13 +817,15 @@ render(Hidden from accessibility); 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(); ``` @@ -1194,7 +1196,7 @@ test('fire changeText event', () => { render( // MyComponent renders TextInput which has a placeholder 'Enter details' // and with `onChangeText` bound to handleChangeText - + , ); fireEvent(screen.getByPlaceholderText('change'), 'onChangeText', 'ab'); @@ -1217,7 +1219,7 @@ const onBlurMock = jest.fn(); render( - + , ); // you can omit the `on` prefix @@ -1258,7 +1260,7 @@ render( Press me - + , ); fireEvent.press(screen.getByText('Press me'), eventData); @@ -1290,7 +1292,7 @@ const CHANGE_TEXT = 'content'; render( - + , ); fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT); @@ -1329,7 +1331,7 @@ const eventData = { render( XD - + , ); fireEvent.scroll(screen.getByText('scroll-view'), eventData); @@ -1766,7 +1768,7 @@ The `findBy*` queries are used to find elements that are not instantly available ```tsx function waitFor( expectation: () => T, - options?: { timeout: number; interval: number } + options?: { timeout: number; interval: number }, ): Promise; ``` @@ -1856,7 +1858,7 @@ If you receive warnings related to `act()` function consult our [Understanding A ```ts function waitForElementToBeRemoved( expectation: () => T, - options?: { timeout: number; interval: number } + options?: { timeout: number; interval: number }, ): Promise; ``` @@ -2039,7 +2041,7 @@ url: /react-native-testing-library/docs/api/misc/render-hook.md ```ts function renderHook( hookFn: (props?: Props) => Result, - options?: RenderHookOptions + options?: RenderHookOptions, ): RenderHookResult; ``` @@ -2171,7 +2173,7 @@ it('should use context value', () => { ```ts async function renderHookAsync( hookFn: (props?: Props) => Result, - options?: RenderHookOptions + options?: RenderHookOptions, ): Promise>; ``` @@ -2389,7 +2391,7 @@ test('finds input by label', () => { render( - + , ); // ✅ Good - uses accessible label @@ -2420,7 +2422,7 @@ test('uses role queries', () => { Submit - + , ); // ✅ Good - uses role query @@ -2459,7 +2461,7 @@ test('button is disabled', () => { render( Submit - + , ); const button = screen.getByRole('button', { name: 'Submit' }); @@ -2494,7 +2496,7 @@ test('checks non-existence', () => { render( Hello - + , ); // ✅ Good - uses queryBy for non-existence check @@ -2598,7 +2600,7 @@ test('finds element incorrectly', () => { const { UNSAFE_root } = render( Hello - + , ); // ❌ Bad - using UNSAFE_root directly @@ -2648,7 +2650,7 @@ test('renders component', () => { const { getByText } = render( Hello - + , ); expect(getByText('Hello')).toBeOnTheScreen(); @@ -2665,7 +2667,7 @@ test('renders component', () => { render( Hello - + , ); expect(screen.getByText('Hello')).toBeOnTheScreen(); @@ -2777,7 +2779,7 @@ test('finds text correctly', () => { render( Hello World - + , ); // ✅ Good - queries by visible text @@ -2844,7 +2846,7 @@ test('uses getBy as assertion', () => { render( Hello - + , ); // ✅ Good - getBy throws if not found, so it's an assertion @@ -4153,7 +4155,7 @@ function findByText(text: TextMatch, options?: TextMatchOptions, waitForOptions? function findAllByText( text: TextMatch, options?: TextMatchOptions, - waitForOptions?: WaitForOptions + waitForOptions?: WaitForOptions, ); ``` @@ -4226,7 +4228,7 @@ In v1.14 we've introduced a feature allowing to match text when it's spread acro const { getByText } = render( Hello world - + , ); getByText('Hello world'); // matches ``` @@ -4606,7 +4608,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(); @@ -4661,7 +4663,7 @@ function waitFor( options?: { timeout: number; interval: number; - } + }, ): Promise; ``` @@ -4685,7 +4687,7 @@ function waitForElementToBeRemoved( options?: { timeout: number; interval: number; - } + }, ): Promise {} ``` @@ -4739,12 +4741,12 @@ interface RenderWithProvidersProps { export function renderWithProviders( ui: React.ReactElement, - options?: RenderWithProvidersProps + options?: RenderWithProvidersProps, ) { return render( {ui} - + , ); } ``` @@ -5304,10 +5306,10 @@ export interface RenderWithAtomsOptions { */ export const renderWithAtoms = ( component: React.ReactElement, - options: RenderWithAtomsOptions + options: RenderWithAtomsOptions, ) => { return render( - {component} + {component}, ); }; diff --git a/static/js/async/1153.27973036d7.js b/static/js/async/1153.27973036d7.js new file mode 100644 index 00000000..094dc7ca --- /dev/null +++ b/static/js/async/1153.27973036d7.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["1153"],{3992(s,e,n){n.r(e),n.d(e,{default:()=>l});var r=n(4848),i=n(8453);function o(s){let e={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"common-mistakes-with-react-native-testing-library",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#common-mistakes-with-react-native-testing-library",children:"#"}),"Common Mistakes with React Native Testing Library"]}),"\n",(0,r.jsxs)(e.blockquote,{children:["\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"Note:"})," This guide is adapted from Kent C. Dodds' article ",(0,r.jsx)(e.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library",rel:"noopener noreferrer",target:"_blank",children:'"Common mistakes with React Testing Library"'})," for React Native Testing Library v14. The original article focuses on web React, but the principles apply to React Native as well. This adaptation includes React Native-specific examples, async API usage (v14), and ARIA-compatible accessibility attributes."]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"React Native Testing Library guiding principle is:"}),"\n",(0,r.jsxs)(e.blockquote,{children:["\n",(0,r.jsx)(e.p,{children:'"The more your tests resemble the way your software is used, the more confidence they can give you."'}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"This guide outlines some common mistakes people make when using React Native Testing Library and how to avoid them."}),"\n",(0,r.jsxs)(e.h2,{id:"using-the-wrong-query",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-the-wrong-query",children:"#"}),"Using the wrong query"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsx)(e.p,{children:"React Native Testing Library provides several query types. Here's the priority order:"}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:["\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"Queries that reflect user experience:"})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByRole"})," - most accessible"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByLabelText"})," - accessible label"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByPlaceholderText"})," - ",(0,r.jsx)(e.code,{children:"TextInput"})," placeholder text"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByText"})," - text content"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByDisplayValue"})," - ",(0,r.jsx)(e.code,{children:"TextInput"})," input value"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(e.li,{children:["\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"Semantic queries:"})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByTestId"})," - only if nothing else works"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"Here's an example of using the right query:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'finds input by label'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Username"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Enter username"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'""'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses accessible label"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Also good - uses placeholder"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" inputByPlaceholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter username'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - uses testID when accessible queries work"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const input = screen.getByTestId('username-input');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-byrole-most-of-the-time",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-byrole-most-of-the-time",children:"#"}),"Not using ",(0,r.jsx)(e.code,{children:"*ByRole"})," query most of the time"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"getByRole"})," is the most accessible query and should be your first choice. It queries elements by their semantic role:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'uses role queries'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Submit"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"searchbox"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Search"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Search..."'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses role query"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Submit'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" searchbox"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'searchbox'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Search'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(searchbox)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"Common roles in React Native include:"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"button"})," - pressable elements"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"text"})," - static text"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"header"})," / ",(0,r.jsx)(e.code,{children:"heading"})," - headers"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"searchbox"})," - search inputs"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"switch"})," - toggle switches"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"checkbox"})," - checkboxes"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"radio"})," - radio buttons"]}),"\n",(0,r.jsx)(e.li,{children:"And more..."}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["Note: React Native supports both ARIA-compatible (",(0,r.jsx)(e.code,{children:"role"}),") and legacy (",(0,r.jsx)(e.code,{children:"accessibilityRole"}),") props. Prefer ",(0,r.jsx)(e.code,{children:"role"})," for consistency with web standards."]}),"\n",(0,r.jsxs)(e.h2,{id:"using-the-wrong-assertion",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-the-wrong-assertion",children:"#"}),"Using the wrong assertion"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsx)(e.p,{children:"React Native Testing Library provides built-in Jest matchers. Make sure you're using the right ones:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button is disabled'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-disabled"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Submit"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Submit'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses RNTL matcher"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeDisabled"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - doesn't use RNTL matcher"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".props["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'aria-disabled'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"])"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"Common matchers include:"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toBeOnTheScreen()"})," - checks if element is rendered (replaces ",(0,r.jsx)(e.code,{children:"toBeInTheDocument()"}),")"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toBeDisabled()"})," - checks if element is disabled"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toHaveTextContent()"})," - checks text content"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toHaveAccessibleName()"})," - checks accessible name"]}),"\n",(0,r.jsx)(e.li,{children:"And more..."}),"\n"]}),"\n",(0,r.jsxs)(e.h2,{id:"using-query-variants-for-anything-except-checking-for-non-existence",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-query-variants-for-anything-except-checking-for-non-existence",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"query*"})," variants for anything except checking for non-existence"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"queryBy*"})," only when checking that an element doesn't exist:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'checks non-existence'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses queryBy for non-existence check"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".queryByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Goodbye'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - uses queryBy when element should exist"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const element = screen.queryByText('Hello');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(element).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses getBy when element should exist"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"waitFor"})," to wait for elements that can be queried with ",(0,r.jsx)(e.code,{children:"find*"})]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"findBy*"})," queries instead of ",(0,r.jsx)(e.code,{children:"waitFor"})," + ",(0,r.jsx)(e.code,{children:"getBy*"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waits for element'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"show"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setShow"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setTimeout"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setShow"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 100"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" []);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{show "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"&&"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Loaded};"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses findBy query"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".findByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Loaded'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - uses waitFor + getBy"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Loaded')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"performing-side-effects-in-waitfor",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#performing-side-effects-in-waitfor",children:"#"}),"Performing side-effects in ",(0,r.jsx)(e.code,{children:"waitFor"})]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Don't perform side-effects in ",(0,r.jsx)(e.code,{children:"waitFor"})," callbacks:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'avoids side effects in waitFor'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(count "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Increment"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Count: {count}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - side effect in waitFor"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(async () => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await fireEvent.press(button);"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Count: 1')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - side effect outside waitFor"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"using-container-to-query-for-elements",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-container-to-query-for-elements",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"container"})," to query for elements"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["React Native Testing Library provides a ",(0,r.jsx)(e.code,{children:"container"})," object that has a ",(0,r.jsx)(e.code,{children:"queryAll"})," method, but you should avoid using it directly:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'finds element incorrectly'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"container"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"message"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - using container.queryAll directly"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".queryAll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((node) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" node"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".testID "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'message'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"];"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - use proper queries"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const element = screen.getByTestId('message');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Instead, use the proper query methods from ",(0,r.jsx)(e.code,{children:"screen"})," or the ",(0,r.jsx)(e.code,{children:"render"})," result. The ",(0,r.jsx)(e.code,{children:"container"})," is a low-level API that you rarely need."]}),"\n",(0,r.jsxs)(e.h2,{id:"passing-an-empty-callback-to-waitfor",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#passing-an-empty-callback-to-waitfor",children:"#"}),"Passing an empty callback to ",(0,r.jsx)(e.code,{children:"waitFor"})]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Don't pass an empty callback to ",(0,r.jsx)(e.code,{children:"waitFor"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waits correctly'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"test"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - empty callback"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {});"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - meaningful assertion"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'test'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-screen",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-screen",children:"#"}),"Not using ",(0,r.jsx)(e.code,{children:"screen"})]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["You can get all the queries from the ",(0,r.jsx)(e.code,{children:"render"})," result:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders component'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["But you can also get them from the ",(0,r.jsx)(e.code,{children:"screen"})," object:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders component'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Using ",(0,r.jsx)(e.code,{children:"screen"})," has several benefits:"]}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:["You don't need to destructure ",(0,r.jsx)(e.code,{children:"getByText"})," from ",(0,r.jsx)(e.code,{children:"render"})]}),"\n",(0,r.jsx)(e.li,{children:"It's more consistent with the Testing Library ecosystem"}),"\n"]}),"\n",(0,r.jsxs)(e.h2,{id:"wrapping-things-in-act-unnecessarily",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapping-things-in-act-unnecessarily",children:"#"}),"Wrapping things in ",(0,r.jsx)(e.code,{children:"act"})," unnecessarily"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["React Native Testing Library's ",(0,r.jsx)(e.code,{children:"render"}),", ",(0,r.jsx)(e.code,{children:"renderHook"}),", ",(0,r.jsx)(e.code,{children:"userEvent"}),", and ",(0,r.jsx)(e.code,{children:"fireEvent"})," are already wrapped in ",(0,r.jsx)(e.code,{children:"act"}),", so you don't need to wrap them yourself:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'updates on press'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(count "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Count: {count}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - fireEvent is already wrapped in act"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - unnecessary act wrapper"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await act(async () => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await fireEvent.press(button);"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-user-event-api",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-user-event-api",children:"#"}),"Not using User Event API"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"userEvent"})," provides a more realistic way to simulate user interactions:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" userEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'uses userEvent'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Name"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{value} "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"onChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{setValue} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Clear"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Name'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Clear'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses userEvent for realistic interactions"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(input"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'John'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(input)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'John'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(input)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"userEvent"})," methods are async and must be awaited. Available methods include:"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"press()"})," - simulates a press"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"longPress()"})," - simulates long press"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"type()"})," - simulates typing"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"clear()"})," - clears text input"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"paste()"})," - simulates pasting"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"scrollTo()"})," - simulates scrolling"]}),"\n"]}),"\n",(0,r.jsxs)(e.h2,{id:"not-querying-by-text",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-querying-by-text",children:"#"}),"Not querying by text"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["In React Native, text is rendered in ",(0,r.jsx)(e.code,{children:""})," components. You should query by the text content that users see:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'finds text correctly'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - queries by visible text"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - queries by testID when text is available"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByTestId('greeting')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-testing-library-eslint-plugins",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-testing-library-eslint-plugins",children:"#"}),"Not using Testing Library ESLint plugins"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["There's an ESLint plugin for Testing Library: ",(0,r.jsx)(e.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(e.code,{children:"eslint-plugin-testing-library"})}),". This plugin can help you avoid common mistakes and will automatically fix your code in many cases."]}),"\n",(0,r.jsx)(e.p,{children:"You can install it with:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"bash",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" add"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" --dev"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" eslint-plugin-testing-library"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["And configure it in your ",(0,r.jsx)(e.code,{children:"eslint.config.js"})," (flat config):"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" testingLibrary "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'eslint-plugin-testing-library'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"testingLibrary"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".configs["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'flat/react'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]];"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Note: Unlike React Testing Library, React Native Testing Library has built-in Jest matchers, so you don't need ",(0,r.jsx)(e.code,{children:"eslint-plugin-jest-dom"}),"."]}),"\n",(0,r.jsxs)(e.h2,{id:"using-cleanup",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-cleanup",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"cleanup"})]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["React Native Testing Library automatically cleans up after each test. You don't need to call ",(0,r.jsx)(e.code,{children:"cleanup()"})," manually unless you're using the ",(0,r.jsx)(e.code,{children:"pure"})," export (which doesn't include automatic cleanup)."]}),"\n",(0,r.jsx)(e.p,{children:"If you want to disable automatic cleanup for a specific test, you can use:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native/pure'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'does not cleanup'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // This test won't cleanup automatically"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ... your test"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"But in most cases, you don't need to worry about cleanup at all - it's handled automatically."}),"\n",(0,r.jsxs)(e.h2,{id:"using-get-variants-as-assertions",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-get-variants-as-assertions",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"get*"})," variants as assertions"]}),"\n",(0,r.jsx)("span",{style:{color:"#3c763d",fontWeight:"bold"},children:"Importance: low"}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"getBy*"})," queries throw errors when elements aren't found, so they work as assertions. However, for better error messages, you might want to combine them with explicit matchers:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'uses getBy as assertion'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - getBy throws if not found, so it's an assertion"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Also good - more explicit"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - redundant assertion"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const element = screen.getByText('Hello');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(element).not.toBeNull(); // getBy already throws if null"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"having-multiple-assertions-in-a-single-waitfor-callback",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#having-multiple-assertions-in-a-single-waitfor-callback",children:"#"}),"Having multiple assertions in a single ",(0,r.jsx)(e.code,{children:"waitFor"})," callback"]}),"\n",(0,r.jsx)("span",{style:{color:"#3c763d",fontWeight:"bold"},children:"Importance: low"}),"\n",(0,r.jsxs)(e.p,{children:["Keep ",(0,r.jsx)(e.code,{children:"waitFor"})," callbacks focused on a single assertion:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waits with single assertion'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setTimeout"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 100"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" []);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Count: {count}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - single assertion per waitFor"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // If you need multiple assertions, do them after waitFor"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveTextContent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - multiple assertions in waitFor"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Count: 1')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Count: 1')).toHaveTextContent('Count: 1');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"using-wrapper-as-the-variable-name",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-wrapper-as-the-variable-name",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"wrapper"})," as the variable name"]}),"\n",(0,r.jsx)("span",{style:{color:"#3c763d",fontWeight:"bold"},children:"Importance: low"}),"\n",(0,r.jsxs)(e.p,{children:['This is not really a "mistake" per se, but it\'s a common pattern that can be improved. When you use the ',(0,r.jsx)(e.code,{children:"wrapper"})," option in ",(0,r.jsx)(e.code,{children:"render"}),", you might be tempted to name your wrapper component ",(0,r.jsx)(e.code,{children:"Wrapper"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders with wrapper'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ children }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { children"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"ReactNode"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"wrapper"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{children}"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"content"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Content"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'content'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["This works fine, but it's more conventional to name it something more descriptive like ",(0,r.jsx)(e.code,{children:"ThemeProvider"})," or ",(0,r.jsx)(e.code,{children:"AllTheProviders"})," (if you're wrapping with multiple providers). This makes it clearer what the wrapper is doing."]}),"\n",(0,r.jsxs)(e.h2,{id:"summary",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,r.jsx)(e.p,{children:"The key principles to remember:"}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Use the right query"})," - Prefer ",(0,r.jsx)(e.code,{children:"getByRole"})," as your first choice, use ",(0,r.jsx)(e.code,{children:"findBy*"})," for async elements, and ",(0,r.jsx)(e.code,{children:"queryBy*"})," only for checking non-existence"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Use proper assertions"})," - Use RNTL's built-in matchers (",(0,r.jsx)(e.code,{children:"toBeOnTheScreen()"}),", ",(0,r.jsx)(e.code,{children:"toBeDisabled()"}),", etc.) instead of asserting on props directly"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Handle async operations correctly"})," - Always ",(0,r.jsx)(e.code,{children:"await"})," ",(0,r.jsx)(e.code,{children:"render()"}),", ",(0,r.jsx)(e.code,{children:"renderHook"}),", ",(0,r.jsx)(e.code,{children:"fireEvent"}),",and ",(0,r.jsx)(e.code,{children:"userEvent"})," methods"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsxs)(e.strong,{children:["Use ",(0,r.jsx)(e.code,{children:"waitFor"})," correctly"]})," - Avoid side-effects in callbacks, use ",(0,r.jsx)(e.code,{children:"findBy*"})," instead when possible, and keep callbacks focused"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Follow accessibility best practices"})," - Prefer ARIA attributes (",(0,r.jsx)(e.code,{children:"role"}),", ",(0,r.jsx)(e.code,{children:"aria-label"}),") over ",(0,r.jsx)(e.code,{children:"accessibility*"})," props"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Organize code well"})," - Use ",(0,r.jsx)(e.code,{children:"screen"})," over destructuring, prefer ",(0,r.jsx)(e.code,{children:"userEvent"})," over ",(0,r.jsx)(e.code,{children:"fireEvent"}),", and don't use ",(0,r.jsx)(e.code,{children:"cleanup()"})]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"By following these principles, your tests will be more maintainable, accessible, and reliable."})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,i.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(o,{...s})}):o(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fguides%2Fcommon-mistakes.mdx"]={toc:[{id:"using-the-wrong-query",text:"Using the wrong query",depth:2},{id:"not-using-byrole-most-of-the-time",text:"Not using `*ByRole` query most of the time",depth:2},{id:"using-the-wrong-assertion",text:"Using the wrong assertion",depth:2},{id:"using-query-variants-for-anything-except-checking-for-non-existence",text:"Using `query*` variants for anything except checking for non-existence",depth:2},{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",text:"Using `waitFor` to wait for elements that can be queried with `find*`",depth:2},{id:"performing-side-effects-in-waitfor",text:"Performing side-effects in `waitFor`",depth:2},{id:"using-container-to-query-for-elements",text:"Using `container` to query for elements",depth:2},{id:"passing-an-empty-callback-to-waitfor",text:"Passing an empty callback to `waitFor`",depth:2},{id:"not-using-screen",text:"Not using `screen`",depth:2},{id:"wrapping-things-in-act-unnecessarily",text:"Wrapping things in `act` unnecessarily",depth:2},{id:"not-using-user-event-api",text:"Not using User Event API",depth:2},{id:"not-querying-by-text",text:"Not querying by text",depth:2},{id:"not-using-testing-library-eslint-plugins",text:"Not using Testing Library ESLint plugins",depth:2},{id:"using-cleanup",text:"Using `cleanup`",depth:2},{id:"using-get-variants-as-assertions",text:"Using `get*` variants as assertions",depth:2},{id:"having-multiple-assertions-in-a-single-waitfor-callback",text:"Having multiple assertions in a single `waitFor` callback",depth:2},{id:"using-wrapper-as-the-variable-name",text:"Using `wrapper` as the variable name",depth:2},{id:"summary",text:"Summary",depth:2}],title:"Common Mistakes with React Native Testing Library",headingTitle:"Common Mistakes with React Native Testing Library",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/1153.f78355f326.js b/static/js/async/1153.f78355f326.js deleted file mode 100644 index c1efa03d..00000000 --- a/static/js/async/1153.f78355f326.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["1153"],{3992(s,e,n){n.r(e),n.d(e,{default:()=>l});var r=n(4848),i=n(8453);function o(s){let e={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"common-mistakes-with-react-native-testing-library",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#common-mistakes-with-react-native-testing-library",children:"#"}),"Common Mistakes with React Native Testing Library"]}),"\n",(0,r.jsxs)(e.blockquote,{children:["\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"Note:"})," This guide is adapted from Kent C. Dodds' article ",(0,r.jsx)(e.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library",rel:"noopener noreferrer",target:"_blank",children:'"Common mistakes with React Testing Library"'})," for React Native Testing Library v14. The original article focuses on web React, but the principles apply to React Native as well. This adaptation includes React Native-specific examples, async API usage (v14), and ARIA-compatible accessibility attributes."]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"React Native Testing Library guiding principle is:"}),"\n",(0,r.jsxs)(e.blockquote,{children:["\n",(0,r.jsx)(e.p,{children:'"The more your tests resemble the way your software is used, the more confidence they can give you."'}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"This guide outlines some common mistakes people make when using React Native Testing Library and how to avoid them."}),"\n",(0,r.jsxs)(e.h2,{id:"using-the-wrong-query",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-the-wrong-query",children:"#"}),"Using the wrong query"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsx)(e.p,{children:"React Native Testing Library provides several query types. Here's the priority order:"}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:["\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"Queries that reflect user experience:"})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByRole"})," - most accessible"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByLabelText"})," - accessible label"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByPlaceholderText"})," - ",(0,r.jsx)(e.code,{children:"TextInput"})," placeholder text"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByText"})," - text content"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByDisplayValue"})," - ",(0,r.jsx)(e.code,{children:"TextInput"})," input value"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(e.li,{children:["\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"Semantic queries:"})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByTestId"})," - only if nothing else works"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"Here's an example of using the right query:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'finds input by label'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Username"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Enter username"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'""'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses accessible label"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Also good - uses placeholder"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" inputByPlaceholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter username'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - uses testID when accessible queries work"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const input = screen.getByTestId('username-input');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-byrole-most-of-the-time",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-byrole-most-of-the-time",children:"#"}),"Not using ",(0,r.jsx)(e.code,{children:"*ByRole"})," query most of the time"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"getByRole"})," is the most accessible query and should be your first choice. It queries elements by their semantic role:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'uses role queries'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Submit"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"searchbox"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Search"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Search..."'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses role query"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Submit'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" searchbox"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'searchbox'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Search'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(searchbox)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"Common roles in React Native include:"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"button"})," - pressable elements"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"text"})," - static text"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"header"})," / ",(0,r.jsx)(e.code,{children:"heading"})," - headers"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"searchbox"})," - search inputs"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"switch"})," - toggle switches"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"checkbox"})," - checkboxes"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"radio"})," - radio buttons"]}),"\n",(0,r.jsx)(e.li,{children:"And more..."}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["Note: React Native supports both ARIA-compatible (",(0,r.jsx)(e.code,{children:"role"}),") and legacy (",(0,r.jsx)(e.code,{children:"accessibilityRole"}),") props. Prefer ",(0,r.jsx)(e.code,{children:"role"})," for consistency with web standards."]}),"\n",(0,r.jsxs)(e.h2,{id:"using-the-wrong-assertion",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-the-wrong-assertion",children:"#"}),"Using the wrong assertion"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsx)(e.p,{children:"React Native Testing Library provides built-in Jest matchers. Make sure you're using the right ones:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button is disabled'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-disabled"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Submit"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Submit'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses RNTL matcher"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeDisabled"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - doesn't use RNTL matcher"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".props["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'aria-disabled'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"])"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"Common matchers include:"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toBeOnTheScreen()"})," - checks if element is rendered (replaces ",(0,r.jsx)(e.code,{children:"toBeInTheDocument()"}),")"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toBeDisabled()"})," - checks if element is disabled"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toHaveTextContent()"})," - checks text content"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toHaveAccessibleName()"})," - checks accessible name"]}),"\n",(0,r.jsx)(e.li,{children:"And more..."}),"\n"]}),"\n",(0,r.jsxs)(e.h2,{id:"using-query-variants-for-anything-except-checking-for-non-existence",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-query-variants-for-anything-except-checking-for-non-existence",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"query*"})," variants for anything except checking for non-existence"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"queryBy*"})," only when checking that an element doesn't exist:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'checks non-existence'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses queryBy for non-existence check"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".queryByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Goodbye'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - uses queryBy when element should exist"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const element = screen.queryByText('Hello');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(element).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses getBy when element should exist"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"waitFor"})," to wait for elements that can be queried with ",(0,r.jsx)(e.code,{children:"find*"})]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"findBy*"})," queries instead of ",(0,r.jsx)(e.code,{children:"waitFor"})," + ",(0,r.jsx)(e.code,{children:"getBy*"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waits for element'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"show"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setShow"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setTimeout"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setShow"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 100"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" []);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{show "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"&&"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Loaded};"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses findBy query"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".findByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Loaded'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - uses waitFor + getBy"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Loaded')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"performing-side-effects-in-waitfor",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#performing-side-effects-in-waitfor",children:"#"}),"Performing side-effects in ",(0,r.jsx)(e.code,{children:"waitFor"})]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Don't perform side-effects in ",(0,r.jsx)(e.code,{children:"waitFor"})," callbacks:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'avoids side effects in waitFor'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(count "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Increment"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Count: {count}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - side effect in waitFor"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(async () => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await fireEvent.press(button);"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Count: 1')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - side effect outside waitFor"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"using-container-to-query-for-elements",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-container-to-query-for-elements",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"container"})," to query for elements"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["React Native Testing Library provides a ",(0,r.jsx)(e.code,{children:"container"})," object that has a ",(0,r.jsx)(e.code,{children:"queryAll"})," method, but you should avoid using it directly:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'finds element incorrectly'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"container"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"message"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - using container.queryAll directly"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".queryAll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((node) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" node"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".testID "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'message'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"];"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - use proper queries"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const element = screen.getByTestId('message');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Instead, use the proper query methods from ",(0,r.jsx)(e.code,{children:"screen"})," or the ",(0,r.jsx)(e.code,{children:"render"})," result. The ",(0,r.jsx)(e.code,{children:"container"})," is a low-level API that you rarely need."]}),"\n",(0,r.jsxs)(e.h2,{id:"passing-an-empty-callback-to-waitfor",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#passing-an-empty-callback-to-waitfor",children:"#"}),"Passing an empty callback to ",(0,r.jsx)(e.code,{children:"waitFor"})]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Don't pass an empty callback to ",(0,r.jsx)(e.code,{children:"waitFor"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waits correctly'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"test"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - empty callback"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {});"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - meaningful assertion"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'test'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-screen",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-screen",children:"#"}),"Not using ",(0,r.jsx)(e.code,{children:"screen"})]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["You can get all the queries from the ",(0,r.jsx)(e.code,{children:"render"})," result:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders component'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["But you can also get them from the ",(0,r.jsx)(e.code,{children:"screen"})," object:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders component'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Using ",(0,r.jsx)(e.code,{children:"screen"})," has several benefits:"]}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:["You don't need to destructure ",(0,r.jsx)(e.code,{children:"getByText"})," from ",(0,r.jsx)(e.code,{children:"render"})]}),"\n",(0,r.jsx)(e.li,{children:"It's more consistent with the Testing Library ecosystem"}),"\n"]}),"\n",(0,r.jsxs)(e.h2,{id:"wrapping-things-in-act-unnecessarily",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapping-things-in-act-unnecessarily",children:"#"}),"Wrapping things in ",(0,r.jsx)(e.code,{children:"act"})," unnecessarily"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["React Native Testing Library's ",(0,r.jsx)(e.code,{children:"render"}),", ",(0,r.jsx)(e.code,{children:"renderHook"}),", ",(0,r.jsx)(e.code,{children:"userEvent"}),", and ",(0,r.jsx)(e.code,{children:"fireEvent"})," are already wrapped in ",(0,r.jsx)(e.code,{children:"act"}),", so you don't need to wrap them yourself:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'updates on press'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(count "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Count: {count}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - fireEvent is already wrapped in act"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - unnecessary act wrapper"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await act(async () => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await fireEvent.press(button);"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-user-event-api",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-user-event-api",children:"#"}),"Not using User Event API"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"userEvent"})," provides a more realistic way to simulate user interactions:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" userEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'uses userEvent'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Name"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{value} "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"onChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{setValue} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Clear"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Name'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Clear'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses userEvent for realistic interactions"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(input"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'John'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(input)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'John'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(input)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"userEvent"})," methods are async and must be awaited. Available methods include:"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"press()"})," - simulates a press"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"longPress()"})," - simulates long press"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"type()"})," - simulates typing"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"clear()"})," - clears text input"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"paste()"})," - simulates pasting"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"scrollTo()"})," - simulates scrolling"]}),"\n"]}),"\n",(0,r.jsxs)(e.h2,{id:"not-querying-by-text",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-querying-by-text",children:"#"}),"Not querying by text"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["In React Native, text is rendered in ",(0,r.jsx)(e.code,{children:""})," components. You should query by the text content that users see:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'finds text correctly'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - queries by visible text"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - queries by testID when text is available"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByTestId('greeting')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-testing-library-eslint-plugins",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-testing-library-eslint-plugins",children:"#"}),"Not using Testing Library ESLint plugins"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["There's an ESLint plugin for Testing Library: ",(0,r.jsx)(e.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(e.code,{children:"eslint-plugin-testing-library"})}),". This plugin can help you avoid common mistakes and will automatically fix your code in many cases."]}),"\n",(0,r.jsx)(e.p,{children:"You can install it with:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"bash",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" add"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" --dev"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" eslint-plugin-testing-library"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["And configure it in your ",(0,r.jsx)(e.code,{children:"eslint.config.js"})," (flat config):"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" testingLibrary "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'eslint-plugin-testing-library'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"testingLibrary"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".configs["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'flat/react'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]];"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Note: Unlike React Testing Library, React Native Testing Library has built-in Jest matchers, so you don't need ",(0,r.jsx)(e.code,{children:"eslint-plugin-jest-dom"}),"."]}),"\n",(0,r.jsxs)(e.h2,{id:"using-cleanup",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-cleanup",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"cleanup"})]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["React Native Testing Library automatically cleans up after each test. You don't need to call ",(0,r.jsx)(e.code,{children:"cleanup()"})," manually unless you're using the ",(0,r.jsx)(e.code,{children:"pure"})," export (which doesn't include automatic cleanup)."]}),"\n",(0,r.jsx)(e.p,{children:"If you want to disable automatic cleanup for a specific test, you can use:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native/pure'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'does not cleanup'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // This test won't cleanup automatically"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ... your test"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"But in most cases, you don't need to worry about cleanup at all - it's handled automatically."}),"\n",(0,r.jsxs)(e.h2,{id:"using-get-variants-as-assertions",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-get-variants-as-assertions",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"get*"})," variants as assertions"]}),"\n",(0,r.jsx)("span",{style:{color:"#3c763d",fontWeight:"bold"},children:"Importance: low"}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"getBy*"})," queries throw errors when elements aren't found, so they work as assertions. However, for better error messages, you might want to combine them with explicit matchers:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'uses getBy as assertion'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - getBy throws if not found, so it's an assertion"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Also good - more explicit"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - redundant assertion"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const element = screen.getByText('Hello');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(element).not.toBeNull(); // getBy already throws if null"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"having-multiple-assertions-in-a-single-waitfor-callback",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#having-multiple-assertions-in-a-single-waitfor-callback",children:"#"}),"Having multiple assertions in a single ",(0,r.jsx)(e.code,{children:"waitFor"})," callback"]}),"\n",(0,r.jsx)("span",{style:{color:"#3c763d",fontWeight:"bold"},children:"Importance: low"}),"\n",(0,r.jsxs)(e.p,{children:["Keep ",(0,r.jsx)(e.code,{children:"waitFor"})," callbacks focused on a single assertion:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waits with single assertion'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setTimeout"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 100"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" []);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Count: {count}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - single assertion per waitFor"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // If you need multiple assertions, do them after waitFor"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveTextContent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - multiple assertions in waitFor"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Count: 1')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Count: 1')).toHaveTextContent('Count: 1');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"using-wrapper-as-the-variable-name",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-wrapper-as-the-variable-name",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"wrapper"})," as the variable name"]}),"\n",(0,r.jsx)("span",{style:{color:"#3c763d",fontWeight:"bold"},children:"Importance: low"}),"\n",(0,r.jsxs)(e.p,{children:['This is not really a "mistake" per se, but it\'s a common pattern that can be improved. When you use the ',(0,r.jsx)(e.code,{children:"wrapper"})," option in ",(0,r.jsx)(e.code,{children:"render"}),", you might be tempted to name your wrapper component ",(0,r.jsx)(e.code,{children:"Wrapper"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders with wrapper'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ children }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { children"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"ReactNode"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"wrapper"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{children}"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"content"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Content"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'content'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["This works fine, but it's more conventional to name it something more descriptive like ",(0,r.jsx)(e.code,{children:"ThemeProvider"})," or ",(0,r.jsx)(e.code,{children:"AllTheProviders"})," (if you're wrapping with multiple providers). This makes it clearer what the wrapper is doing."]}),"\n",(0,r.jsxs)(e.h2,{id:"summary",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,r.jsx)(e.p,{children:"The key principles to remember:"}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Use the right query"})," - Prefer ",(0,r.jsx)(e.code,{children:"getByRole"})," as your first choice, use ",(0,r.jsx)(e.code,{children:"findBy*"})," for async elements, and ",(0,r.jsx)(e.code,{children:"queryBy*"})," only for checking non-existence"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Use proper assertions"})," - Use RNTL's built-in matchers (",(0,r.jsx)(e.code,{children:"toBeOnTheScreen()"}),", ",(0,r.jsx)(e.code,{children:"toBeDisabled()"}),", etc.) instead of asserting on props directly"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Handle async operations correctly"})," - Always ",(0,r.jsx)(e.code,{children:"await"})," ",(0,r.jsx)(e.code,{children:"render()"}),", ",(0,r.jsx)(e.code,{children:"renderHook"}),", ",(0,r.jsx)(e.code,{children:"fireEvent"}),",and ",(0,r.jsx)(e.code,{children:"userEvent"})," methods"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsxs)(e.strong,{children:["Use ",(0,r.jsx)(e.code,{children:"waitFor"})," correctly"]})," - Avoid side-effects in callbacks, use ",(0,r.jsx)(e.code,{children:"findBy*"})," instead when possible, and keep callbacks focused"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Follow accessibility best practices"})," - Prefer ARIA attributes (",(0,r.jsx)(e.code,{children:"role"}),", ",(0,r.jsx)(e.code,{children:"aria-label"}),") over ",(0,r.jsx)(e.code,{children:"accessibility*"})," props"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Organize code well"})," - Use ",(0,r.jsx)(e.code,{children:"screen"})," over destructuring, prefer ",(0,r.jsx)(e.code,{children:"userEvent"})," over ",(0,r.jsx)(e.code,{children:"fireEvent"}),", and don't use ",(0,r.jsx)(e.code,{children:"cleanup()"})]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"By following these principles, your tests will be more maintainable, accessible, and reliable."})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,i.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(o,{...s})}):o(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fguides%2Fcommon-mistakes.mdx"]={toc:[{id:"using-the-wrong-query",text:"Using the wrong query",depth:2},{id:"not-using-byrole-most-of-the-time",text:"Not using `*ByRole` query most of the time",depth:2},{id:"using-the-wrong-assertion",text:"Using the wrong assertion",depth:2},{id:"using-query-variants-for-anything-except-checking-for-non-existence",text:"Using `query*` variants for anything except checking for non-existence",depth:2},{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",text:"Using `waitFor` to wait for elements that can be queried with `find*`",depth:2},{id:"performing-side-effects-in-waitfor",text:"Performing side-effects in `waitFor`",depth:2},{id:"using-container-to-query-for-elements",text:"Using `container` to query for elements",depth:2},{id:"passing-an-empty-callback-to-waitfor",text:"Passing an empty callback to `waitFor`",depth:2},{id:"not-using-screen",text:"Not using `screen`",depth:2},{id:"wrapping-things-in-act-unnecessarily",text:"Wrapping things in `act` unnecessarily",depth:2},{id:"not-using-user-event-api",text:"Not using User Event API",depth:2},{id:"not-querying-by-text",text:"Not querying by text",depth:2},{id:"not-using-testing-library-eslint-plugins",text:"Not using Testing Library ESLint plugins",depth:2},{id:"using-cleanup",text:"Using `cleanup`",depth:2},{id:"using-get-variants-as-assertions",text:"Using `get*` variants as assertions",depth:2},{id:"having-multiple-assertions-in-a-single-waitfor-callback",text:"Having multiple assertions in a single `waitFor` callback",depth:2},{id:"using-wrapper-as-the-variable-name",text:"Using `wrapper` as the variable name",depth:2},{id:"summary",text:"Summary",depth:2}],title:"Common Mistakes with React Native Testing Library",headingTitle:"Common Mistakes with React Native Testing Library",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/1236.89751a9de3.js b/static/js/async/1236.89751a9de3.js deleted file mode 100644 index 0e05b8d7..00000000 --- a/static/js/async/1236.89751a9de3.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["1236"],{3519(s,e,n){n.r(e),n.d(e,{default:()=>l});var r=n(4848),o=n(8453);function i(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"renderhook-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook-function",children:"#"}),(0,r.jsx)(e.code,{children:"renderHook"})," function"]}),"\n",(0,r.jsxs)(e.h2,{id:"renderhook",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook",children:"#"}),(0,r.jsx)(e.code,{children:"renderHook"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" hookFn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookOptions"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"RenderHookResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">>;"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Renders a test component that calls the provided ",(0,r.jsx)(e.code,{children:"callback"})," (and any hooks it uses) on each render. Returns a Promise that resolves to a ",(0,r.jsx)(e.a,{href:"#renderhookresult",children:(0,r.jsx)(e.code,{children:"RenderHookResult"})})," object."]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"This is the recommended default API"})," for testing hooks. It uses async ",(0,r.jsx)(e.code,{children:"act"})," internally to ensure all pending React updates are executed during rendering. This makes it compatible with async React features like ",(0,r.jsx)(e.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(e.code,{children:"use()"})," hook."]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Returns a Promise"}),": Should be awaited"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Async methods"}),": Both ",(0,r.jsx)(e.code,{children:"rerender"})," and ",(0,r.jsx)(e.code,{children:"unmount"})," return Promises and should be awaited"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Suspense support"}),": Compatible with ",(0,r.jsx)(e.code,{children:"Suspense"})," boundaries and ",(0,r.jsx)(e.code,{children:"use()"})," hook"]}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" act } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { useCount } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../useCount'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should increment count'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Note that you should wrap the calls to functions your hook returns with `act` if they trigger an update of your hook's state to ensure pending useEffects are run before your next assertion."})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// useCount.js"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { useState } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((previousCount) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" previousCount "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" increment };"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"renderHook"})," function accepts the following arguments:"]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"Callback"}),": A function called on each render of the test component. This function should call one or more hooks for testing."]}),"\n",(0,r.jsxs)(e.p,{children:["The callback receives ",(0,r.jsx)(e.code,{children:"props"})," from the ",(0,r.jsx)(e.code,{children:"initialProps"})," option, or from a subsequent ",(0,r.jsx)(e.code,{children:"rerender"})," call if provided."]}),"\n",(0,r.jsxs)(e.h3,{id:"options",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),(0,r.jsx)(e.code,{children:"options"})]}),"\n",(0,r.jsxs)(e.p,{children:["A ",(0,r.jsx)(e.code,{children:"RenderHookOptions"})," object with the following properties:"]}),"\n",(0,r.jsxs)(e.h4,{id:"initial-props",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#initial-props",children:"#"}),(0,r.jsx)(e.code,{children:"initialProps"})]}),"\n",(0,r.jsxs)(e.p,{children:["The initial values to pass as ",(0,r.jsx)(e.code,{children:"props"})," to the ",(0,r.jsx)(e.code,{children:"callback"})," function of ",(0,r.jsx)(e.code,{children:"renderHook"}),". The ",(0,r.jsx)(e.code,{children:"Props"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h4,{id:"wrapper",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapper",children:"#"}),(0,r.jsx)(e.code,{children:"wrapper"})]}),"\n",(0,r.jsxs)(e.p,{children:["A React component that wraps the test component. Use this to add context providers so hooks can access them with ",(0,r.jsx)(e.code,{children:"useContext"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"result",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result",children:"#"}),"Result"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"> {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"renderHook"})," function returns a Promise that resolves to an object with the following properties:"]}),"\n",(0,r.jsxs)(e.h4,{id:"result-1",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result-1",children:"#"}),(0,r.jsx)(e.code,{children:"result"})]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"current"})," value contains whatever the ",(0,r.jsx)(e.code,{children:"callback"})," returned from ",(0,r.jsx)(e.code,{children:"renderHook"}),". The ",(0,r.jsx)(e.code,{children:"Result"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"Note:"})," When using React Suspense, ",(0,r.jsx)(e.code,{children:"result.current"})," will be ",(0,r.jsx)(e.code,{children:"null"})," while the hook is suspended."]}),"\n",(0,r.jsxs)(e.h4,{id:"rerender",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rerender",children:"#"}),(0,r.jsx)(e.code,{children:"rerender"})]}),"\n",(0,r.jsxs)(e.p,{children:["An async function that rerenders the test component and recalculates hooks. If ",(0,r.jsx)(e.code,{children:"newProps"})," are passed, they replace the ",(0,r.jsx)(e.code,{children:"callback"})," function's ",(0,r.jsx)(e.code,{children:"initialProps"})," for subsequent rerenders. The ",(0,r.jsx)(e.code,{children:"Props"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"Note"}),": This method returns a Promise and should be awaited."]}),"\n",(0,r.jsxs)(e.h4,{id:"unmount",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unmount",children:"#"}),(0,r.jsx)(e.code,{children:"unmount"})]}),"\n",(0,r.jsxs)(e.p,{children:["An async function to unmount the test component. This is commonly used to trigger cleanup effects for ",(0,r.jsx)(e.code,{children:"useEffect"})," hooks."]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"Note"}),": This method returns a Promise and should be awaited."]}),"\n",(0,r.jsxs)(e.h3,{id:"examples",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#examples",children:"#"}),"Examples"]}),"\n",(0,r.jsxs)(e.p,{children:["Additional examples of using ",(0,r.jsx)(e.code,{children:"renderHook"}),":"]}),"\n",(0,r.jsxs)(e.h4,{id:"with-initialprops",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-initialprops",children:"#"}),"With ",(0,r.jsx)(e.code,{children:"initialProps"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" useEffect } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" act } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (initialCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((previousCount) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" previousCount "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" [initialCount]);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" increment };"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should increment count'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((initialCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" initialProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"with-wrapper",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-wrapper",children:"#"}),"With ",(0,r.jsx)(e.code,{children:"wrapper"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should use context value'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ children }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { children"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactNode"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }) {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Context.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"provided"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{children};"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Wrapper });"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"with-react-suspense",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-react-suspense",children:"#"}),"With React Suspense"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" act } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useSuspendingHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">) {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".use"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(promise);"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'handles hook with suspense'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" let"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" resolvePromise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" new"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">((resolve) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" resolvePromise "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" resolve;"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(useSuspendingHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" initialProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ children }) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"React.Suspense"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fallback"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Loading...}>{children}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" )"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Initially suspended, result should not be available"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".current)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeNull"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" resolvePromise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'resolved'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".current)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'resolved'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(i,{...s})}):i(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fapi%2Fmisc%2Frender-hook.mdx"]={toc:[{id:"renderhook",text:"`renderHook`",depth:2},{id:"options",text:"`options`",depth:3},{id:"initial-props",text:"`initialProps`",depth:4},{id:"wrapper",text:"`wrapper`",depth:4},{id:"result",text:"Result",depth:3},{id:"result-1",text:"`result`",depth:4},{id:"rerender",text:"`rerender`",depth:4},{id:"unmount",text:"`unmount`",depth:4},{id:"examples",text:"Examples",depth:3},{id:"with-initialprops",text:"With `initialProps`",depth:4},{id:"with-wrapper",text:"With `wrapper`",depth:4},{id:"with-react-suspense",text:"With React Suspense",depth:4}],title:"`renderHook` function",headingTitle:"`renderHook` function",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/1236.a2f6a778ae.js b/static/js/async/1236.a2f6a778ae.js new file mode 100644 index 00000000..6ce29bae --- /dev/null +++ b/static/js/async/1236.a2f6a778ae.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["1236"],{3519(s,e,n){n.r(e),n.d(e,{default:()=>l});var r=n(4848),o=n(8453);function i(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"renderhook-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook-function",children:"#"}),(0,r.jsx)(e.code,{children:"renderHook"})," function"]}),"\n",(0,r.jsxs)(e.h2,{id:"renderhook",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook",children:"#"}),(0,r.jsx)(e.code,{children:"renderHook"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" hookFn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookOptions"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"RenderHookResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">>;"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Renders a test component that calls the provided ",(0,r.jsx)(e.code,{children:"callback"})," (and any hooks it uses) on each render. Returns a Promise that resolves to a ",(0,r.jsx)(e.a,{href:"#renderhookresult",children:(0,r.jsx)(e.code,{children:"RenderHookResult"})})," object."]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"This is the recommended default API"})," for testing hooks. It uses async ",(0,r.jsx)(e.code,{children:"act"})," internally to ensure all pending React updates are executed during rendering. This makes it compatible with async React features like ",(0,r.jsx)(e.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(e.code,{children:"use()"})," hook."]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Returns a Promise"}),": Should be awaited"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Async methods"}),": Both ",(0,r.jsx)(e.code,{children:"rerender"})," and ",(0,r.jsx)(e.code,{children:"unmount"})," return Promises and should be awaited"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Suspense support"}),": Compatible with ",(0,r.jsx)(e.code,{children:"Suspense"})," boundaries and ",(0,r.jsx)(e.code,{children:"use()"})," hook"]}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" act } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { useCount } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../useCount'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should increment count'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Note that you should wrap the calls to functions your hook returns with `act` if they trigger an update of your hook's state to ensure pending useEffects are run before your next assertion."})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// useCount.js"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { useState } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((previousCount) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" previousCount "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" increment };"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"renderHook"})," function accepts the following arguments:"]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"Callback"}),": A function called on each render of the test component. This function should call one or more hooks for testing."]}),"\n",(0,r.jsxs)(e.p,{children:["The callback receives ",(0,r.jsx)(e.code,{children:"props"})," from the ",(0,r.jsx)(e.code,{children:"initialProps"})," option, or from a subsequent ",(0,r.jsx)(e.code,{children:"rerender"})," call if provided."]}),"\n",(0,r.jsxs)(e.h3,{id:"options",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),(0,r.jsx)(e.code,{children:"options"})]}),"\n",(0,r.jsxs)(e.p,{children:["A ",(0,r.jsx)(e.code,{children:"RenderHookOptions"})," object with the following properties:"]}),"\n",(0,r.jsxs)(e.h4,{id:"initial-props",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#initial-props",children:"#"}),(0,r.jsx)(e.code,{children:"initialProps"})]}),"\n",(0,r.jsxs)(e.p,{children:["The initial values to pass as ",(0,r.jsx)(e.code,{children:"props"})," to the ",(0,r.jsx)(e.code,{children:"callback"})," function of ",(0,r.jsx)(e.code,{children:"renderHook"}),". The ",(0,r.jsx)(e.code,{children:"Props"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h4,{id:"wrapper",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapper",children:"#"}),(0,r.jsx)(e.code,{children:"wrapper"})]}),"\n",(0,r.jsxs)(e.p,{children:["A React component that wraps the test component. Use this to add context providers so hooks can access them with ",(0,r.jsx)(e.code,{children:"useContext"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"result",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result",children:"#"}),"Result"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"> {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"renderHook"})," function returns a Promise that resolves to an object with the following properties:"]}),"\n",(0,r.jsxs)(e.h4,{id:"result-1",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result-1",children:"#"}),(0,r.jsx)(e.code,{children:"result"})]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"current"})," value contains whatever the ",(0,r.jsx)(e.code,{children:"callback"})," returned from ",(0,r.jsx)(e.code,{children:"renderHook"}),". The ",(0,r.jsx)(e.code,{children:"Result"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"Note:"})," When using React Suspense, ",(0,r.jsx)(e.code,{children:"result.current"})," will be ",(0,r.jsx)(e.code,{children:"null"})," while the hook is suspended."]}),"\n",(0,r.jsxs)(e.h4,{id:"rerender",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rerender",children:"#"}),(0,r.jsx)(e.code,{children:"rerender"})]}),"\n",(0,r.jsxs)(e.p,{children:["An async function that rerenders the test component and recalculates hooks. If ",(0,r.jsx)(e.code,{children:"newProps"})," are passed, they replace the ",(0,r.jsx)(e.code,{children:"callback"})," function's ",(0,r.jsx)(e.code,{children:"initialProps"})," for subsequent rerenders. The ",(0,r.jsx)(e.code,{children:"Props"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"Note"}),": This method returns a Promise and should be awaited."]}),"\n",(0,r.jsxs)(e.h4,{id:"unmount",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unmount",children:"#"}),(0,r.jsx)(e.code,{children:"unmount"})]}),"\n",(0,r.jsxs)(e.p,{children:["An async function to unmount the test component. This is commonly used to trigger cleanup effects for ",(0,r.jsx)(e.code,{children:"useEffect"})," hooks."]}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"Note"}),": This method returns a Promise and should be awaited."]}),"\n",(0,r.jsxs)(e.h3,{id:"examples",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#examples",children:"#"}),"Examples"]}),"\n",(0,r.jsxs)(e.p,{children:["Additional examples of using ",(0,r.jsx)(e.code,{children:"renderHook"}),":"]}),"\n",(0,r.jsxs)(e.h4,{id:"with-initialprops",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-initialprops",children:"#"}),"With ",(0,r.jsx)(e.code,{children:"initialProps"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" useEffect } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" act } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (initialCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((previousCount) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" previousCount "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" [initialCount]);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" increment };"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should increment count'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((initialCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" initialProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"with-wrapper",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-wrapper",children:"#"}),"With ",(0,r.jsx)(e.code,{children:"wrapper"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should use context value'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ children }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { children"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactNode"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }) {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Context.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"provided"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{children};"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Wrapper });"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"with-react-suspense",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-react-suspense",children:"#"}),"With React Suspense"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" act } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useSuspendingHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">) {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".use"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(promise);"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'handles hook with suspense'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" let"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" resolvePromise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" new"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">((resolve) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" resolvePromise "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" resolve;"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(useSuspendingHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" initialProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ children }) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"React.Suspense"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fallback"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Loading...}>{children}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" )"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Initially suspended, result should not be available"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".current)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeNull"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" resolvePromise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'resolved'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".current)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'resolved'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(i,{...s})}):i(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fapi%2Fmisc%2Frender-hook.mdx"]={toc:[{id:"renderhook",text:"`renderHook`",depth:2},{id:"options",text:"`options`",depth:3},{id:"initial-props",text:"`initialProps`",depth:4},{id:"wrapper",text:"`wrapper`",depth:4},{id:"result",text:"Result",depth:3},{id:"result-1",text:"`result`",depth:4},{id:"rerender",text:"`rerender`",depth:4},{id:"unmount",text:"`unmount`",depth:4},{id:"examples",text:"Examples",depth:3},{id:"with-initialprops",text:"With `initialProps`",depth:4},{id:"with-wrapper",text:"With `wrapper`",depth:4},{id:"with-react-suspense",text:"With React Suspense",depth:4}],title:"`renderHook` function",headingTitle:"`renderHook` function",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/1607.5c253cc1e6.js b/static/js/async/1607.d89d662a1e.js similarity index 58% rename from static/js/async/1607.5c253cc1e6.js rename to static/js/async/1607.d89d662a1e.js index c35d8f05..f02fdfe5 100644 --- a/static/js/async/1607.5c253cc1e6.js +++ b/static/js/async/1607.d89d662a1e.js @@ -1 +1 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["1607"],{8810(e,s,n){n.r(s),n.d(s,{default:()=>t});var r=n(4848),i=n(8453);function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"migration-to-11x",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-to-11x",children:"#"}),"Migration to 11.x"]}),"\n",(0,r.jsx)(s.p,{children:"Migration to React Native Testing Library version 11 from version 9.x or 10.x should be a relatively easy task due small amount of breaking changes."}),"\n",(0,r.jsxs)(s.h2,{id:"breaking-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#breaking-changes",children:"#"}),"Breaking changes"]}),"\n",(0,r.jsxs)(s.h3,{id:"update-to-jest-28-if-you-use-fake-timers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#update-to-jest-28-if-you-use-fake-timers",children:"#"}),"Update to Jest 28 if you use fake timers"]}),"\n",(0,r.jsxs)(s.p,{children:["If you use fake timers in any of your tests you should update your Jest dependencies to version 28. This is due to the fact that ",(0,r.jsxs)(s.a,{href:"https://jestjs.io/docs/jest-object#jestusefaketimersfaketimersconfig",rel:"noopener noreferrer",target:"_blank",children:[(0,r.jsx)(s.code,{children:"jest.useFakeTimers()"})," config structure"]})," has changed."]}),"\n",(0,r.jsxs)(s.h3,{id:"refactor-legacy-waitforoptions-position",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#refactor-legacy-waitforoptions-position",children:"#"}),"Refactor legacy ",(0,r.jsx)(s.code,{children:"waitForOptions"})," position"]}),"\n",(0,r.jsxs)(s.p,{children:["In version 9 we introducted query ",(0,r.jsx)(s.code,{children:"options"})," parameters for each query type. This affected all ",(0,r.jsx)(s.code,{children:"findBy"})," and ",(0,r.jsx)(s.code,{children:"findAllBy"})," queries because their signatures changed e.g. from:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findAllByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(s.p,{children:"to"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findAllByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["In order to facilitate transition, in version 9 and 10, we provided a temporary possibility to pass ",(0,r.jsx)(s.code,{children:"WaitForOptions"})," like ",(0,r.jsx)(s.code,{children:"timeout"}),", ",(0,r.jsx)(s.code,{children:"interval"}),", etc inside ",(0,r.jsx)(s.code,{children:"options"})," argument. From this release we require passing these as the proper third parameter."]}),"\n",(0,r.jsx)(s.p,{children:"This change is easy to implement:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Text/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,r.jsx)(s.p,{children:"should become"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Text/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,r.jsxs)(s.h3,{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",children:"#"}),"Triggering non-touch events on targets with ",(0,r.jsx)(s.code,{children:'pointerEvents="box-none"'})," prop"]}),"\n",(0,r.jsxs)(s.p,{children:["Up to version 10, RNTL disables all events for a target with ",(0,r.jsx)(s.code,{children:'pointerEvents="box-none"'}),". This behavior is counter to how React Native itself functions."]}),"\n",(0,r.jsxs)(s.p,{children:["From version 11, RNTL continues to disable ",(0,r.jsx)(s.code,{children:"press"})," event for these targets but allows triggering other events, e.g. ",(0,r.jsx)(s.code,{children:"layout"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"full-changelog",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#full-changelog",children:"#"}),"Full Changelog"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/compare/v10.1.1...v11.0.0",rel:"noopener noreferrer",target:"_blank",children:"https://github.com/callstack/react-native-testing-library/compare/v10.1.1...v11.0.0"})})]})}function t(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}t.__RSPRESS_PAGE_META={},t.__RSPRESS_PAGE_META["12.x%2Fdocs%2Fmigration%2Fprevious%2Fv11.mdx"]={toc:[{id:"breaking-changes",text:"Breaking changes",depth:2},{id:"update-to-jest-28-if-you-use-fake-timers",text:"Update to Jest 28 if you use fake timers",depth:3},{id:"refactor-legacy-waitforoptions-position",text:"Refactor legacy `waitForOptions` position",depth:3},{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",text:'Triggering non-touch events on targets with `pointerEvents="box-none"` prop',depth:3},{id:"full-changelog",text:"Full Changelog",depth:2}],title:"Migration to 11.x",headingTitle:"Migration to 11.x",frontmatter:{}}}}]); \ No newline at end of file +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["1607"],{8810(e,s,n){n.r(s),n.d(s,{default:()=>t});var r=n(4848),i=n(8453);function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"migration-to-11x",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-to-11x",children:"#"}),"Migration to 11.x"]}),"\n",(0,r.jsx)(s.p,{children:"Migration to React Native Testing Library version 11 from version 9.x or 10.x should be a relatively easy task due small amount of breaking changes."}),"\n",(0,r.jsxs)(s.h2,{id:"breaking-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#breaking-changes",children:"#"}),"Breaking changes"]}),"\n",(0,r.jsxs)(s.h3,{id:"update-to-jest-28-if-you-use-fake-timers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#update-to-jest-28-if-you-use-fake-timers",children:"#"}),"Update to Jest 28 if you use fake timers"]}),"\n",(0,r.jsxs)(s.p,{children:["If you use fake timers in any of your tests you should update your Jest dependencies to version 28. This is due to the fact that ",(0,r.jsxs)(s.a,{href:"https://jestjs.io/docs/jest-object#jestusefaketimersfaketimersconfig",rel:"noopener noreferrer",target:"_blank",children:[(0,r.jsx)(s.code,{children:"jest.useFakeTimers()"})," config structure"]})," has changed."]}),"\n",(0,r.jsxs)(s.h3,{id:"refactor-legacy-waitforoptions-position",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#refactor-legacy-waitforoptions-position",children:"#"}),"Refactor legacy ",(0,r.jsx)(s.code,{children:"waitForOptions"})," position"]}),"\n",(0,r.jsxs)(s.p,{children:["In version 9 we introducted query ",(0,r.jsx)(s.code,{children:"options"})," parameters for each query type. This affected all ",(0,r.jsx)(s.code,{children:"findBy"})," and ",(0,r.jsx)(s.code,{children:"findAllBy"})," queries because their signatures changed e.g. from:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findAllByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(s.p,{children:"to"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findAllByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["In order to facilitate transition, in version 9 and 10, we provided a temporary possibility to pass ",(0,r.jsx)(s.code,{children:"WaitForOptions"})," like ",(0,r.jsx)(s.code,{children:"timeout"}),", ",(0,r.jsx)(s.code,{children:"interval"}),", etc inside ",(0,r.jsx)(s.code,{children:"options"})," argument. From this release we require passing these as the proper third parameter."]}),"\n",(0,r.jsx)(s.p,{children:"This change is easy to implement:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Text/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,r.jsx)(s.p,{children:"should become"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Text/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,r.jsxs)(s.h3,{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",children:"#"}),"Triggering non-touch events on targets with ",(0,r.jsx)(s.code,{children:'pointerEvents="box-none"'})," prop"]}),"\n",(0,r.jsxs)(s.p,{children:["Up to version 10, RNTL disables all events for a target with ",(0,r.jsx)(s.code,{children:'pointerEvents="box-none"'}),". This behavior is counter to how React Native itself functions."]}),"\n",(0,r.jsxs)(s.p,{children:["From version 11, RNTL continues to disable ",(0,r.jsx)(s.code,{children:"press"})," event for these targets but allows triggering other events, e.g. ",(0,r.jsx)(s.code,{children:"layout"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"full-changelog",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#full-changelog",children:"#"}),"Full Changelog"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/compare/v10.1.1...v11.0.0",rel:"noopener noreferrer",target:"_blank",children:"https://github.com/callstack/react-native-testing-library/compare/v10.1.1...v11.0.0"})})]})}function t(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}t.__RSPRESS_PAGE_META={},t.__RSPRESS_PAGE_META["12.x%2Fdocs%2Fmigration%2Fprevious%2Fv11.mdx"]={toc:[{id:"breaking-changes",text:"Breaking changes",depth:2},{id:"update-to-jest-28-if-you-use-fake-timers",text:"Update to Jest 28 if you use fake timers",depth:3},{id:"refactor-legacy-waitforoptions-position",text:"Refactor legacy `waitForOptions` position",depth:3},{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",text:'Triggering non-touch events on targets with `pointerEvents="box-none"` prop',depth:3},{id:"full-changelog",text:"Full Changelog",depth:2}],title:"Migration to 11.x",headingTitle:"Migration to 11.x",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/2184.21e668ff8f.js b/static/js/async/2184.e84c7edf97.js similarity index 58% rename from static/js/async/2184.21e668ff8f.js rename to static/js/async/2184.e84c7edf97.js index a5d16aab..7169d3b5 100644 --- a/static/js/async/2184.21e668ff8f.js +++ b/static/js/async/2184.e84c7edf97.js @@ -1 +1 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["2184"],{2139(e,s,n){n.r(s),n.d(s,{default:()=>t});var r=n(4848),i=n(8453);function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"migration-to-11x",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-to-11x",children:"#"}),"Migration to 11.x"]}),"\n",(0,r.jsx)(s.p,{children:"Migration to React Native Testing Library version 11 from version 9.x or 10.x should be a relatively easy task due small amount of breaking changes."}),"\n",(0,r.jsxs)(s.h2,{id:"breaking-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#breaking-changes",children:"#"}),"Breaking changes"]}),"\n",(0,r.jsxs)(s.h3,{id:"update-to-jest-28-if-you-use-fake-timers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#update-to-jest-28-if-you-use-fake-timers",children:"#"}),"Update to Jest 28 if you use fake timers"]}),"\n",(0,r.jsxs)(s.p,{children:["If you use fake timers in any of your tests you should update your Jest dependencies to version 28. This is due to the fact that ",(0,r.jsxs)(s.a,{href:"https://jestjs.io/docs/jest-object#jestusefaketimersfaketimersconfig",rel:"noopener noreferrer",target:"_blank",children:[(0,r.jsx)(s.code,{children:"jest.useFakeTimers()"})," config structure"]})," has changed."]}),"\n",(0,r.jsxs)(s.h3,{id:"refactor-legacy-waitforoptions-position",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#refactor-legacy-waitforoptions-position",children:"#"}),"Refactor legacy ",(0,r.jsx)(s.code,{children:"waitForOptions"})," position"]}),"\n",(0,r.jsxs)(s.p,{children:["In version 9 we introducted query ",(0,r.jsx)(s.code,{children:"options"})," parameters for each query type. This affected all ",(0,r.jsx)(s.code,{children:"findBy"})," and ",(0,r.jsx)(s.code,{children:"findAllBy"})," queries because their signatures changed e.g. from:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findAllByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(s.p,{children:"to"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findAllByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["In order to facilitate transition, in version 9 and 10, we provided a temporary possibility to pass ",(0,r.jsx)(s.code,{children:"WaitForOptions"})," like ",(0,r.jsx)(s.code,{children:"timeout"}),", ",(0,r.jsx)(s.code,{children:"interval"}),", etc inside ",(0,r.jsx)(s.code,{children:"options"})," argument. From this release we require passing these as the proper third parameter."]}),"\n",(0,r.jsx)(s.p,{children:"This change is easy to implement:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Text/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,r.jsx)(s.p,{children:"should become"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Text/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,r.jsxs)(s.h3,{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",children:"#"}),"Triggering non-touch events on targets with ",(0,r.jsx)(s.code,{children:'pointerEvents="box-none"'})," prop"]}),"\n",(0,r.jsxs)(s.p,{children:["Up to version 10, RNTL disables all events for a target with ",(0,r.jsx)(s.code,{children:'pointerEvents="box-none"'}),". This behavior is counter to how React Native itself functions."]}),"\n",(0,r.jsxs)(s.p,{children:["From version 11, RNTL continues to disable ",(0,r.jsx)(s.code,{children:"press"})," event for these targets but allows triggering other events, e.g. ",(0,r.jsx)(s.code,{children:"layout"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"full-changelog",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#full-changelog",children:"#"}),"Full Changelog"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/compare/v10.1.1...v11.0.0",rel:"noopener noreferrer",target:"_blank",children:"https://github.com/callstack/react-native-testing-library/compare/v10.1.1...v11.0.0"})})]})}function t(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}t.__RSPRESS_PAGE_META={},t.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fmigration%2Fprevious%2Fv11.mdx"]={toc:[{id:"breaking-changes",text:"Breaking changes",depth:2},{id:"update-to-jest-28-if-you-use-fake-timers",text:"Update to Jest 28 if you use fake timers",depth:3},{id:"refactor-legacy-waitforoptions-position",text:"Refactor legacy `waitForOptions` position",depth:3},{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",text:'Triggering non-touch events on targets with `pointerEvents="box-none"` prop',depth:3},{id:"full-changelog",text:"Full Changelog",depth:2}],title:"Migration to 11.x",headingTitle:"Migration to 11.x",frontmatter:{}}}}]); \ No newline at end of file +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["2184"],{2139(e,s,n){n.r(s),n.d(s,{default:()=>t});var r=n(4848),i=n(8453);function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"migration-to-11x",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-to-11x",children:"#"}),"Migration to 11.x"]}),"\n",(0,r.jsx)(s.p,{children:"Migration to React Native Testing Library version 11 from version 9.x or 10.x should be a relatively easy task due small amount of breaking changes."}),"\n",(0,r.jsxs)(s.h2,{id:"breaking-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#breaking-changes",children:"#"}),"Breaking changes"]}),"\n",(0,r.jsxs)(s.h3,{id:"update-to-jest-28-if-you-use-fake-timers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#update-to-jest-28-if-you-use-fake-timers",children:"#"}),"Update to Jest 28 if you use fake timers"]}),"\n",(0,r.jsxs)(s.p,{children:["If you use fake timers in any of your tests you should update your Jest dependencies to version 28. This is due to the fact that ",(0,r.jsxs)(s.a,{href:"https://jestjs.io/docs/jest-object#jestusefaketimersfaketimersconfig",rel:"noopener noreferrer",target:"_blank",children:[(0,r.jsx)(s.code,{children:"jest.useFakeTimers()"})," config structure"]})," has changed."]}),"\n",(0,r.jsxs)(s.h3,{id:"refactor-legacy-waitforoptions-position",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#refactor-legacy-waitforoptions-position",children:"#"}),"Refactor legacy ",(0,r.jsx)(s.code,{children:"waitForOptions"})," position"]}),"\n",(0,r.jsxs)(s.p,{children:["In version 9 we introducted query ",(0,r.jsx)(s.code,{children:"options"})," parameters for each query type. This affected all ",(0,r.jsx)(s.code,{children:"findBy"})," and ",(0,r.jsx)(s.code,{children:"findAllBy"})," queries because their signatures changed e.g. from:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findAllByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(s.p,{children:"to"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findAllByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" WaitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["In order to facilitate transition, in version 9 and 10, we provided a temporary possibility to pass ",(0,r.jsx)(s.code,{children:"WaitForOptions"})," like ",(0,r.jsx)(s.code,{children:"timeout"}),", ",(0,r.jsx)(s.code,{children:"interval"}),", etc inside ",(0,r.jsx)(s.code,{children:"options"})," argument. From this release we require passing these as the proper third parameter."]}),"\n",(0,r.jsx)(s.p,{children:"This change is easy to implement:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Text/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,r.jsx)(s.p,{children:"should become"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Text/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,r.jsxs)(s.h3,{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",children:"#"}),"Triggering non-touch events on targets with ",(0,r.jsx)(s.code,{children:'pointerEvents="box-none"'})," prop"]}),"\n",(0,r.jsxs)(s.p,{children:["Up to version 10, RNTL disables all events for a target with ",(0,r.jsx)(s.code,{children:'pointerEvents="box-none"'}),". This behavior is counter to how React Native itself functions."]}),"\n",(0,r.jsxs)(s.p,{children:["From version 11, RNTL continues to disable ",(0,r.jsx)(s.code,{children:"press"})," event for these targets but allows triggering other events, e.g. ",(0,r.jsx)(s.code,{children:"layout"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"full-changelog",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#full-changelog",children:"#"}),"Full Changelog"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/compare/v10.1.1...v11.0.0",rel:"noopener noreferrer",target:"_blank",children:"https://github.com/callstack/react-native-testing-library/compare/v10.1.1...v11.0.0"})})]})}function t(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}t.__RSPRESS_PAGE_META={},t.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fmigration%2Fprevious%2Fv11.mdx"]={toc:[{id:"breaking-changes",text:"Breaking changes",depth:2},{id:"update-to-jest-28-if-you-use-fake-timers",text:"Update to Jest 28 if you use fake timers",depth:3},{id:"refactor-legacy-waitforoptions-position",text:"Refactor legacy `waitForOptions` position",depth:3},{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",text:'Triggering non-touch events on targets with `pointerEvents="box-none"` prop',depth:3},{id:"full-changelog",text:"Full Changelog",depth:2}],title:"Migration to 11.x",headingTitle:"Migration to 11.x",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/221.8844b669bd.js b/static/js/async/221.8844b669bd.js new file mode 100644 index 00000000..15b51fa7 --- /dev/null +++ b/static/js/async/221.8844b669bd.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["221"],{2140(e,s,n){n.r(s),n.d(s,{default:()=>a});var r=n(4848),i=n(8453),l=n(7425);function o(e){let s={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#queries",children:"#"}),"Queries"]}),"\n",(0,r.jsx)(s.p,{children:"Queries are one of the main building blocks for the React Native Testing Library. They enable you to find relevant elements in the element tree, which represents your application's user interface when running under tests."}),"\n",(0,r.jsxs)(s.h2,{id:"accessing-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#accessing-queries",children:"#"}),"Accessing queries"]}),"\n",(0,r.jsxs)(s.p,{children:["All queries described below are accessible in two main ways: through the ",(0,r.jsx)(s.code,{children:"screen"})," object or by capturing the ",(0,r.jsx)(s.code,{children:"render"})," function call result."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-screen-object",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-screen-object",children:"#"}),"Using ",(0,r.jsx)(s.code,{children:"screen"})," object"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'accessing queries using \"screen\" object'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "Start"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Use the ",(0,r.jsx)(s.code,{children:"screen"})," object exported by ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"})," to access queries. This object contains all available query methods bound to the most recently rendered UI."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-render-result",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-render-result",children:"#"}),"Using ",(0,r.jsx)(s.code,{children:"render"})," result"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'accessing queries using \"render\" result'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "Start"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["You can also capture query functions from the ",(0,r.jsx)(s.code,{children:"render"})," function return value. This provides the same query functions as the ",(0,r.jsx)(s.code,{children:"screen"})," object."]}),"\n",(0,r.jsxs)(s.h2,{id:"query-parts",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-parts",children:"#"}),"Query parts"]}),"\n",(0,r.jsxs)(s.p,{children:["Each query is composed of two parts: variant and predicate, which are separated by the ",(0,r.jsx)(s.code,{children:"by"})," word in the middle of the name."]}),"\n",(0,r.jsx)(s.p,{children:"Consider the following query:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"txt",children:(0,r.jsx)(s.code,{children:(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{children:"getByRole()"})})})})}),"\n",(0,r.jsxs)(s.p,{children:["For this query, ",(0,r.jsx)(s.code,{children:"getBy*"})," is the query variant, and ",(0,r.jsx)(s.code,{children:"*ByRole"})," is the predicate."]}),"\n",(0,r.jsxs)(s.h2,{id:"query-variant",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-variant",children:"#"}),"Query variant"]}),"\n",(0,r.jsx)(s.p,{children:"The query variants describe the expected number (and timing) of matching elements, so they differ in their return type."}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Variant"}),(0,r.jsx)(s.th,{children:"Assertion"}),(0,r.jsx)(s.th,{children:"Return type"}),(0,r.jsx)(s.th,{children:"Is Async?"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#get-by",children:(0,r.jsx)(s.code,{children:"getBy*"})})}),(0,r.jsx)(s.td,{children:"Exactly one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"TestInstance"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#get-all-by",children:(0,r.jsx)(s.code,{children:"getAllBy*"})})}),(0,r.jsx)(s.td,{children:"At least one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Array"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#query-by",children:(0,r.jsx)(s.code,{children:"queryBy*"})})}),(0,r.jsx)(s.td,{children:"Zero or one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)("code",{children:"TestInstance | null"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#query-all-by",children:(0,r.jsx)(s.code,{children:"queryAllBy*"})})}),(0,r.jsx)(s.td,{children:"No assertion"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Array"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#find-by",children:(0,r.jsx)(s.code,{children:"findBy*"})})}),(0,r.jsx)(s.td,{children:"Exactly one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Promise"})}),(0,r.jsx)(s.td,{children:"Yes"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#find-all-by",children:(0,r.jsx)(s.code,{children:"findAllBy*"})})}),(0,r.jsx)(s.td,{children:"At least one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Promise>"})}),(0,r.jsx)(s.td,{children:"Yes"})]})]})]}),"\n",(0,r.jsx)(s.p,{children:"Queries work as implicit assertions on the number of matching elements and will throw an error when the assertion fails."}),"\n",(0,r.jsxs)(s.h3,{id:"get-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#get-by",children:"#"}),(0,r.jsx)(s.code,{children:"getBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getBy*"})," queries return the single matching element for a query, and throw an error if no elements match or if more than one match is found. If you need to find more than one element, then use ",(0,r.jsx)(s.code,{children:"getAllBy"}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"get-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#get-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"getAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance[]"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getAllBy*"})," queries return an array of all matching elements for a query and throw an error if no elements match."]}),"\n",(0,r.jsxs)(s.h3,{id:"query-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-by",children:"#"}),(0,r.jsx)(s.code,{children:"queryBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"queryByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" null"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"queryBy*"})," queries return the first matching node for a query, or ",(0,r.jsx)(s.code,{children:"null"})," if no elements match. Use these to assert that an element is not present. They throw if more than one match is found (use ",(0,r.jsx)(s.code,{children:"queryAllBy"})," instead)."]}),"\n",(0,r.jsxs)(s.h3,{id:"query-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"queryAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"queryAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance[]"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"queryAllBy*"})," queries return an array of all matching nodes for a query and return an empty array (",(0,r.jsx)(s.code,{children:"[]"}),") when no elements match."]}),"\n",(0,r.jsxs)(s.h3,{id:"find-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#find-by",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"TestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"findBy*"})," queries return a promise which resolves when a matching element is found. The promise is rejected if no elements match or if more than one match is found after a default timeout of 1000 ms. If you need to find more than one element use ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries."]}),"\n",(0,r.jsxs)(s.h3,{id:"find-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#find-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"findAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"TestInstance[]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"findAllBy*"})," queries return a promise which resolves to an array of matching elements. The promise is rejected if no elements match after a default timeout of 1000 ms."]}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\n",(0,r.jsx)(s.code,{children:"findBy*"})," and ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries accept optional ",(0,r.jsx)(s.code,{children:"waitForOptions"})," object arguments, which can contain ",(0,r.jsx)(s.code,{children:"timeout"}),", ",(0,r.jsx)(s.code,{children:"interval"})," and ",(0,r.jsx)(s.code,{children:"onTimeout"})," properties which have the same meaning as respective options for ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/misc/async.html#waitfor",children:(0,r.jsx)(s.code,{children:"waitFor"})})," function."]})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nIn cases when your ",(0,r.jsx)(s.code,{children:"findBy*"})," and ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries throw when unable to find matching elements, it is helpful to pass ",(0,r.jsx)(s.code,{children:"onTimeout: () => { screen.debug(); }"})," callback using the ",(0,r.jsx)(s.code,{children:"waitForOptions"})," parameter."]})}),"\n",(0,r.jsxs)(s.h2,{id:"query-predicates",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-predicates",children:"#"}),"Query predicates"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsxs)(s.em,{children:["Note: most methods like this one return a ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer#test-instance",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"TestInstance"})})," with following properties that you may be interested in:"]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { [propName"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" any"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" parent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" children"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Array"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"TestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-role",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-role",children:"#"}),(0,r.jsx)(s.code,{children:"*ByRole"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByRole, getAllByRole, queryByRole, queryAllByRole, findByRole, findAllByRole"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" role: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" name?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextMatch"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" selected?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" checked?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'mixed'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" busy?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" expanded?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" min?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" max"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" now"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextMatch;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"role"})," or ",(0,r.jsx)(s.code,{children:"accessibilityRole"})," prop."]}),"\n",(0,r.jsxs)(l.Pq,{type:"info",title:"Info",children:[(0,r.jsxs)(s.p,{children:["\nIn order for ",(0,r.jsx)(s.code,{children:"*ByRole"})," queries to match an element it needs to be considered an accessibility element:"]}),(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"Text"}),", ",(0,r.jsx)(s.code,{children:"TextInput"})," and ",(0,r.jsx)(s.code,{children:"Switch"})," elements are these by default."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"View"})," elements need an explicit ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessible",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessible"})})," prop set to ",(0,r.jsx)(s.code,{children:"true"})]}),"\n",(0,r.jsxs)(s.li,{children:["Some React Native composite components like ",(0,r.jsx)(s.code,{children:"Pressable"})," & ",(0,r.jsx)(s.code,{children:"TouchableOpacity"})," render host ",(0,r.jsx)(s.code,{children:"View"})," element with ",(0,r.jsx)(s.code,{children:"accessible"})," prop already set."]}),"\n"]})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element3"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"by-role-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-role-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"name"}),": Finds an element with given ",(0,r.jsx)(s.code,{children:"role"}),"/",(0,r.jsx)(s.code,{children:"accessibilityRole"})," and an accessible name (= accessability label or text content)."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"disabled"}),": You can filter elements by their disabled state (coming either from ",(0,r.jsx)(s.code,{children:"aria-disabled"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.disabled"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"disabled: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"disabled: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"disabled"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/jest-matchers.html#tobeenabled",children:[(0,r.jsx)(s.code,{children:"toBeEnabled()"})," / ",(0,r.jsx)(s.code,{children:"toBeDisabled()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"selected"}),": You can filter elements by their selected state (coming either from ",(0,r.jsx)(s.code,{children:"aria-selected"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.selected"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"selected: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"selected: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"selected"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/jest-matchers.html#tobeselected",children:(0,r.jsx)(s.code,{children:"toBeSelected()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"checked"}),": You can filter elements by their checked state (coming either from ",(0,r.jsx)(s.code,{children:"aria-checked"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.checked"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"}),", ",(0,r.jsx)(s.code,{children:"false"}),", or ",(0,r.jsx)(s.code,{children:'"mixed"'}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"checked"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/jest-matchers.html#tobechecked",children:[(0,r.jsx)(s.code,{children:"toBeChecked()"})," / ",(0,r.jsx)(s.code,{children:"toBePartiallyChecked()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"busy"}),": You can filter elements by their busy state (coming either from ",(0,r.jsx)(s.code,{children:"aria-busy"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.busy"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"busy: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"busy: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"busy"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/jest-matchers.html#tobebusy",children:(0,r.jsx)(s.code,{children:"toBeBusy()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"expanded"}),": You can filter elements by their expanded state (coming either from ",(0,r.jsx)(s.code,{children:"aria-expanded"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.expanded"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"expanded"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/jest-matchers.html#tobeexpanded",children:[(0,r.jsx)(s.code,{children:"toBeExpanded()"})," / ",(0,r.jsx)(s.code,{children:"toBeCollapsed()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"value"}),": Filter elements by their accessibility value, based on either ",(0,r.jsx)(s.code,{children:"aria-valuemin"}),", ",(0,r.jsx)(s.code,{children:"aria-valuemax"}),", ",(0,r.jsx)(s.code,{children:"aria-valuenow"}),", ",(0,r.jsx)(s.code,{children:"aria-valuetext"})," or ",(0,r.jsx)(s.code,{children:"accessibilityValue"})," props. Accessiblity value conceptually consists of numeric ",(0,r.jsx)(s.code,{children:"min"}),", ",(0,r.jsx)(s.code,{children:"max"})," and ",(0,r.jsx)(s.code,{children:"now"})," entries, as well as string ",(0,r.jsx)(s.code,{children:"text"})," entry."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See React Native ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilityvalue",rel:"noopener noreferrer",target:"_blank",children:"accessibilityValue"})," docs to learn more about the accessibility value concept."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/jest-matchers.html#tohaveaccessibilityvalue",children:(0,r.jsx)(s.code,{children:"toHaveAccessibilityValue()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.h3,{id:"by-label-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-label-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByLabelText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByLabelText, getAllByLabelText, queryByLabelText, queryAllByLabelText, findByLabelText, findAllByLabelText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," with matching label:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["either by matching ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#aria-label",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"aria-label"})}),"/",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitylabel",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessibilityLabel"})})," prop"]}),"\n",(0,r.jsxs)(s.li,{children:["or by matching text content of view referenced by ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#aria-labelledby-android",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"aria-labelledby"})}),"/",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitylabelledby-android",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessibilityLabelledBy"})})," prop"]}),"\n",(0,r.jsxs)(s.li,{children:["or by matching the ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/image#alt",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"alt"})})," prop on ",(0,r.jsx)(s.code,{children:"Image"})," elements"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["When ",(0,r.jsx)(s.code,{children:"accessibilityLabelledBy"})," references multiple elements with an array, their text content is joined with spaces in the referenced order and matched as a single label. ",(0,r.jsx)(s.code,{children:"aria-labelledby"})," follows React Native's single ",(0,r.jsx)(s.code,{children:"nativeID"})," value behavior."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'my-label'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-placeholder-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-placeholder-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByPlaceholderText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByPlaceholderText, getAllByPlaceholderText, queryByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," for a ",(0,r.jsx)(s.code,{children:"TextInput"})," with a matching placeholder – may be a string or regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-display-value",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-display-value",children:"#"}),(0,r.jsx)(s.code,{children:"*ByDisplayValue"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByDisplayValue, getAllByDisplayValue, queryByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByDisplayValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" value: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," for a ",(0,r.jsx)(s.code,{children:"TextInput"})," with a matching display value – may be a string or regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByDisplayValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByText, getAllByText, queryByText, queryAllByText, findByText, findAllByText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," with matching text – may be a string or regular expression."]}),"\n",(0,r.jsxs)(s.p,{children:["This method will join ",(0,r.jsx)(s.code,{children:""})," siblings to find matches, similarly to ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/text#containers",rel:"noopener noreferrer",target:"_blank",children:"how React Native handles these components"}),". This will allow for querying for strings that will be visually rendered together, but may be semantically separate React components."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'banana'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-hint-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-hint-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByHintText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByA11yHint, getAllByA11yHint, queryByA11yHint, queryAllByA11yHint, findByA11yHint, findAllByA11yHint\ngetByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint, findByAccessibilityHint, findAllByAccessibilityHint\ngetByHintText, getAllByHintText, queryByHintText, queryAllByHintText, findByHintText, findAllByHintText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByHintText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" hint: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"accessibilityHint"})," prop."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByHintText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Plays a song'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nPlease consult ",(0,r.jsxs)(s.a,{href:"https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint",rel:"noopener noreferrer",target:"_blank",children:["Apple guidelines on how ",(0,r.jsx)(s.code,{children:"accessibilityHint"})," should be used"]}),"."]})}),"\n",(0,r.jsxs)(s.h3,{id:"by-test-id",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-test-id",children:"#"}),(0,r.jsx)(s.code,{children:"*ByTestId"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByTestId, getAllByTestId, queryByTestId, queryAllByTestId, findByTestId, findAllByTestId"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByTestId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" testId: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"testID"})," prop. ",(0,r.jsx)(s.code,{children:"testID"})," – may be a string or a regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'unique-id'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nFollowing ",(0,r.jsx)(s.a,{href:"https://testing-library.com/docs/guiding-principles",rel:"noopener noreferrer",target:"_blank",children:"the guiding principles"}),", use this only when other queries don't work for your use case. ",(0,r.jsx)(s.code,{children:"testID"})," attributes don't resemble how your software is used and should be avoided when possible. They're useful for end-to-end testing on real devices, e.g. with Detox. Learn more from the blog post ",(0,r.jsx)(s.a,{href:"https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change",rel:"noopener noreferrer",target:"_blank",children:'"Making your UI tests resilient to change"'}),"."]})}),"\n",(0,r.jsxs)(s.h3,{id:"common-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#common-options",children:"#"}),"Common options"]}),"\n",(0,r.jsxs)(s.p,{children:["Usually query first argument can be a ",(0,r.jsx)(s.strong,{children:"string"})," or a ",(0,r.jsx)(s.strong,{children:"regex"}),". All queries take at least the ",(0,r.jsx)(s.a,{href:"#hidden-option",children:(0,r.jsx)(s.code,{children:"hidden"})})," option as an optionnal second argument and some queries accept more options which change string matching behaviour. See ",(0,r.jsx)(s.a,{href:"#textmatch",children:"TextMatch"})," for more info."]}),"\n",(0,r.jsxs)(s.h4,{id:"includehiddenelements-option",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#includehiddenelements-option",children:"#"}),(0,r.jsx)(s.code,{children:"includeHiddenElements"})," option"]}),"\n",(0,r.jsxs)(s.p,{children:["All queries have the ",(0,r.jsx)(s.code,{children:"includeHiddenElements"})," option which affects whether ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/misc/accessibility.html#ishiddenfromaccessibility",children:"elements hidden from accessibility"})," are matched by the query. By default queries will not match hidden elements, because the users of the app would not be able to see such elements."]}),"\n",(0,r.jsxs)(s.p,{children:["You can configure the default value with the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/config.html#configure",children:[(0,r.jsx)(s.code,{children:"configure"})," function"]}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["This option is also available as ",(0,r.jsx)(s.code,{children:"hidden"})," alias for compatibility with ",(0,r.jsx)(s.a,{href:"https://testing-library.com/docs/queries/byrole#hidden",rel:"noopener noreferrer",target:"_blank",children:"React Testing Library"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Examples"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" style"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{{ display"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'none'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }}>Hidden from accessibility);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Exclude hidden elements"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Include hidden elements"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"textmatch-type",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#textmatch-type",children:"#"}),"TextMatch type"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" RegExp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Most of the query APIs take a ",(0,r.jsx)(s.code,{children:"TextMatch"})," as an argument, which means the argument can be either a ",(0,r.jsx)(s.em,{children:"string"})," or ",(0,r.jsx)(s.em,{children:"regex"}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"examples",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#examples",children:"#"}),"Examples"]}),"\n",(0,r.jsx)(s.p,{children:"Given the following render:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World);"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Will ",(0,r.jsx)(s.strong,{children:"find a match"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matching a string:"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'llo Worl'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'hello world'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ignore case-sensitivity"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matching a regex:"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/World/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/world/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match, ignore case"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"^"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"hello world"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string match, ignore case-sensitivity"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Hello W"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"oRlD/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// advanced regex"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Will ",(0,r.jsx)(s.strong,{children:"NOT find a match"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring does not match"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'llo Worl'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string does not match"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Goodbye World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// case-sensitive regex with different case"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello world/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"text-match-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#text-match-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.h4,{id:"precision",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#precision",children:"#"}),"Precision"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Queries that take a ",(0,r.jsx)(s.code,{children:"TextMatch"})," also accept an object as the second argument that can contain options that affect the precision of string matching:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"exact"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),"; matches full strings, case-sensitive. When false, matches substrings and is not case-sensitive.","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"exact"})," has no effect on regex argument."]}),"\n",(0,r.jsxs)(s.li,{children:["In most cases using a ",(0,r.jsx)(s.code,{children:"regex"})," instead of a string gives you more control over fuzzy matching and should be preferred over ",(0,r.jsx)(s.code,{children:"{ exact: false }"}),"."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"normalizer"}),": An optional function which overrides normalization behavior. See ",(0,r.jsx)(s.a,{href:"#normalization",children:"Normalization"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"exact"})," option defaults to ",(0,r.jsx)(s.code,{children:"true"})," but if you want to search for a text slice or make text matching case-insensitive you can override it. That being said we advise you to use regex in more complex scenarios."]}),"\n",(0,r.jsxs)(s.h4,{id:"normalization",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#normalization",children:"#"}),"Normalization"]}),"\n",(0,r.jsx)(s.p,{children:"Before running any matching logic against text, it is automatically normalized. By default, normalization consists of trimming whitespace from the start and end of text, and collapsing multiple adjacent whitespace characters into a single space."}),"\n",(0,r.jsxs)(s.p,{children:["If you want to prevent that normalization, or provide alternative normalization (e.g. to remove Unicode control characters), you can provide a ",(0,r.jsx)(s.code,{children:"normalizer"})," function in the options object. This function will be given a string and is expected to return a normalized version of that string."]}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nSpecifying a value for ",(0,r.jsx)(s.code,{children:"normalizer"})," replaces the built-in normalization, but you can call ",(0,r.jsx)(s.code,{children:"getDefaultNormalizer"})," to obtain a built-in normalizer, either to adjust that normalization or to call it from your own normalizer."]})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getDefaultNormalizer"})," take options object which allows the selection of behaviour:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"trim"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),". Trims leading and trailing whitespace."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"collapseWhitespace"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),". Collapses inner whitespace (newlines, tabs repeated spaces) into a single space."]}),"\n"]}),"\n",(0,r.jsxs)(s.h5,{id:"normalization-examples",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#normalization-examples",children:"#"}),"Normalization Examples"]}),"\n",(0,r.jsx)(s.p,{children:"To perform a match against text without trimming:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getDefaultNormalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ trim"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"To override normalization to remove some Unicode characters whilst keeping some (but not all) of the built-in normalization behavior:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (str) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getDefaultNormalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ trim"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })(str)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".replace"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/[\\u200E-\\u200F]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"*"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"g"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ''"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fapi%2Fqueries.mdx"]={toc:[{id:"accessing-queries",text:"Accessing queries",depth:2},{id:"using-screen-object",text:"Using `screen` object",depth:3},{id:"using-render-result",text:"Using `render` result",depth:3},{id:"query-parts",text:"Query parts",depth:2},{id:"query-variant",text:"Query variant",depth:2},{id:"get-by",text:"`getBy*` queries",depth:3},{id:"get-all-by",text:"`getAllBy*` queries",depth:3},{id:"query-by",text:"`queryBy*` queries",depth:3},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3},{id:"find-by",text:"`findBy*` queries",depth:3},{id:"find-all-by",text:"`findAllBy*` queries",depth:3},{id:"query-predicates",text:"Query predicates",depth:2},{id:"by-role",text:"`*ByRole`",depth:3},{id:"by-role-options",text:"Options",depth:4},{id:"by-label-text",text:"`*ByLabelText`",depth:3},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3},{id:"by-text",text:"`*ByText`",depth:3},{id:"by-hint-text",text:"`*ByHintText`",depth:3},{id:"by-test-id",text:"`*ByTestId`",depth:3},{id:"common-options",text:"Common options",depth:3},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4},{id:"textmatch-type",text:"TextMatch type",depth:2},{id:"examples",text:"Examples",depth:3},{id:"text-match-options",text:"Options",depth:3},{id:"precision",text:"Precision",depth:4},{id:"normalization",text:"Normalization",depth:4}],title:"Queries",headingTitle:"Queries",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/221.d1d1eecda4.js b/static/js/async/221.d1d1eecda4.js deleted file mode 100644 index 9611120e..00000000 --- a/static/js/async/221.d1d1eecda4.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["221"],{2140(e,s,n){n.r(s),n.d(s,{default:()=>a});var r=n(4848),i=n(8453),l=n(7425);function o(e){let s={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#queries",children:"#"}),"Queries"]}),"\n",(0,r.jsx)(s.p,{children:"Queries are one of the main building blocks for the React Native Testing Library. They enable you to find relevant elements in the element tree, which represents your application's user interface when running under tests."}),"\n",(0,r.jsxs)(s.h2,{id:"accessing-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#accessing-queries",children:"#"}),"Accessing queries"]}),"\n",(0,r.jsxs)(s.p,{children:["All queries described below are accessible in two main ways: through the ",(0,r.jsx)(s.code,{children:"screen"})," object or by capturing the ",(0,r.jsx)(s.code,{children:"render"})," function call result."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-screen-object",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-screen-object",children:"#"}),"Using ",(0,r.jsx)(s.code,{children:"screen"})," object"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'accessing queries using \"screen\" object'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "Start"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Use the ",(0,r.jsx)(s.code,{children:"screen"})," object exported by ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"})," to access queries. This object contains all available query methods bound to the most recently rendered UI."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-render-result",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-render-result",children:"#"}),"Using ",(0,r.jsx)(s.code,{children:"render"})," result"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'accessing queries using \"render\" result'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "Start"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["You can also capture query functions from the ",(0,r.jsx)(s.code,{children:"render"})," function return value. This provides the same query functions as the ",(0,r.jsx)(s.code,{children:"screen"})," object."]}),"\n",(0,r.jsxs)(s.h2,{id:"query-parts",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-parts",children:"#"}),"Query parts"]}),"\n",(0,r.jsxs)(s.p,{children:["Each query is composed of two parts: variant and predicate, which are separated by the ",(0,r.jsx)(s.code,{children:"by"})," word in the middle of the name."]}),"\n",(0,r.jsx)(s.p,{children:"Consider the following query:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"txt",children:(0,r.jsx)(s.code,{children:(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{children:"getByRole()"})})})})}),"\n",(0,r.jsxs)(s.p,{children:["For this query, ",(0,r.jsx)(s.code,{children:"getBy*"})," is the query variant, and ",(0,r.jsx)(s.code,{children:"*ByRole"})," is the predicate."]}),"\n",(0,r.jsxs)(s.h2,{id:"query-variant",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-variant",children:"#"}),"Query variant"]}),"\n",(0,r.jsx)(s.p,{children:"The query variants describe the expected number (and timing) of matching elements, so they differ in their return type."}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Variant"}),(0,r.jsx)(s.th,{children:"Assertion"}),(0,r.jsx)(s.th,{children:"Return type"}),(0,r.jsx)(s.th,{children:"Is Async?"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#get-by",children:(0,r.jsx)(s.code,{children:"getBy*"})})}),(0,r.jsx)(s.td,{children:"Exactly one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"TestInstance"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#get-all-by",children:(0,r.jsx)(s.code,{children:"getAllBy*"})})}),(0,r.jsx)(s.td,{children:"At least one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Array"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#query-by",children:(0,r.jsx)(s.code,{children:"queryBy*"})})}),(0,r.jsx)(s.td,{children:"Zero or one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)("code",{children:"TestInstance | null"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#query-all-by",children:(0,r.jsx)(s.code,{children:"queryAllBy*"})})}),(0,r.jsx)(s.td,{children:"No assertion"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Array"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#find-by",children:(0,r.jsx)(s.code,{children:"findBy*"})})}),(0,r.jsx)(s.td,{children:"Exactly one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Promise"})}),(0,r.jsx)(s.td,{children:"Yes"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#find-all-by",children:(0,r.jsx)(s.code,{children:"findAllBy*"})})}),(0,r.jsx)(s.td,{children:"At least one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Promise>"})}),(0,r.jsx)(s.td,{children:"Yes"})]})]})]}),"\n",(0,r.jsx)(s.p,{children:"Queries work as implicit assertions on the number of matching elements and will throw an error when the assertion fails."}),"\n",(0,r.jsxs)(s.h3,{id:"get-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#get-by",children:"#"}),(0,r.jsx)(s.code,{children:"getBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getBy*"})," queries return the single matching element for a query, and throw an error if no elements match or if more than one match is found. If you need to find more than one element, then use ",(0,r.jsx)(s.code,{children:"getAllBy"}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"get-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#get-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"getAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance[]"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getAllBy*"})," queries return an array of all matching elements for a query and throw an error if no elements match."]}),"\n",(0,r.jsxs)(s.h3,{id:"query-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-by",children:"#"}),(0,r.jsx)(s.code,{children:"queryBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"queryByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" null"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"queryBy*"})," queries return the first matching node for a query, or ",(0,r.jsx)(s.code,{children:"null"})," if no elements match. Use these to assert that an element is not present. They throw if more than one match is found (use ",(0,r.jsx)(s.code,{children:"queryAllBy"})," instead)."]}),"\n",(0,r.jsxs)(s.h3,{id:"query-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"queryAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"queryAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance[]"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"queryAllBy*"})," queries return an array of all matching nodes for a query and return an empty array (",(0,r.jsx)(s.code,{children:"[]"}),") when no elements match."]}),"\n",(0,r.jsxs)(s.h3,{id:"find-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#find-by",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"TestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"findBy*"})," queries return a promise which resolves when a matching element is found. The promise is rejected if no elements match or if more than one match is found after a default timeout of 1000 ms. If you need to find more than one element use ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries."]}),"\n",(0,r.jsxs)(s.h3,{id:"find-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#find-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"findAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"TestInstance[]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"findAllBy*"})," queries return a promise which resolves to an array of matching elements. The promise is rejected if no elements match after a default timeout of 1000 ms."]}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\n",(0,r.jsx)(s.code,{children:"findBy*"})," and ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries accept optional ",(0,r.jsx)(s.code,{children:"waitForOptions"})," object arguments, which can contain ",(0,r.jsx)(s.code,{children:"timeout"}),", ",(0,r.jsx)(s.code,{children:"interval"})," and ",(0,r.jsx)(s.code,{children:"onTimeout"})," properties which have the same meaning as respective options for ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/misc/async.html#waitfor",children:(0,r.jsx)(s.code,{children:"waitFor"})})," function."]})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nIn cases when your ",(0,r.jsx)(s.code,{children:"findBy*"})," and ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries throw when unable to find matching elements, it is helpful to pass ",(0,r.jsx)(s.code,{children:"onTimeout: () => { screen.debug(); }"})," callback using the ",(0,r.jsx)(s.code,{children:"waitForOptions"})," parameter."]})}),"\n",(0,r.jsxs)(s.h2,{id:"query-predicates",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-predicates",children:"#"}),"Query predicates"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsxs)(s.em,{children:["Note: most methods like this one return a ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer#test-instance",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"TestInstance"})})," with following properties that you may be interested in:"]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { [propName"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" any"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" parent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" children"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Array"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"TestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-role",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-role",children:"#"}),(0,r.jsx)(s.code,{children:"*ByRole"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByRole, getAllByRole, queryByRole, queryAllByRole, findByRole, findAllByRole"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" role: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" name?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextMatch"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" selected?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" checked?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'mixed'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" busy?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" expanded?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" min?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" max"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" now"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextMatch;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"role"})," or ",(0,r.jsx)(s.code,{children:"accessibilityRole"})," prop."]}),"\n",(0,r.jsxs)(l.Pq,{type:"info",title:"Info",children:[(0,r.jsxs)(s.p,{children:["\nIn order for ",(0,r.jsx)(s.code,{children:"*ByRole"})," queries to match an element it needs to be considered an accessibility element:"]}),(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"Text"}),", ",(0,r.jsx)(s.code,{children:"TextInput"})," and ",(0,r.jsx)(s.code,{children:"Switch"})," elements are these by default."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"View"})," elements need an explicit ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessible",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessible"})})," prop set to ",(0,r.jsx)(s.code,{children:"true"})]}),"\n",(0,r.jsxs)(s.li,{children:["Some React Native composite components like ",(0,r.jsx)(s.code,{children:"Pressable"})," & ",(0,r.jsx)(s.code,{children:"TouchableOpacity"})," render host ",(0,r.jsx)(s.code,{children:"View"})," element with ",(0,r.jsx)(s.code,{children:"accessible"})," prop already set."]}),"\n"]})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element3"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"by-role-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-role-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"name"}),": Finds an element with given ",(0,r.jsx)(s.code,{children:"role"}),"/",(0,r.jsx)(s.code,{children:"accessibilityRole"})," and an accessible name (= accessability label or text content)."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"disabled"}),": You can filter elements by their disabled state (coming either from ",(0,r.jsx)(s.code,{children:"aria-disabled"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.disabled"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"disabled: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"disabled: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"disabled"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/jest-matchers.html#tobeenabled",children:[(0,r.jsx)(s.code,{children:"toBeEnabled()"})," / ",(0,r.jsx)(s.code,{children:"toBeDisabled()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"selected"}),": You can filter elements by their selected state (coming either from ",(0,r.jsx)(s.code,{children:"aria-selected"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.selected"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"selected: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"selected: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"selected"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/jest-matchers.html#tobeselected",children:(0,r.jsx)(s.code,{children:"toBeSelected()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"checked"}),": You can filter elements by their checked state (coming either from ",(0,r.jsx)(s.code,{children:"aria-checked"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.checked"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"}),", ",(0,r.jsx)(s.code,{children:"false"}),", or ",(0,r.jsx)(s.code,{children:'"mixed"'}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"checked"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/jest-matchers.html#tobechecked",children:[(0,r.jsx)(s.code,{children:"toBeChecked()"})," / ",(0,r.jsx)(s.code,{children:"toBePartiallyChecked()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"busy"}),": You can filter elements by their busy state (coming either from ",(0,r.jsx)(s.code,{children:"aria-busy"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.busy"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"busy: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"busy: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"busy"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/jest-matchers.html#tobebusy",children:(0,r.jsx)(s.code,{children:"toBeBusy()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"expanded"}),": You can filter elements by their expanded state (coming either from ",(0,r.jsx)(s.code,{children:"aria-expanded"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.expanded"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"expanded"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/jest-matchers.html#tobeexpanded",children:[(0,r.jsx)(s.code,{children:"toBeExpanded()"})," / ",(0,r.jsx)(s.code,{children:"toBeCollapsed()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"value"}),": Filter elements by their accessibility value, based on either ",(0,r.jsx)(s.code,{children:"aria-valuemin"}),", ",(0,r.jsx)(s.code,{children:"aria-valuemax"}),", ",(0,r.jsx)(s.code,{children:"aria-valuenow"}),", ",(0,r.jsx)(s.code,{children:"aria-valuetext"})," or ",(0,r.jsx)(s.code,{children:"accessibilityValue"})," props. Accessiblity value conceptually consists of numeric ",(0,r.jsx)(s.code,{children:"min"}),", ",(0,r.jsx)(s.code,{children:"max"})," and ",(0,r.jsx)(s.code,{children:"now"})," entries, as well as string ",(0,r.jsx)(s.code,{children:"text"})," entry."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See React Native ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilityvalue",rel:"noopener noreferrer",target:"_blank",children:"accessibilityValue"})," docs to learn more about the accessibility value concept."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/jest-matchers.html#tohaveaccessibilityvalue",children:(0,r.jsx)(s.code,{children:"toHaveAccessibilityValue()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.h3,{id:"by-label-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-label-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByLabelText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByLabelText, getAllByLabelText, queryByLabelText, queryAllByLabelText, findByLabelText, findAllByLabelText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," with matching label:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["either by matching ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#aria-label",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"aria-label"})}),"/",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitylabel",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessibilityLabel"})})," prop"]}),"\n",(0,r.jsxs)(s.li,{children:["or by matching text content of view referenced by ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#aria-labelledby-android",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"aria-labelledby"})}),"/",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitylabelledby-android",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessibilityLabelledBy"})})," prop"]}),"\n",(0,r.jsxs)(s.li,{children:["or by matching the ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/image#alt",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"alt"})})," prop on ",(0,r.jsx)(s.code,{children:"Image"})," elements"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["When ",(0,r.jsx)(s.code,{children:"accessibilityLabelledBy"})," references multiple elements with an array, their text content is joined with spaces in the referenced order and matched as a single label. ",(0,r.jsx)(s.code,{children:"aria-labelledby"})," follows React Native's single ",(0,r.jsx)(s.code,{children:"nativeID"})," value behavior."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'my-label'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-placeholder-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-placeholder-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByPlaceholderText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByPlaceholderText, getAllByPlaceholderText, queryByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," for a ",(0,r.jsx)(s.code,{children:"TextInput"})," with a matching placeholder – may be a string or regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-display-value",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-display-value",children:"#"}),(0,r.jsx)(s.code,{children:"*ByDisplayValue"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByDisplayValue, getAllByDisplayValue, queryByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByDisplayValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" value: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," for a ",(0,r.jsx)(s.code,{children:"TextInput"})," with a matching display value – may be a string or regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByDisplayValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByText, getAllByText, queryByText, queryAllByText, findByText, findAllByText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," with matching text – may be a string or regular expression."]}),"\n",(0,r.jsxs)(s.p,{children:["This method will join ",(0,r.jsx)(s.code,{children:""})," siblings to find matches, similarly to ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/text#containers",rel:"noopener noreferrer",target:"_blank",children:"how React Native handles these components"}),". This will allow for querying for strings that will be visually rendered together, but may be semantically separate React components."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'banana'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-hint-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-hint-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByHintText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByA11yHint, getAllByA11yHint, queryByA11yHint, queryAllByA11yHint, findByA11yHint, findAllByA11yHint\ngetByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint, findByAccessibilityHint, findAllByAccessibilityHint\ngetByHintText, getAllByHintText, queryByHintText, queryAllByHintText, findByHintText, findAllByHintText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByHintText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" hint: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"accessibilityHint"})," prop."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByHintText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Plays a song'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nPlease consult ",(0,r.jsxs)(s.a,{href:"https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint",rel:"noopener noreferrer",target:"_blank",children:["Apple guidelines on how ",(0,r.jsx)(s.code,{children:"accessibilityHint"})," should be used"]}),"."]})}),"\n",(0,r.jsxs)(s.h3,{id:"by-test-id",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-test-id",children:"#"}),(0,r.jsx)(s.code,{children:"*ByTestId"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByTestId, getAllByTestId, queryByTestId, queryAllByTestId, findByTestId, findAllByTestId"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByTestId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" testId: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): TestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"TestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"testID"})," prop. ",(0,r.jsx)(s.code,{children:"testID"})," – may be a string or a regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'unique-id'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nFollowing ",(0,r.jsx)(s.a,{href:"https://testing-library.com/docs/guiding-principles",rel:"noopener noreferrer",target:"_blank",children:"the guiding principles"}),", use this only when other queries don't work for your use case. ",(0,r.jsx)(s.code,{children:"testID"})," attributes don't resemble how your software is used and should be avoided when possible. They're useful for end-to-end testing on real devices, e.g. with Detox. Learn more from the blog post ",(0,r.jsx)(s.a,{href:"https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change",rel:"noopener noreferrer",target:"_blank",children:'"Making your UI tests resilient to change"'}),"."]})}),"\n",(0,r.jsxs)(s.h3,{id:"common-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#common-options",children:"#"}),"Common options"]}),"\n",(0,r.jsxs)(s.p,{children:["Usually query first argument can be a ",(0,r.jsx)(s.strong,{children:"string"})," or a ",(0,r.jsx)(s.strong,{children:"regex"}),". All queries take at least the ",(0,r.jsx)(s.a,{href:"#hidden-option",children:(0,r.jsx)(s.code,{children:"hidden"})})," option as an optionnal second argument and some queries accept more options which change string matching behaviour. See ",(0,r.jsx)(s.a,{href:"#textmatch",children:"TextMatch"})," for more info."]}),"\n",(0,r.jsxs)(s.h4,{id:"includehiddenelements-option",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#includehiddenelements-option",children:"#"}),(0,r.jsx)(s.code,{children:"includeHiddenElements"})," option"]}),"\n",(0,r.jsxs)(s.p,{children:["All queries have the ",(0,r.jsx)(s.code,{children:"includeHiddenElements"})," option which affects whether ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/misc/accessibility.html#ishiddenfromaccessibility",children:"elements hidden from accessibility"})," are matched by the query. By default queries will not match hidden elements, because the users of the app would not be able to see such elements."]}),"\n",(0,r.jsxs)(s.p,{children:["You can configure the default value with the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/config.html#configure",children:[(0,r.jsx)(s.code,{children:"configure"})," function"]}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["This option is also available as ",(0,r.jsx)(s.code,{children:"hidden"})," alias for compatibility with ",(0,r.jsx)(s.a,{href:"https://testing-library.com/docs/queries/byrole#hidden",rel:"noopener noreferrer",target:"_blank",children:"React Testing Library"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Examples"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" style"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{{ display"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'none'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }}>Hidden from accessibility);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Exclude hidden elements"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Include hidden elements"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"textmatch-type",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#textmatch-type",children:"#"}),"TextMatch type"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" RegExp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Most of the query APIs take a ",(0,r.jsx)(s.code,{children:"TextMatch"})," as an argument, which means the argument can be either a ",(0,r.jsx)(s.em,{children:"string"})," or ",(0,r.jsx)(s.em,{children:"regex"}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"examples",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#examples",children:"#"}),"Examples"]}),"\n",(0,r.jsx)(s.p,{children:"Given the following render:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World);"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Will ",(0,r.jsx)(s.strong,{children:"find a match"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matching a string:"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'llo Worl'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'hello world'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ignore case-sensitivity"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matching a regex:"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/World/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/world/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match, ignore case"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"^"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"hello world"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string match, ignore case-sensitivity"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Hello W"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"oRlD/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// advanced regex"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Will ",(0,r.jsx)(s.strong,{children:"NOT find a match"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring does not match"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'llo Worl'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string does not match"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Goodbye World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// case-sensitive regex with different case"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello world/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"text-match-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#text-match-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.h4,{id:"precision",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#precision",children:"#"}),"Precision"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Queries that take a ",(0,r.jsx)(s.code,{children:"TextMatch"})," also accept an object as the second argument that can contain options that affect the precision of string matching:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"exact"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),"; matches full strings, case-sensitive. When false, matches substrings and is not case-sensitive.","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"exact"})," has no effect on regex argument."]}),"\n",(0,r.jsxs)(s.li,{children:["In most cases using a ",(0,r.jsx)(s.code,{children:"regex"})," instead of a string gives you more control over fuzzy matching and should be preferred over ",(0,r.jsx)(s.code,{children:"{ exact: false }"}),"."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"normalizer"}),": An optional function which overrides normalization behavior. See ",(0,r.jsx)(s.a,{href:"#normalization",children:"Normalization"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"exact"})," option defaults to ",(0,r.jsx)(s.code,{children:"true"})," but if you want to search for a text slice or make text matching case-insensitive you can override it. That being said we advise you to use regex in more complex scenarios."]}),"\n",(0,r.jsxs)(s.h4,{id:"normalization",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#normalization",children:"#"}),"Normalization"]}),"\n",(0,r.jsx)(s.p,{children:"Before running any matching logic against text, it is automatically normalized. By default, normalization consists of trimming whitespace from the start and end of text, and collapsing multiple adjacent whitespace characters into a single space."}),"\n",(0,r.jsxs)(s.p,{children:["If you want to prevent that normalization, or provide alternative normalization (e.g. to remove Unicode control characters), you can provide a ",(0,r.jsx)(s.code,{children:"normalizer"})," function in the options object. This function will be given a string and is expected to return a normalized version of that string."]}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nSpecifying a value for ",(0,r.jsx)(s.code,{children:"normalizer"})," replaces the built-in normalization, but you can call ",(0,r.jsx)(s.code,{children:"getDefaultNormalizer"})," to obtain a built-in normalizer, either to adjust that normalization or to call it from your own normalizer."]})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getDefaultNormalizer"})," take options object which allows the selection of behaviour:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"trim"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),". Trims leading and trailing whitespace."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"collapseWhitespace"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),". Collapses inner whitespace (newlines, tabs repeated spaces) into a single space."]}),"\n"]}),"\n",(0,r.jsxs)(s.h5,{id:"normalization-examples",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#normalization-examples",children:"#"}),"Normalization Examples"]}),"\n",(0,r.jsx)(s.p,{children:"To perform a match against text without trimming:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getDefaultNormalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ trim"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"To override normalization to remove some Unicode characters whilst keeping some (but not all) of the built-in normalization behavior:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (str) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getDefaultNormalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ trim"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })(str)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".replace"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/[\\u200E-\\u200F]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"*"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"g"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ''"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fapi%2Fqueries.mdx"]={toc:[{id:"accessing-queries",text:"Accessing queries",depth:2},{id:"using-screen-object",text:"Using `screen` object",depth:3},{id:"using-render-result",text:"Using `render` result",depth:3},{id:"query-parts",text:"Query parts",depth:2},{id:"query-variant",text:"Query variant",depth:2},{id:"get-by",text:"`getBy*` queries",depth:3},{id:"get-all-by",text:"`getAllBy*` queries",depth:3},{id:"query-by",text:"`queryBy*` queries",depth:3},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3},{id:"find-by",text:"`findBy*` queries",depth:3},{id:"find-all-by",text:"`findAllBy*` queries",depth:3},{id:"query-predicates",text:"Query predicates",depth:2},{id:"by-role",text:"`*ByRole`",depth:3},{id:"by-role-options",text:"Options",depth:4},{id:"by-label-text",text:"`*ByLabelText`",depth:3},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3},{id:"by-text",text:"`*ByText`",depth:3},{id:"by-hint-text",text:"`*ByHintText`",depth:3},{id:"by-test-id",text:"`*ByTestId`",depth:3},{id:"common-options",text:"Common options",depth:3},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4},{id:"textmatch-type",text:"TextMatch type",depth:2},{id:"examples",text:"Examples",depth:3},{id:"text-match-options",text:"Options",depth:3},{id:"precision",text:"Precision",depth:4},{id:"normalization",text:"Normalization",depth:4}],title:"Queries",headingTitle:"Queries",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/2721.d7340edd68.js b/static/js/async/2721.d7340edd68.js new file mode 100644 index 00000000..71e39e28 --- /dev/null +++ b/static/js/async/2721.d7340edd68.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["2721"],{4536(s,e,n){n.r(e),n.d(e,{default:()=>a});var r=n(4848),o=n(8453),i=n(7425);function l(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"fire-event-api",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fire-event-api",children:"#"}),"Fire Event API"]}),"\n",(0,r.jsxs)(e.h2,{id:"fire-event",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fire-event",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent"})]}),"\n",(0,r.jsxs)(i.Pq,{type:"note",title:"Note",children:[(0,r.jsxs)(e.p,{children:["\nFor common events like ",(0,r.jsx)(e.code,{children:"press"})," or ",(0,r.jsx)(e.code,{children:"type"})," it's recommended to use ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html",children:"User Event API"})," as it offers\nmore realistic event simulation by emitting a sequence of events with proper event objects that mimic React Native runtime behavior."]}),(0,r.jsx)(e.p,{children:"Use Fire Event for cases not supported by User Event and for triggering event handlers on composite components."})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventName"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"[])"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"fireEvent"})," API allows you to trigger all kinds of event handlers on both host and composite components. It will try to invoke a single event handler traversing the component tree bottom-up from passed element and trying to find enabled event handler named ",(0,r.jsx)(e.code,{children:"onXxx"})," when ",(0,r.jsx)(e.code,{children:"xxx"})," is the name of the event passed."]}),"\n",(0,r.jsx)(e.p,{children:"Unlike User Event, this API does not automatically pass event object to event handler, this is responsibility of the user to construct such object."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'fire changeText event'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onEventMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // MyComponent renders TextInput which has a placeholder 'Enter details'"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // and with `onChangeText` bound to handleChangeText"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" handleChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onEventMock} />"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'change'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'onChangeText'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'ab'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(onEventMock)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'ab'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\n",(0,r.jsx)(e.code,{children:"fireEvent"})," performs checks that should prevent events firing on disabled elements."]})}),"\n",(0,r.jsxs)(e.p,{children:["An example using ",(0,r.jsx)(e.code,{children:"fireEvent"})," with native events that aren't already aliased by the ",(0,r.jsx)(e.code,{children:"fireEvent"})," api."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onBlurMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"my placeholder"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onBlur"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onBlurMock} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// you can omit the `on` prefix"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'my placeholder'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'blur'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["FireEvent exposes convenience methods for common events like: ",(0,r.jsx)(e.code,{children:"press"}),", ",(0,r.jsx)(e.code,{children:"changeText"}),", ",(0,r.jsx)(e.code,{children:"scroll"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"press",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#press",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.press"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nIt is recommended to use the User Event ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#press",children:(0,r.jsx)(e.code,{children:"press()"})})," helper instead as it offers more realistic simulation of press interaction, including pressable support."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".press: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element: ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data: Array"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" void"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"press"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TouchableOpacity } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onPressMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" eventData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pageX"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TouchableOpacity"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onPressMock}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Press me"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventData);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(onPressMock)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(eventData);"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"change-text",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#change-text",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.changeText"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nIt is recommended to use the User Event ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#type",children:(0,r.jsx)(e.code,{children:"type()"})})," helper instead as it offers more realistic simulation of text change interaction, including key-by-key typing, element focus, and other editing events."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".changeText: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element: ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data: Array"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" void"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"changeText"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onChangeTextMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" CHANGE_TEXT"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'content'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Enter data"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onChangeTextMock} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".changeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter data'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" CHANGE_TEXT"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"scroll",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#scroll",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.scroll"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nPrefer using ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#scrollto",children:(0,r.jsx)(e.code,{children:"user.scrollTo"})})," over ",(0,r.jsx)(e.code,{children:"fireEvent.scroll"})," for ",(0,r.jsx)(e.code,{children:"ScrollView"}),", ",(0,r.jsx)(e.code,{children:"FlatList"}),", and ",(0,r.jsx)(e.code,{children:"SectionList"})," components. User Event provides a more realistic event simulation based on React Native runtime behavior."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".scroll: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element: ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data: Array"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" void"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"scroll"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsxs)(e.h4,{id:"on-a-scrollview",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#on-a-scrollview",children:"#"}),"On a ",(0,r.jsx)(e.code,{children:"ScrollView"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { ScrollView"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onScrollMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" eventData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" contentOffset"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" y"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 200"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ScrollView"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onScroll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onScrollMock}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">XD"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".scroll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'scroll-view'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventData);"})]})]})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nPrefer using ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#scrollto",children:(0,r.jsx)(e.code,{children:"user.scrollTo"})})," over ",(0,r.jsx)(e.code,{children:"fireEvent.scroll"})," for ",(0,r.jsx)(e.code,{children:"ScrollView"}),", ",(0,r.jsx)(e.code,{children:"FlatList"}),", and ",(0,r.jsx)(e.code,{children:"SectionList"})," components. User Event provides a more realistic event simulation based on React Native runtime behavior."]})}),"\n",(0,r.jsxs)(e.h2,{id:"fire-event-async",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fire-event-async",children:"#"}),(0,r.jsx)(e.code,{children:"fireEventAsync"})]}),"\n",(0,r.jsx)(i.Pq,{type:"info",title:"RNTL minimal version",children:(0,r.jsx)(e.p,{children:"This API requires RNTL v13.3.0 or later."})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEventAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventName"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"[]"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"fireEventAsync"})," function is the async version of ",(0,r.jsx)(e.a,{href:"#fire-event",children:(0,r.jsx)(e.code,{children:"fireEvent"})})," designed for working with React 19 and React Suspense. This function uses async ",(0,r.jsx)(e.code,{children:"act"})," function internally to ensure all pending React updates are executed during event handling."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEventAsync } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'fire event test'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MySuspenseComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEventAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'press'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Action completed'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Like ",(0,r.jsx)(e.code,{children:"fireEvent"}),", ",(0,r.jsx)(e.code,{children:"fireEventAsync"})," also provides convenience methods for common events: ",(0,r.jsx)(e.code,{children:"fireEventAsync.press"}),", ",(0,r.jsx)(e.code,{children:"fireEventAsync.changeText"}),", and ",(0,r.jsx)(e.code,{children:"fireEventAsync.scroll"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"async-press",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-press",children:"#"}),(0,r.jsx)(e.code,{children:"fireEventAsync.press"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nIt is recommended to use the User Event ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#press",children:(0,r.jsx)(e.code,{children:"press()"})})," helper instead as it offers more realistic simulation of press interaction, including pressable support."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEventAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".press: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element: ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data: Array"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Async version of ",(0,r.jsx)(e.a,{href:"#press",children:(0,r.jsx)(e.code,{children:"fireEvent.press"})})," designed for React 19 and React Suspense. Use when ",(0,r.jsx)(e.code,{children:"press"})," event handlers trigger suspense boundaries."]}),"\n",(0,r.jsxs)(e.h3,{id:"async-change-text",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-change-text",children:"#"}),(0,r.jsx)(e.code,{children:"fireEventAsync.changeText"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nIt is recommended to use the User Event ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#type",children:(0,r.jsx)(e.code,{children:"type()"})})," helper instead as it offers more realistic simulation of text change interaction, including key-by-key typing, element focus, and other editing events."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEventAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".changeText: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element: ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data: Array"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Async version of ",(0,r.jsx)(e.a,{href:"#change-text",children:(0,r.jsx)(e.code,{children:"fireEvent.changeText"})})," designed for React 19 and React Suspense. Use when ",(0,r.jsx)(e.code,{children:"changeText"})," event handlers trigger suspense boundaries."]}),"\n",(0,r.jsxs)(e.h3,{id:"async-scroll",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-scroll",children:"#"}),(0,r.jsx)(e.code,{children:"fireEventAsync.scroll"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nPrefer using ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#scrollto",children:(0,r.jsx)(e.code,{children:"user.scrollTo"})})," over ",(0,r.jsx)(e.code,{children:"fireEventAsync.scroll"})," for ",(0,r.jsx)(e.code,{children:"ScrollView"}),", ",(0,r.jsx)(e.code,{children:"FlatList"}),", and ",(0,r.jsx)(e.code,{children:"SectionList"})," components. User Event provides a more realistic event simulation based on React Native runtime behavior."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEventAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".scroll: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element: ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data: Array"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Async version of ",(0,r.jsx)(e.a,{href:"#scroll",children:(0,r.jsx)(e.code,{children:"fireEvent.scroll"})})," designed for React 19 and React Suspense. Use when ",(0,r.jsx)(e.code,{children:"scroll"})," event handlers trigger suspense boundaries."]})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fapi%2Fevents%2Ffire-event.mdx"]={toc:[{id:"fire-event",text:"`fireEvent`",depth:2},{id:"press",text:"`fireEvent.press`",depth:3},{id:"change-text",text:"`fireEvent.changeText`",depth:3},{id:"scroll",text:"`fireEvent.scroll`",depth:3},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4},{id:"fire-event-async",text:"`fireEventAsync`",depth:2},{id:"async-press",text:"`fireEventAsync.press`",depth:3},{id:"async-change-text",text:"`fireEventAsync.changeText`",depth:3},{id:"async-scroll",text:"`fireEventAsync.scroll`",depth:3}],title:"Fire Event API",headingTitle:"Fire Event API",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/2721.f7d5a21d1e.js b/static/js/async/2721.f7d5a21d1e.js deleted file mode 100644 index 1295385a..00000000 --- a/static/js/async/2721.f7d5a21d1e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["2721"],{4536(s,e,n){n.r(e),n.d(e,{default:()=>a});var r=n(4848),o=n(8453),i=n(7425);function l(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"fire-event-api",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fire-event-api",children:"#"}),"Fire Event API"]}),"\n",(0,r.jsxs)(e.h2,{id:"fire-event",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fire-event",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent"})]}),"\n",(0,r.jsxs)(i.Pq,{type:"note",title:"Note",children:[(0,r.jsxs)(e.p,{children:["\nFor common events like ",(0,r.jsx)(e.code,{children:"press"})," or ",(0,r.jsx)(e.code,{children:"type"})," it's recommended to use ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html",children:"User Event API"})," as it offers\nmore realistic event simulation by emitting a sequence of events with proper event objects that mimic React Native runtime behavior."]}),(0,r.jsx)(e.p,{children:"Use Fire Event for cases not supported by User Event and for triggering event handlers on composite components."})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventName"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"[])"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"fireEvent"})," API allows you to trigger all kinds of event handlers on both host and composite components. It will try to invoke a single event handler traversing the component tree bottom-up from passed element and trying to find enabled event handler named ",(0,r.jsx)(e.code,{children:"onXxx"})," when ",(0,r.jsx)(e.code,{children:"xxx"})," is the name of the event passed."]}),"\n",(0,r.jsx)(e.p,{children:"Unlike User Event, this API does not automatically pass event object to event handler, this is responsibility of the user to construct such object."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'fire changeText event'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onEventMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // MyComponent renders TextInput which has a placeholder 'Enter details'"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // and with `onChangeText` bound to handleChangeText"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" handleChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onEventMock} />"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'change'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'onChangeText'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'ab'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(onEventMock)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'ab'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\n",(0,r.jsx)(e.code,{children:"fireEvent"})," performs checks that should prevent events firing on disabled elements."]})}),"\n",(0,r.jsxs)(e.p,{children:["An example using ",(0,r.jsx)(e.code,{children:"fireEvent"})," with native events that aren't already aliased by the ",(0,r.jsx)(e.code,{children:"fireEvent"})," api."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onBlurMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"my placeholder"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onBlur"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onBlurMock} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// you can omit the `on` prefix"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'my placeholder'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'blur'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["FireEvent exposes convenience methods for common events like: ",(0,r.jsx)(e.code,{children:"press"}),", ",(0,r.jsx)(e.code,{children:"changeText"}),", ",(0,r.jsx)(e.code,{children:"scroll"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"press",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#press",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.press"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nIt is recommended to use the User Event ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#press",children:(0,r.jsx)(e.code,{children:"press()"})})," helper instead as it offers more realistic simulation of press interaction, including pressable support."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".press: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element: ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data: Array"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" void"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"press"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TouchableOpacity } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onPressMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" eventData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pageX"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TouchableOpacity"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onPressMock}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Press me"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventData);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(onPressMock)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(eventData);"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"change-text",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#change-text",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.changeText"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nIt is recommended to use the User Event ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#type",children:(0,r.jsx)(e.code,{children:"type()"})})," helper instead as it offers more realistic simulation of text change interaction, including key-by-key typing, element focus, and other editing events."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".changeText: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element: ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data: Array"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" void"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"changeText"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onChangeTextMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" CHANGE_TEXT"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'content'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Enter data"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onChangeTextMock} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".changeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter data'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" CHANGE_TEXT"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"scroll",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#scroll",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.scroll"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nPrefer using ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#scrollto",children:(0,r.jsx)(e.code,{children:"user.scrollTo"})})," over ",(0,r.jsx)(e.code,{children:"fireEvent.scroll"})," for ",(0,r.jsx)(e.code,{children:"ScrollView"}),", ",(0,r.jsx)(e.code,{children:"FlatList"}),", and ",(0,r.jsx)(e.code,{children:"SectionList"})," components. User Event provides a more realistic event simulation based on React Native runtime behavior."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".scroll: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element: ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data: Array"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" void"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"scroll"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsxs)(e.h4,{id:"on-a-scrollview",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#on-a-scrollview",children:"#"}),"On a ",(0,r.jsx)(e.code,{children:"ScrollView"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { ScrollView"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onScrollMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" eventData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" contentOffset"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" y"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 200"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ScrollView"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onScroll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onScrollMock}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">XD"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".scroll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'scroll-view'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventData);"})]})]})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nPrefer using ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#scrollto",children:(0,r.jsx)(e.code,{children:"user.scrollTo"})})," over ",(0,r.jsx)(e.code,{children:"fireEvent.scroll"})," for ",(0,r.jsx)(e.code,{children:"ScrollView"}),", ",(0,r.jsx)(e.code,{children:"FlatList"}),", and ",(0,r.jsx)(e.code,{children:"SectionList"})," components. User Event provides a more realistic event simulation based on React Native runtime behavior."]})}),"\n",(0,r.jsxs)(e.h2,{id:"fire-event-async",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fire-event-async",children:"#"}),(0,r.jsx)(e.code,{children:"fireEventAsync"})]}),"\n",(0,r.jsx)(i.Pq,{type:"info",title:"RNTL minimal version",children:(0,r.jsx)(e.p,{children:"This API requires RNTL v13.3.0 or later."})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEventAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventName"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"[]"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"fireEventAsync"})," function is the async version of ",(0,r.jsx)(e.a,{href:"#fire-event",children:(0,r.jsx)(e.code,{children:"fireEvent"})})," designed for working with React 19 and React Suspense. This function uses async ",(0,r.jsx)(e.code,{children:"act"})," function internally to ensure all pending React updates are executed during event handling."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEventAsync } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'fire event test'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MySuspenseComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEventAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'press'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Action completed'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Like ",(0,r.jsx)(e.code,{children:"fireEvent"}),", ",(0,r.jsx)(e.code,{children:"fireEventAsync"})," also provides convenience methods for common events: ",(0,r.jsx)(e.code,{children:"fireEventAsync.press"}),", ",(0,r.jsx)(e.code,{children:"fireEventAsync.changeText"}),", and ",(0,r.jsx)(e.code,{children:"fireEventAsync.scroll"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"async-press",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-press",children:"#"}),(0,r.jsx)(e.code,{children:"fireEventAsync.press"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nIt is recommended to use the User Event ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#press",children:(0,r.jsx)(e.code,{children:"press()"})})," helper instead as it offers more realistic simulation of press interaction, including pressable support."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEventAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".press: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element: ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data: Array"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Async version of ",(0,r.jsx)(e.a,{href:"#press",children:(0,r.jsx)(e.code,{children:"fireEvent.press"})})," designed for React 19 and React Suspense. Use when ",(0,r.jsx)(e.code,{children:"press"})," event handlers trigger suspense boundaries."]}),"\n",(0,r.jsxs)(e.h3,{id:"async-change-text",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-change-text",children:"#"}),(0,r.jsx)(e.code,{children:"fireEventAsync.changeText"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nIt is recommended to use the User Event ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#type",children:(0,r.jsx)(e.code,{children:"type()"})})," helper instead as it offers more realistic simulation of text change interaction, including key-by-key typing, element focus, and other editing events."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEventAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".changeText: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element: ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data: Array"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Async version of ",(0,r.jsx)(e.a,{href:"#change-text",children:(0,r.jsx)(e.code,{children:"fireEvent.changeText"})})," designed for React 19 and React Suspense. Use when ",(0,r.jsx)(e.code,{children:"changeText"})," event handlers trigger suspense boundaries."]}),"\n",(0,r.jsxs)(e.h3,{id:"async-scroll",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-scroll",children:"#"}),(0,r.jsx)(e.code,{children:"fireEventAsync.scroll"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nPrefer using ",(0,r.jsx)(e.a,{href:"/docs/api/events/user-event.html#scrollto",children:(0,r.jsx)(e.code,{children:"user.scrollTo"})})," over ",(0,r.jsx)(e.code,{children:"fireEventAsync.scroll"})," for ",(0,r.jsx)(e.code,{children:"ScrollView"}),", ",(0,r.jsx)(e.code,{children:"FlatList"}),", and ",(0,r.jsx)(e.code,{children:"SectionList"})," components. User Event provides a more realistic event simulation based on React Native runtime behavior."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEventAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".scroll: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" element: ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data: Array"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Async version of ",(0,r.jsx)(e.a,{href:"#scroll",children:(0,r.jsx)(e.code,{children:"fireEvent.scroll"})})," designed for React 19 and React Suspense. Use when ",(0,r.jsx)(e.code,{children:"scroll"})," event handlers trigger suspense boundaries."]})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fapi%2Fevents%2Ffire-event.mdx"]={toc:[{id:"fire-event",text:"`fireEvent`",depth:2},{id:"press",text:"`fireEvent.press`",depth:3},{id:"change-text",text:"`fireEvent.changeText`",depth:3},{id:"scroll",text:"`fireEvent.scroll`",depth:3},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4},{id:"fire-event-async",text:"`fireEventAsync`",depth:2},{id:"async-press",text:"`fireEventAsync.press`",depth:3},{id:"async-change-text",text:"`fireEventAsync.changeText`",depth:3},{id:"async-scroll",text:"`fireEventAsync.scroll`",depth:3}],title:"Fire Event API",headingTitle:"Fire Event API",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/3107.7f9d7e1692.js b/static/js/async/3107.2fe9eca60f.js similarity index 55% rename from static/js/async/3107.7f9d7e1692.js rename to static/js/async/3107.2fe9eca60f.js index 6fd0d1ae..453cfd7a 100644 --- a/static/js/async/3107.7f9d7e1692.js +++ b/static/js/async/3107.2fe9eca60f.js @@ -1 +1 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["3107"],{9038(s,n,e){e.r(n),e.d(n,{default:()=>a});var r=e(4848),o=e(8453),i=e(7425);function l(s){let n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"jotai",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#jotai",children:"#"}),"Jotai"]}),"\n",(0,r.jsxs)(n.h2,{id:"introduction",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#introduction",children:"#"}),"Introduction"]}),"\n",(0,r.jsx)(n.p,{children:"Jotai is a global state management library for React that uses an atomic approach to optimize\nrenders and solve issues like extra re-renders and the need for memoization. It scales from simple\nstate management to complex enterprise applications, offering utilities and extensions to enhance\nthe developer experience."}),"\n",(0,r.jsxs)(n.h2,{id:"task-list-example",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#task-list-example",children:"#"}),"Task List Example"]}),"\n",(0,r.jsx)(n.p,{children:"Let's assume we have a simple task list component that uses Jotai for state management. The\ncomponent has a list of tasks, a text input for typing new task name and a button to add a new task to the list."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/TaskList.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { nanoid } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'nanoid'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(newTaskTitleAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" handleAddTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((tasks) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" nanoid"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ]);"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".map"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((task) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" key"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".id} "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"testID"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"task-item"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".title}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ))}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"length"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ?"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">No tasks, start by adding one... "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityLabel"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task"'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task..."'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{newTaskTitle}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" onChangeText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{(text) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(text)}"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{handleAddTask}>"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">Add Task"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"starting-with-a-simple-test",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#starting-with-a-simple-test",children:"#"}),"Starting with a Simple Test"]}),"\n",(0,r.jsxs)(n.p,{children:["We can test our ",(0,r.jsx)(n.code,{children:"TaskList"})," component using React Native Testing Library's (RNTL) regular ",(0,r.jsx)(n.code,{children:"render"}),"\nfunction. Although it is sufficient to test the empty state of the ",(0,r.jsx)(n.code,{children:"TaskList"})," component, it is not\nenough to test the component with initial tasks present in the list."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" userEvent } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './test-utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { TaskList } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../TaskList'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders an empty task list'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/no tasks, start by adding one/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function-to-populate-jotai-atoms-with-initial-values",children:"#"}),"Custom Render Function to populate Jotai Atoms with Initial Values"]}),"\n",(0,r.jsxs)(n.p,{children:["To test the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks, we need to be able to populate the ",(0,r.jsx)(n.code,{children:"tasksAtom"})," with\ninitial values. We can create a custom render function that uses Jotai's ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook to\nhydrate the atoms with initial values. This function will accept the initial atoms and their\ncorresponding values as an argument."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/__tests__/test-utils.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useHydrateAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { PrimitiveAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/vanilla/atom'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Jotai types are not well exported, so we will make our life easier by using `any`."})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"> "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PrimitiveAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" interface"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * Renders a React component with Jotai atoms for testing purposes."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" component - The React component to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" options - The render options including the initial atom values."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The render result from `@testing-library/react-native`."})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" component"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".initialValues}>{component}"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PropsWithChildren"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<{"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}>;"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * A wrapper component that hydrates Jotai atoms with initial values."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" initialValues - The initial values for the Jotai atoms."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" children - The child components to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The rendered children."})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"({ initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useHydrateAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(initialValues);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children;"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-the-tasklist-component-with-initial-tasks",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-the-tasklist-component-with-initial-tasks",children:"#"}),"Testing the ",(0,r.jsx)(n.code,{children:"TaskList"})," Component with initial tasks"]}),"\n",(0,r.jsxs)(n.p,{children:["We can now use the ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," function to render the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks. The\n",(0,r.jsx)(n.code,{children:"initialValues"})," property will contain the ",(0,r.jsx)(n.code,{children:"tasksAtom"}),", ",(0,r.jsx)(n.code,{children:"newTaskTitleAtom"})," and their initial values. We can then test the component to ensure that the initial tasks are rendered correctly."]}),"\n",(0,r.jsx)(i.Pq,{type:"info",title:"Info",children:(0,r.jsx)(n.p,{children:"\nIn our test, we populated only one atom and its initial value, but you can add other Jotai atoms and their corresponding values to the initialValues array as needed."})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [{ id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '1'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy bread'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders a to do list with 1 items initially, and adds a new item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy bread/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/new task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /add task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy almond milk/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"modifying-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#modifying-atom-outside-of-react-components",children:"#"}),"Modifying atom outside of React components"]}),"\n",(0,r.jsx)(n.p,{children:"In several cases, you might need to change an atom's state outside a React component. In our case,\nwe have a set of functions to get tasks and set tasks, which change the state of the task list atom."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/state.ts",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" createStore } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[]>([]);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Available for use outside React components"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" createStore"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Selectors"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".get"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Actions"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" task]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-atom-outside-of-react-components",children:"#"}),"Testing atom outside of React components"]}),"\n",(0,r.jsxs)(n.p,{children:["You can test the ",(0,r.jsx)(n.code,{children:"getAllTasks"})," and ",(0,r.jsx)(n.code,{children:"addTask"})," functions outside the React component's scope by setting\nthe initial to-do items in the store and then checking if the functions work as expected.\nNo special setup is required to test these functions, as ",(0,r.jsx)(n.code,{children:"store.set"})," is available by default by\nJotai."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"//..."})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'modify store outside of React component'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" // Set the initial to do items in the store"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '2'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"conclusion",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#conclusion",children:"#"}),"Conclusion"]}),"\n",(0,r.jsxs)(n.p,{children:["Testing a component or a function that depends on Jotai atoms is straightforward with the help of\nthe ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook. We've seen how to create a custom render function ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," that\nsets up atoms and their initial values for testing purposes. We've also seen how to test functions\nthat change the state of atoms outside React components. This approach allows us to test components\nin different states and scenarios, ensuring they behave as expected."]})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}={...(0,o.R)(),...s.components};return n?(0,r.jsx)(n,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["14.x%2Fcookbook%2Fstate-management%2Fjotai.md"]={toc:[{id:"introduction",text:"Introduction",depth:2},{id:"task-list-example",text:"Task List Example",depth:2},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2},{id:"conclusion",text:"Conclusion",depth:2}],title:"Jotai",headingTitle:"Jotai",frontmatter:{}}}}]); \ No newline at end of file +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["3107"],{9038(s,n,e){e.r(n),e.d(n,{default:()=>a});var r=e(4848),o=e(8453),i=e(7425);function l(s){let n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"jotai",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#jotai",children:"#"}),"Jotai"]}),"\n",(0,r.jsxs)(n.h2,{id:"introduction",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#introduction",children:"#"}),"Introduction"]}),"\n",(0,r.jsx)(n.p,{children:"Jotai is a global state management library for React that uses an atomic approach to optimize\nrenders and solve issues like extra re-renders and the need for memoization. It scales from simple\nstate management to complex enterprise applications, offering utilities and extensions to enhance\nthe developer experience."}),"\n",(0,r.jsxs)(n.h2,{id:"task-list-example",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#task-list-example",children:"#"}),"Task List Example"]}),"\n",(0,r.jsx)(n.p,{children:"Let's assume we have a simple task list component that uses Jotai for state management. The\ncomponent has a list of tasks, a text input for typing new task name and a button to add a new task to the list."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/TaskList.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { nanoid } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'nanoid'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(newTaskTitleAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" handleAddTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((tasks) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" nanoid"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ]);"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".map"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((task) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" key"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".id} "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"testID"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"task-item"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".title}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ))}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"length"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ?"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">No tasks, start by adding one... "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityLabel"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task"'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task..."'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{newTaskTitle}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" onChangeText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{(text) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(text)}"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{handleAddTask}>"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">Add Task"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"starting-with-a-simple-test",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#starting-with-a-simple-test",children:"#"}),"Starting with a Simple Test"]}),"\n",(0,r.jsxs)(n.p,{children:["We can test our ",(0,r.jsx)(n.code,{children:"TaskList"})," component using React Native Testing Library's (RNTL) regular ",(0,r.jsx)(n.code,{children:"render"}),"\nfunction. Although it is sufficient to test the empty state of the ",(0,r.jsx)(n.code,{children:"TaskList"})," component, it is not\nenough to test the component with initial tasks present in the list."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" userEvent } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './test-utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { TaskList } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../TaskList'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders an empty task list'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/no tasks, start by adding one/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function-to-populate-jotai-atoms-with-initial-values",children:"#"}),"Custom Render Function to populate Jotai Atoms with Initial Values"]}),"\n",(0,r.jsxs)(n.p,{children:["To test the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks, we need to be able to populate the ",(0,r.jsx)(n.code,{children:"tasksAtom"})," with\ninitial values. We can create a custom render function that uses Jotai's ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook to\nhydrate the atoms with initial values. This function will accept the initial atoms and their\ncorresponding values as an argument."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/__tests__/test-utils.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useHydrateAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { PrimitiveAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/vanilla/atom'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Jotai types are not well exported, so we will make our life easier by using `any`."})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"> "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PrimitiveAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" interface"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * Renders a React component with Jotai atoms for testing purposes."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" component - The React component to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" options - The render options including the initial atom values."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The render result from `@testing-library/react-native`."})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" component"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".initialValues}>{component}"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PropsWithChildren"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<{"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}>;"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * A wrapper component that hydrates Jotai atoms with initial values."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" initialValues - The initial values for the Jotai atoms."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" children - The child components to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The rendered children."})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"({ initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useHydrateAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(initialValues);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children;"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-the-tasklist-component-with-initial-tasks",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-the-tasklist-component-with-initial-tasks",children:"#"}),"Testing the ",(0,r.jsx)(n.code,{children:"TaskList"})," Component with initial tasks"]}),"\n",(0,r.jsxs)(n.p,{children:["We can now use the ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," function to render the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks. The\n",(0,r.jsx)(n.code,{children:"initialValues"})," property will contain the ",(0,r.jsx)(n.code,{children:"tasksAtom"}),", ",(0,r.jsx)(n.code,{children:"newTaskTitleAtom"})," and their initial values. We can then test the component to ensure that the initial tasks are rendered correctly."]}),"\n",(0,r.jsx)(i.Pq,{type:"info",title:"Info",children:(0,r.jsx)(n.p,{children:"\nIn our test, we populated only one atom and its initial value, but you can add other Jotai atoms and their corresponding values to the initialValues array as needed."})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [{ id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '1'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy bread'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders a to do list with 1 items initially, and adds a new item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy bread/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/new task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /add task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy almond milk/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"modifying-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#modifying-atom-outside-of-react-components",children:"#"}),"Modifying atom outside of React components"]}),"\n",(0,r.jsx)(n.p,{children:"In several cases, you might need to change an atom's state outside a React component. In our case,\nwe have a set of functions to get tasks and set tasks, which change the state of the task list atom."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/state.ts",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" createStore } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[]>([]);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Available for use outside React components"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" createStore"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Selectors"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".get"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Actions"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" task]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-atom-outside-of-react-components",children:"#"}),"Testing atom outside of React components"]}),"\n",(0,r.jsxs)(n.p,{children:["You can test the ",(0,r.jsx)(n.code,{children:"getAllTasks"})," and ",(0,r.jsx)(n.code,{children:"addTask"})," functions outside the React component's scope by setting\nthe initial to-do items in the store and then checking if the functions work as expected.\nNo special setup is required to test these functions, as ",(0,r.jsx)(n.code,{children:"store.set"})," is available by default by\nJotai."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"//..."})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'modify store outside of React component'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" // Set the initial to do items in the store"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '2'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"conclusion",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#conclusion",children:"#"}),"Conclusion"]}),"\n",(0,r.jsxs)(n.p,{children:["Testing a component or a function that depends on Jotai atoms is straightforward with the help of\nthe ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook. We've seen how to create a custom render function ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," that\nsets up atoms and their initial values for testing purposes. We've also seen how to test functions\nthat change the state of atoms outside React components. This approach allows us to test components\nin different states and scenarios, ensuring they behave as expected."]})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}={...(0,o.R)(),...s.components};return n?(0,r.jsx)(n,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["14.x%2Fcookbook%2Fstate-management%2Fjotai.md"]={toc:[{id:"introduction",text:"Introduction",depth:2},{id:"task-list-example",text:"Task List Example",depth:2},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2},{id:"conclusion",text:"Conclusion",depth:2}],title:"Jotai",headingTitle:"Jotai",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/3453.58705d67d5.js b/static/js/async/3453.58705d67d5.js new file mode 100644 index 00000000..162cc140 --- /dev/null +++ b/static/js/async/3453.58705d67d5.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["3453"],{9004(s,e,n){n.r(e),n.d(e,{default:()=>l});var r=n(4848),o=n(8453);function i(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"renderhook-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook-function",children:"#"}),(0,r.jsx)(e.code,{children:"renderHook"})," function"]}),"\n",(0,r.jsxs)(e.h2,{id:"renderhook",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook",children:"#"}),(0,r.jsx)(e.code,{children:"renderHook"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" hookFn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookOptions"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Renders a test component that calls the provided ",(0,r.jsx)(e.code,{children:"callback"}),", including any hooks it calls, every time it renders. Returns a ",(0,r.jsx)(e.a,{href:"#renderhookresult",children:(0,r.jsx)(e.code,{children:"RenderHookResult"})})," object that you can interact with."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { useCount } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../useCount'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should increment count'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Note that you should wrap the calls to functions your hook returns with `act` if they trigger an update of your hook's state to ensure pending useEffects are run before your next assertion."})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// useCount.js"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((previousCount) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" previousCount "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" increment };"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"renderHook"})," function accepts the following arguments:"]}),"\n",(0,r.jsxs)(e.p,{children:["Callback is a function that is called each ",(0,r.jsx)(e.code,{children:"render"})," of the test component. This function should call one or more hooks for testing."]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"props"})," passed into the callback will be the ",(0,r.jsx)(e.code,{children:"initialProps"})," provided in the ",(0,r.jsx)(e.code,{children:"options"})," to ",(0,r.jsx)(e.code,{children:"renderHook"}),", unless new props are provided by a subsequent ",(0,r.jsx)(e.code,{children:"rerender"})," call."]}),"\n",(0,r.jsxs)(e.h3,{id:"options",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),(0,r.jsx)(e.code,{children:"options"})]}),"\n",(0,r.jsxs)(e.p,{children:["A ",(0,r.jsx)(e.code,{children:"RenderHookOptions"})," object to modify the execution of the ",(0,r.jsx)(e.code,{children:"callback"})," function, containing the following properties:"]}),"\n",(0,r.jsxs)(e.h4,{id:"initial-props",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#initial-props",children:"#"}),(0,r.jsx)(e.code,{children:"initialProps"})]}),"\n",(0,r.jsxs)(e.p,{children:["The initial values to pass as ",(0,r.jsx)(e.code,{children:"props"})," to the ",(0,r.jsx)(e.code,{children:"callback"})," function of ",(0,r.jsx)(e.code,{children:"renderHook"}),". The ",(0,r.jsx)(e.code,{children:"Props"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h4,{id:"wrapper",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapper",children:"#"}),(0,r.jsx)(e.code,{children:"wrapper"})]}),"\n",(0,r.jsxs)(e.p,{children:["A React component to wrap the test component in when rendering. This is usually used to add context providers from ",(0,r.jsx)(e.code,{children:"React.createContext"})," for the hook to access with ",(0,r.jsx)(e.code,{children:"useContext"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"concurrent-root",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#concurrent-root",children:"#"}),(0,r.jsx)(e.code,{children:"concurrentRoot"})]}),"\n",(0,r.jsxs)(e.p,{children:["Set to ",(0,r.jsx)(e.code,{children:"false"})," to disable concurrent rendering.\nOtherwise, ",(0,r.jsx)(e.code,{children:"render"})," will default to using concurrent rendering used in the React Native New Architecture."]}),"\n",(0,r.jsxs)(e.h3,{id:"result",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result",children:"#"}),"Result"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"> {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"renderHook"})," function returns an object that has the following properties:"]}),"\n",(0,r.jsxs)(e.h4,{id:"result-1",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result-1",children:"#"}),(0,r.jsx)(e.code,{children:"result"})]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"current"})," value of the ",(0,r.jsx)(e.code,{children:"result"})," will reflect the latest of whatever is returned from the ",(0,r.jsx)(e.code,{children:"callback"})," passed to ",(0,r.jsx)(e.code,{children:"renderHook"}),". The ",(0,r.jsx)(e.code,{children:"Result"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h4,{id:"rerender",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rerender",children:"#"}),(0,r.jsx)(e.code,{children:"rerender"})]}),"\n",(0,r.jsxs)(e.p,{children:["A function to rerender the test component, causing any hooks to be recalculated. If ",(0,r.jsx)(e.code,{children:"newProps"})," are passed, they replace the ",(0,r.jsx)(e.code,{children:"callback"})," function's ",(0,r.jsx)(e.code,{children:"initialProps"})," for subsequent rerenders. The ",(0,r.jsx)(e.code,{children:"Props"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h4,{id:"unmount",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unmount",children:"#"}),(0,r.jsx)(e.code,{children:"unmount"})]}),"\n",(0,r.jsxs)(e.p,{children:["A function to unmount the test component. This is commonly used to trigger cleanup effects for ",(0,r.jsx)(e.code,{children:"useEffect"})," hooks."]}),"\n",(0,r.jsxs)(e.h3,{id:"examples",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#examples",children:"#"}),"Examples"]}),"\n",(0,r.jsxs)(e.p,{children:["Here are some additional examples of using the ",(0,r.jsx)(e.code,{children:"renderHook"})," API."]}),"\n",(0,r.jsxs)(e.h4,{id:"with-initialprops",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-initialprops",children:"#"}),"With ",(0,r.jsx)(e.code,{children:"initialProps"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (initialCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((previousCount) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" previousCount "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" [initialCount]);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" increment };"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should increment count'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((initialCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" initialProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"with-wrapper",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-wrapper",children:"#"}),"With ",(0,r.jsx)(e.code,{children:"wrapper"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should use context value'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ children }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { children"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactNode"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }) {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Context.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"provided"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{children};"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Wrapper });"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"renderhookasync-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhookasync-function",children:"#"}),(0,r.jsx)(e.code,{children:"renderHookAsync"})," function"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHookAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" hookFn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookOptions"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"RenderHookAsyncResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">>;"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Async versions of ",(0,r.jsx)(e.code,{children:"renderHook"})," designed for working with React 19 and React Suspense. This method uses async ",(0,r.jsx)(e.code,{children:"act"})," function internally to ensure all pending React updates are executed during rendering."]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Returns a Promise"}),": Should be awaited"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Async methods"}),": Both ",(0,r.jsx)(e.code,{children:"rerender"})," and ",(0,r.jsx)(e.code,{children:"unmount"})," return Promises and should be awaited"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Suspense support"}),": Compatible with React Suspense boundaries and ",(0,r.jsx)(e.code,{children:"React.use()"})]}),"\n"]}),"\n",(0,r.jsxs)(e.h3,{id:"result-async",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result-async",children:"#"}),"Result"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookAsyncResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"> {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerenderAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" unmountAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"RenderHookAsyncResult"})," differs from ",(0,r.jsx)(e.code,{children:"RenderHookResult"})," in that ",(0,r.jsx)(e.code,{children:"rerenderAsync"})," and ",(0,r.jsx)(e.code,{children:"unmountAsync"})," are async functions that return Promises."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHookAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" act } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should handle async hook behavior'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" rerenderAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHookAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(useAsyncHook);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Test initial state"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".loading)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Wait for async operation to complete"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" new"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((resolve) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setTimeout"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(resolve"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 100"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Re-render to get updated state"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerenderAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".loading)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"renderHookAsync"})," when testing hooks that use React Suspense, ",(0,r.jsx)(e.code,{children:"React.use()"}),", or other concurrent features where re-render timing matters."]})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(i,{...s})}):i(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fapi%2Fmisc%2Frender-hook.mdx"]={toc:[{id:"renderhook",text:"`renderHook`",depth:2},{id:"options",text:"`options`",depth:3},{id:"initial-props",text:"`initialProps`",depth:4},{id:"wrapper",text:"`wrapper`",depth:4},{id:"concurrent-root",text:"`concurrentRoot`",depth:3},{id:"result",text:"Result",depth:3},{id:"result-1",text:"`result`",depth:4},{id:"rerender",text:"`rerender`",depth:4},{id:"unmount",text:"`unmount`",depth:4},{id:"examples",text:"Examples",depth:3},{id:"with-initialprops",text:"With `initialProps`",depth:4},{id:"with-wrapper",text:"With `wrapper`",depth:4},{id:"renderhookasync-function",text:"`renderHookAsync` function",depth:2},{id:"result-async",text:"Result",depth:3}],title:"`renderHook` function",headingTitle:"`renderHook` function",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/3453.8847d1880f.js b/static/js/async/3453.8847d1880f.js deleted file mode 100644 index 6df8032d..00000000 --- a/static/js/async/3453.8847d1880f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["3453"],{9004(s,e,n){n.r(e),n.d(e,{default:()=>l});var r=n(4848),o=n(8453);function i(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"renderhook-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook-function",children:"#"}),(0,r.jsx)(e.code,{children:"renderHook"})," function"]}),"\n",(0,r.jsxs)(e.h2,{id:"renderhook",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook",children:"#"}),(0,r.jsx)(e.code,{children:"renderHook"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" hookFn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookOptions"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Renders a test component that calls the provided ",(0,r.jsx)(e.code,{children:"callback"}),", including any hooks it calls, every time it renders. Returns a ",(0,r.jsx)(e.a,{href:"#renderhookresult",children:(0,r.jsx)(e.code,{children:"RenderHookResult"})})," object that you can interact with."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { useCount } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../useCount'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should increment count'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Note that you should wrap the calls to functions your hook returns with `act` if they trigger an update of your hook's state to ensure pending useEffects are run before your next assertion."})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// useCount.js"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((previousCount) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" previousCount "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" increment };"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"renderHook"})," function accepts the following arguments:"]}),"\n",(0,r.jsxs)(e.p,{children:["Callback is a function that is called each ",(0,r.jsx)(e.code,{children:"render"})," of the test component. This function should call one or more hooks for testing."]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"props"})," passed into the callback will be the ",(0,r.jsx)(e.code,{children:"initialProps"})," provided in the ",(0,r.jsx)(e.code,{children:"options"})," to ",(0,r.jsx)(e.code,{children:"renderHook"}),", unless new props are provided by a subsequent ",(0,r.jsx)(e.code,{children:"rerender"})," call."]}),"\n",(0,r.jsxs)(e.h3,{id:"options",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),(0,r.jsx)(e.code,{children:"options"})]}),"\n",(0,r.jsxs)(e.p,{children:["A ",(0,r.jsx)(e.code,{children:"RenderHookOptions"})," object to modify the execution of the ",(0,r.jsx)(e.code,{children:"callback"})," function, containing the following properties:"]}),"\n",(0,r.jsxs)(e.h4,{id:"initial-props",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#initial-props",children:"#"}),(0,r.jsx)(e.code,{children:"initialProps"})]}),"\n",(0,r.jsxs)(e.p,{children:["The initial values to pass as ",(0,r.jsx)(e.code,{children:"props"})," to the ",(0,r.jsx)(e.code,{children:"callback"})," function of ",(0,r.jsx)(e.code,{children:"renderHook"}),". The ",(0,r.jsx)(e.code,{children:"Props"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h4,{id:"wrapper",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapper",children:"#"}),(0,r.jsx)(e.code,{children:"wrapper"})]}),"\n",(0,r.jsxs)(e.p,{children:["A React component to wrap the test component in when rendering. This is usually used to add context providers from ",(0,r.jsx)(e.code,{children:"React.createContext"})," for the hook to access with ",(0,r.jsx)(e.code,{children:"useContext"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"concurrent-root",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#concurrent-root",children:"#"}),(0,r.jsx)(e.code,{children:"concurrentRoot"})]}),"\n",(0,r.jsxs)(e.p,{children:["Set to ",(0,r.jsx)(e.code,{children:"false"})," to disable concurrent rendering.\nOtherwise, ",(0,r.jsx)(e.code,{children:"render"})," will default to using concurrent rendering used in the React Native New Architecture."]}),"\n",(0,r.jsxs)(e.h3,{id:"result",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result",children:"#"}),"Result"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"> {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"renderHook"})," function returns an object that has the following properties:"]}),"\n",(0,r.jsxs)(e.h4,{id:"result-1",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result-1",children:"#"}),(0,r.jsx)(e.code,{children:"result"})]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"current"})," value of the ",(0,r.jsx)(e.code,{children:"result"})," will reflect the latest of whatever is returned from the ",(0,r.jsx)(e.code,{children:"callback"})," passed to ",(0,r.jsx)(e.code,{children:"renderHook"}),". The ",(0,r.jsx)(e.code,{children:"Result"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h4,{id:"rerender",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rerender",children:"#"}),(0,r.jsx)(e.code,{children:"rerender"})]}),"\n",(0,r.jsxs)(e.p,{children:["A function to rerender the test component, causing any hooks to be recalculated. If ",(0,r.jsx)(e.code,{children:"newProps"})," are passed, they replace the ",(0,r.jsx)(e.code,{children:"callback"})," function's ",(0,r.jsx)(e.code,{children:"initialProps"})," for subsequent rerenders. The ",(0,r.jsx)(e.code,{children:"Props"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h4,{id:"unmount",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unmount",children:"#"}),(0,r.jsx)(e.code,{children:"unmount"})]}),"\n",(0,r.jsxs)(e.p,{children:["A function to unmount the test component. This is commonly used to trigger cleanup effects for ",(0,r.jsx)(e.code,{children:"useEffect"})," hooks."]}),"\n",(0,r.jsxs)(e.h3,{id:"examples",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#examples",children:"#"}),"Examples"]}),"\n",(0,r.jsxs)(e.p,{children:["Here are some additional examples of using the ",(0,r.jsx)(e.code,{children:"renderHook"})," API."]}),"\n",(0,r.jsxs)(e.h4,{id:"with-initialprops",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-initialprops",children:"#"}),"With ",(0,r.jsx)(e.code,{children:"initialProps"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (initialCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((previousCount) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" previousCount "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" [initialCount]);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" increment };"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should increment count'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((initialCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" initialProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"with-wrapper",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-wrapper",children:"#"}),"With ",(0,r.jsx)(e.code,{children:"wrapper"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should use context value'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ children }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { children"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactNode"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }) {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Context.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"provided"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{children};"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Wrapper });"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"renderhookasync-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhookasync-function",children:"#"}),(0,r.jsx)(e.code,{children:"renderHookAsync"})," function"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHookAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" hookFn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookOptions"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"RenderHookAsyncResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">>;"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Async versions of ",(0,r.jsx)(e.code,{children:"renderHook"})," designed for working with React 19 and React Suspense. This method uses async ",(0,r.jsx)(e.code,{children:"act"})," function internally to ensure all pending React updates are executed during rendering."]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Returns a Promise"}),": Should be awaited"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Async methods"}),": Both ",(0,r.jsx)(e.code,{children:"rerender"})," and ",(0,r.jsx)(e.code,{children:"unmount"})," return Promises and should be awaited"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Suspense support"}),": Compatible with React Suspense boundaries and ",(0,r.jsx)(e.code,{children:"React.use()"})]}),"\n"]}),"\n",(0,r.jsxs)(e.h3,{id:"result-async",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result-async",children:"#"}),"Result"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookAsyncResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"> {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerenderAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" unmountAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"RenderHookAsyncResult"})," differs from ",(0,r.jsx)(e.code,{children:"RenderHookResult"})," in that ",(0,r.jsx)(e.code,{children:"rerenderAsync"})," and ",(0,r.jsx)(e.code,{children:"unmountAsync"})," are async functions that return Promises."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHookAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" act } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should handle async hook behavior'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" rerenderAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHookAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(useAsyncHook);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Test initial state"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".loading)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Wait for async operation to complete"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" new"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((resolve) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setTimeout"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(resolve"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 100"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Re-render to get updated state"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerenderAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".loading)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"renderHookAsync"})," when testing hooks that use React Suspense, ",(0,r.jsx)(e.code,{children:"React.use()"}),", or other concurrent features where re-render timing matters."]})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(i,{...s})}):i(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fapi%2Fmisc%2Frender-hook.mdx"]={toc:[{id:"renderhook",text:"`renderHook`",depth:2},{id:"options",text:"`options`",depth:3},{id:"initial-props",text:"`initialProps`",depth:4},{id:"wrapper",text:"`wrapper`",depth:4},{id:"concurrent-root",text:"`concurrentRoot`",depth:3},{id:"result",text:"Result",depth:3},{id:"result-1",text:"`result`",depth:4},{id:"rerender",text:"`rerender`",depth:4},{id:"unmount",text:"`unmount`",depth:4},{id:"examples",text:"Examples",depth:3},{id:"with-initialprops",text:"With `initialProps`",depth:4},{id:"with-wrapper",text:"With `wrapper`",depth:4},{id:"renderhookasync-function",text:"`renderHookAsync` function",depth:2},{id:"result-async",text:"Result",depth:3}],title:"`renderHook` function",headingTitle:"`renderHook` function",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/3783.96e811e090.js b/static/js/async/3783.96e811e090.js new file mode 100644 index 00000000..50619f84 --- /dev/null +++ b/static/js/async/3783.96e811e090.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["3783"],{7130(s,e,n){n.r(e),n.d(e,{default:()=>l});var r=n(4848),o=n(8453);function i(s){let e={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"custom-render-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function",children:"#"}),"Custom ",(0,r.jsx)(e.code,{children:"render"})," function"]}),"\n",(0,r.jsxs)(e.h3,{id:"summary",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,r.jsxs)(e.p,{children:["RNTL exposes the ",(0,r.jsx)(e.code,{children:"render"})," function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests."]}),"\n",(0,r.jsxs)(e.h3,{id:"example",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.ts",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" User"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" theme"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Theme"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ui"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") {"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"UserProvider.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.user "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ThemeProvider.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.theme "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'light'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>{ui}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"custom-render/index.test.tsx",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithProviders } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../test-utils'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen with user'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Jar-Jar'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } });"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello Jar-Jar/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen without user'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello stranger/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Example ",(0,r.jsx)(e.a,{href:"https://github.com/callstack/react-native-testing-library/tree/main/examples/cookbook/custom-render",rel:"noopener noreferrer",target:"_blank",children:"full source code"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"more-info",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#more-info",children:"#"}),"More info"]}),"\n",(0,r.jsxs)(e.h4,{id:"additional-params",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#additional-params",children:"#"}),"Additional params"]}),"\n",(0,r.jsx)(e.p,{children:"A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen for logged in user'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { state"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" loggedInState });"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"multiple-functions",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#multiple-functions",children:"#"}),"Multiple functions"]}),"\n",(0,r.jsx)(e.p,{children:"Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.tsx",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderNavigator"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"async-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-function",children:"#"}),"Async function"]}),"\n",(0,r.jsx)(e.p,{children:"Make it async if you want to put some async setup in your custom render function."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(i,{...s})}):i(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["13.x%2Fcookbook%2Fbasics%2Fcustom-render.md"]={toc:[{id:"summary",text:"Summary",depth:3},{id:"example",text:"Example",depth:3},{id:"more-info",text:"More info",depth:3},{id:"additional-params",text:"Additional params",depth:4},{id:"multiple-functions",text:"Multiple functions",depth:4},{id:"async-function",text:"Async function",depth:4}],title:"Custom `render` function",headingTitle:"Custom `render` function",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/3783.f4fb94edbf.js b/static/js/async/3783.f4fb94edbf.js deleted file mode 100644 index cdc98f1f..00000000 --- a/static/js/async/3783.f4fb94edbf.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["3783"],{7130(s,e,r){r.r(e),r.d(e,{default:()=>l});var n=r(4848),o=r(8453);function i(s){let e={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h1,{id:"custom-render-function",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function",children:"#"}),"Custom ",(0,n.jsx)(e.code,{children:"render"})," function"]}),"\n",(0,n.jsxs)(e.h3,{id:"summary",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,n.jsxs)(e.p,{children:["RNTL exposes the ",(0,n.jsx)(e.code,{children:"render"})," function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests."]}),"\n",(0,n.jsxs)(e.h3,{id:"example",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.ts",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" User"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" theme"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Theme"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"UserProvider.Provider"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.user "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ThemeProvider.Provider"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.theme "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'light'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>{ui}"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"custom-render/index.test.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { screen } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithProviders } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../test-utils'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen with user'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Jar-Jar'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } });"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello Jar-Jar/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen without user'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello stranger/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["Example ",(0,n.jsx)(e.a,{href:"https://github.com/callstack/react-native-testing-library/tree/main/examples/cookbook/custom-render",rel:"noopener noreferrer",target:"_blank",children:"full source code"}),"."]}),"\n",(0,n.jsxs)(e.h3,{id:"more-info",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#more-info",children:"#"}),"More info"]}),"\n",(0,n.jsxs)(e.h4,{id:"additional-params",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#additional-params",children:"#"}),"Additional params"]}),"\n",(0,n.jsx)(e.p,{children:"A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management."}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen for logged in user'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { state"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" loggedInState });"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.h4,{id:"multiple-functions",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#multiple-functions",children:"#"}),"Multiple functions"]}),"\n",(0,n.jsx)(e.p,{children:"Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens."}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderNavigator"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]})]})})}),"\n",(0,n.jsxs)(e.h4,{id:"async-function",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-function",children:"#"}),"Async function"]}),"\n",(0,n.jsx)(e.p,{children:"Make it async if you want to put some async setup in your custom render function."}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithAsync"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(i,{...s})}):i(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["13.x%2Fcookbook%2Fbasics%2Fcustom-render.md"]={toc:[{id:"summary",text:"Summary",depth:3},{id:"example",text:"Example",depth:3},{id:"more-info",text:"More info",depth:3},{id:"additional-params",text:"Additional params",depth:4},{id:"multiple-functions",text:"Multiple functions",depth:4},{id:"async-function",text:"Async function",depth:4}],title:"Custom `render` function",headingTitle:"Custom `render` function",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/4460.75cded72f7.js b/static/js/async/4460.75cded72f7.js deleted file mode 100644 index 57b7ef7c..00000000 --- a/static/js/async/4460.75cded72f7.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["4460"],{7991(s,e,n){n.r(e),n.d(e,{default:()=>l});var r=n(4848),i=n(8453);function o(s){let e={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"common-mistakes-with-react-native-testing-library",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#common-mistakes-with-react-native-testing-library",children:"#"}),"Common Mistakes with React Native Testing Library"]}),"\n",(0,r.jsxs)(e.blockquote,{children:["\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"Note:"})," This guide is adapted from Kent C. Dodds' article ",(0,r.jsx)(e.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library",rel:"noopener noreferrer",target:"_blank",children:'"Common mistakes with React Testing Library"'})," for React Native Testing Library v13. The original article focuses on web React, but the principles apply to React Native as well. This adaptation includes React Native-specific examples and ARIA-compatible accessibility attributes."]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"React Native Testing Library guiding principle is:"}),"\n",(0,r.jsxs)(e.blockquote,{children:["\n",(0,r.jsx)(e.p,{children:'"The more your tests resemble the way your software is used, the more confidence they can give you."'}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"This guide outlines some common mistakes people make when using React Native Testing Library and how to avoid them."}),"\n",(0,r.jsxs)(e.h2,{id:"using-the-wrong-query",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-the-wrong-query",children:"#"}),"Using the wrong query"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsx)(e.p,{children:"React Native Testing Library provides several query types. Here's the priority order:"}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:["\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"Queries that reflect user experience:"})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByRole"})," - most accessible"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByLabelText"})," - accessible label"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByPlaceholderText"})," - ",(0,r.jsx)(e.code,{children:"TextInput"})," placeholder text"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByText"})," - text content"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByDisplayValue"})," - ",(0,r.jsx)(e.code,{children:"TextInput"})," input value"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(e.li,{children:["\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"Semantic queries:"})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByTestId"})," - only if nothing else works"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"Here's an example of using the right query:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'finds input by label'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Username"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Enter username"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'""'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses accessible label"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Also good - uses placeholder"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" inputByPlaceholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter username'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - uses testID when accessible queries work"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const input = screen.getByTestId('username-input');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-byrole-most-of-the-time",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-byrole-most-of-the-time",children:"#"}),"Not using ",(0,r.jsx)(e.code,{children:"*ByRole"})," query most of the time"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"getByRole"})," is the most accessible query and should be your first choice. It queries elements by their semantic role:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'uses role queries'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Submit"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"searchbox"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Search"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Search..."'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses role query"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Submit'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" searchbox"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'searchbox'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Search'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(searchbox)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"Common roles in React Native include:"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"button"})," - pressable elements"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"text"})," - static text"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"header"})," / ",(0,r.jsx)(e.code,{children:"heading"})," - headers"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"searchbox"})," - search inputs"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"switch"})," - toggle switches"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"checkbox"})," - checkboxes"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"radio"})," - radio buttons"]}),"\n",(0,r.jsx)(e.li,{children:"And more..."}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["Note: React Native supports both ARIA-compatible (",(0,r.jsx)(e.code,{children:"role"}),") and legacy (",(0,r.jsx)(e.code,{children:"accessibilityRole"}),") props. Prefer ",(0,r.jsx)(e.code,{children:"role"})," for consistency with web standards."]}),"\n",(0,r.jsxs)(e.h2,{id:"using-the-wrong-assertion",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-the-wrong-assertion",children:"#"}),"Using the wrong assertion"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsx)(e.p,{children:"React Native Testing Library provides built-in Jest matchers. Make sure you're using the right ones:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button is disabled'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-disabled"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Submit"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Submit'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses RNTL matcher"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeDisabled"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - doesn't use RNTL matcher"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".props["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'aria-disabled'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"])"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"Common matchers include:"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toBeOnTheScreen()"})," - checks if element is rendered (replaces ",(0,r.jsx)(e.code,{children:"toBeInTheDocument()"}),")"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toBeDisabled()"})," - checks if element is disabled"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toHaveTextContent()"})," - checks text content"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toHaveAccessibleName()"})," - checks accessible name"]}),"\n",(0,r.jsx)(e.li,{children:"And more..."}),"\n"]}),"\n",(0,r.jsxs)(e.h2,{id:"using-query-variants-for-anything-except-checking-for-non-existence",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-query-variants-for-anything-except-checking-for-non-existence",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"query*"})," variants for anything except checking for non-existence"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"queryBy*"})," only when checking that an element doesn't exist:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'checks non-existence'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses queryBy for non-existence check"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".queryByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Goodbye'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - uses queryBy when element should exist"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const element = screen.queryByText('Hello');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(element).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses getBy when element should exist"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"waitFor"})," to wait for elements that can be queried with ",(0,r.jsx)(e.code,{children:"find*"})]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"findBy*"})," queries instead of ",(0,r.jsx)(e.code,{children:"waitFor"})," + ",(0,r.jsx)(e.code,{children:"getBy*"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waits for element'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"show"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setShow"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setTimeout"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setShow"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 100"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" []);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{show "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"&&"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Loaded};"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses findBy query"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".findByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Loaded'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - uses waitFor + getBy"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Loaded')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"performing-side-effects-in-waitfor",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#performing-side-effects-in-waitfor",children:"#"}),"Performing side-effects in ",(0,r.jsx)(e.code,{children:"waitFor"})]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Don't perform side-effects in ",(0,r.jsx)(e.code,{children:"waitFor"})," callbacks:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'avoids side effects in waitFor'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(count "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Increment"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Count: {count}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - side effect in waitFor"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // fireEvent.press(button);"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Count: 1')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - side effect outside waitFor"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"using-unsafe-root-to-query-for-elements",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-unsafe-root-to-query-for-elements",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"UNSAFE_root"})," to query for elements"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["React Native Testing Library provides an ",(0,r.jsx)(e.code,{children:"UNSAFE_root"})," object that gives access to the root element, but you should avoid using it directly:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'finds element incorrectly'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"UNSAFE_root"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"message"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - using UNSAFE_root directly"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" UNSAFE_root"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".findAll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((node) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" node"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".testID "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'message'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"];"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - use proper queries"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const element = screen.getByTestId('message');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Instead, use the proper query methods from ",(0,r.jsx)(e.code,{children:"screen"})," or the ",(0,r.jsx)(e.code,{children:"render"})," result. The ",(0,r.jsx)(e.code,{children:"UNSAFE_root"})," is a low-level API that you rarely need."]}),"\n",(0,r.jsxs)(e.h2,{id:"passing-an-empty-callback-to-waitfor",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#passing-an-empty-callback-to-waitfor",children:"#"}),"Passing an empty callback to ",(0,r.jsx)(e.code,{children:"waitFor"})]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Don't pass an empty callback to ",(0,r.jsx)(e.code,{children:"waitFor"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waits correctly'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"test"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - empty callback"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {});"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - meaningful assertion"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'test'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-screen",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-screen",children:"#"}),"Not using ",(0,r.jsx)(e.code,{children:"screen"})]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["You can get all the queries from the ",(0,r.jsx)(e.code,{children:"render"})," result:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders component'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["But you can also get them from the ",(0,r.jsx)(e.code,{children:"screen"})," object:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders component'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Using ",(0,r.jsx)(e.code,{children:"screen"})," has several benefits:"]}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:["You don't need to destructure ",(0,r.jsx)(e.code,{children:"getByText"})," from ",(0,r.jsx)(e.code,{children:"render"})]}),"\n",(0,r.jsx)(e.li,{children:"It's more consistent with the Testing Library ecosystem"}),"\n"]}),"\n",(0,r.jsxs)(e.h2,{id:"wrapping-things-in-act-unnecessarily",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapping-things-in-act-unnecessarily",children:"#"}),"Wrapping things in ",(0,r.jsx)(e.code,{children:"act"})," unnecessarily"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["React Native Testing Library's ",(0,r.jsx)(e.code,{children:"userEvent"})," methods are already wrapped in ",(0,r.jsx)(e.code,{children:"act"}),", so you don't need to wrap them yourself:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'updates on press'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(count "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Count: {count}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - fireEvent is already wrapped in act"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - unnecessary act wrapper"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // act(() => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // fireEvent.press(button);"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-user-event-api",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-user-event-api",children:"#"}),"Not using User Event API"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"userEvent"})," provides a more realistic way to simulate user interactions:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" userEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'uses userEvent'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Name"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{value} "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"onChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{setValue} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Clear"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Name'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Clear'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses userEvent for realistic interactions"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(input"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'John'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(input)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'John'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(input)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"userEvent"})," methods are async and must be awaited. Available methods include:"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"press()"})," - simulates a press"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"longPress()"})," - simulates long press"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"type()"})," - simulates typing"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"clear()"})," - clears text input"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"paste()"})," - simulates pasting"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"scrollTo()"})," - simulates scrolling"]}),"\n"]}),"\n",(0,r.jsxs)(e.h2,{id:"not-querying-by-text",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-querying-by-text",children:"#"}),"Not querying by text"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["In React Native, text is rendered in ",(0,r.jsx)(e.code,{children:""})," components. You should query by the text content that users see:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'finds text correctly'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - queries by visible text"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - queries by testID when text is available"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByTestId('greeting')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-testing-library-eslint-plugins",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-testing-library-eslint-plugins",children:"#"}),"Not using Testing Library ESLint plugins"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["There's an ESLint plugin for Testing Library: ",(0,r.jsx)(e.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(e.code,{children:"eslint-plugin-testing-library"})}),". This plugin can help you avoid common mistakes and will automatically fix your code in many cases."]}),"\n",(0,r.jsx)(e.p,{children:"You can install it with:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"bash",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" add"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" --dev"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" eslint-plugin-testing-library"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["And configure it in your ",(0,r.jsx)(e.code,{children:"eslint.config.js"})," (flat config):"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" testingLibrary "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'eslint-plugin-testing-library'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"testingLibrary"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".configs["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'flat/react'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]];"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Note: Unlike React Testing Library, React Native Testing Library has built-in Jest matchers, so you don't need ",(0,r.jsx)(e.code,{children:"eslint-plugin-jest-dom"}),"."]}),"\n",(0,r.jsxs)(e.h2,{id:"using-cleanup",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-cleanup",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"cleanup"})]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["React Native Testing Library automatically cleans up after each test. You don't need to call ",(0,r.jsx)(e.code,{children:"cleanup()"})," manually unless you're using the ",(0,r.jsx)(e.code,{children:"pure"})," export (which doesn't include automatic cleanup)."]}),"\n",(0,r.jsx)(e.p,{children:"If you want to disable automatic cleanup for a specific test, you can use:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native/pure'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'does not cleanup'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // This test won't cleanup automatically"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ... your test"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"But in most cases, you don't need to worry about cleanup at all - it's handled automatically."}),"\n",(0,r.jsxs)(e.h2,{id:"using-get-variants-as-assertions",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-get-variants-as-assertions",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"get*"})," variants as assertions"]}),"\n",(0,r.jsx)("span",{style:{color:"#3c763d",fontWeight:"bold"},children:"Importance: low"}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"getBy*"})," queries throw errors when elements aren't found, so they work as assertions. However, for better error messages, you might want to combine them with explicit matchers:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'uses getBy as assertion'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - getBy throws if not found, so it's an assertion"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Also good - more explicit"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - redundant assertion"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const element = screen.getByText('Hello');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(element).not.toBeNull(); // getBy already throws if null"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"having-multiple-assertions-in-a-single-waitfor-callback",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#having-multiple-assertions-in-a-single-waitfor-callback",children:"#"}),"Having multiple assertions in a single ",(0,r.jsx)(e.code,{children:"waitFor"})," callback"]}),"\n",(0,r.jsx)("span",{style:{color:"#3c763d",fontWeight:"bold"},children:"Importance: low"}),"\n",(0,r.jsxs)(e.p,{children:["Keep ",(0,r.jsx)(e.code,{children:"waitFor"})," callbacks focused on a single assertion:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waits with single assertion'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setTimeout"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 100"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" []);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Count: {count}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - single assertion per waitFor"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // If you need multiple assertions, do them after waitFor"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveTextContent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - multiple assertions in waitFor"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Count: 1')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Count: 1')).toHaveTextContent('Count: 1');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"using-wrapper-as-the-variable-name",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-wrapper-as-the-variable-name",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"wrapper"})," as the variable name"]}),"\n",(0,r.jsx)("span",{style:{color:"#3c763d",fontWeight:"bold"},children:"Importance: low"}),"\n",(0,r.jsxs)(e.p,{children:['This is not really a "mistake" per se, but it\'s a common pattern that can be improved. When you use the ',(0,r.jsx)(e.code,{children:"wrapper"})," option in ",(0,r.jsx)(e.code,{children:"render"}),", you might be tempted to name your wrapper component ",(0,r.jsx)(e.code,{children:"Wrapper"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders with wrapper'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ children }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { children"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"ReactNode"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"wrapper"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{children}"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"content"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Content"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'content'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["This works fine, but it's more conventional to name it something more descriptive like ",(0,r.jsx)(e.code,{children:"ThemeProvider"})," or ",(0,r.jsx)(e.code,{children:"AllTheProviders"})," (if you're wrapping with multiple providers). This makes it clearer what the wrapper is doing."]}),"\n",(0,r.jsxs)(e.h2,{id:"summary",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,r.jsx)(e.p,{children:"The key principles to remember:"}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Use the right query"})," - Prefer ",(0,r.jsx)(e.code,{children:"getByRole"})," as your first choice, use ",(0,r.jsx)(e.code,{children:"findBy*"})," for async elements, and ",(0,r.jsx)(e.code,{children:"queryBy*"})," only for checking non-existence"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Use proper assertions"})," - Use RNTL's built-in matchers (",(0,r.jsx)(e.code,{children:"toBeOnTheScreen()"}),", ",(0,r.jsx)(e.code,{children:"toBeDisabled()"}),", etc.) instead of asserting on props directly"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Handle async operations correctly"})," - ",(0,r.jsx)(e.code,{children:"userEvent"})," methods are async and must be awaited; ",(0,r.jsx)(e.code,{children:"render()"})," and ",(0,r.jsx)(e.code,{children:"fireEvent"})," are synchronous"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsxs)(e.strong,{children:["Use ",(0,r.jsx)(e.code,{children:"waitFor"})," correctly"]})," - Avoid side-effects in callbacks, use ",(0,r.jsx)(e.code,{children:"findBy*"})," instead when possible, and keep callbacks focused"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Follow accessibility best practices"})," - Prefer ARIA attributes (",(0,r.jsx)(e.code,{children:"role"}),", ",(0,r.jsx)(e.code,{children:"aria-label"}),") over ",(0,r.jsx)(e.code,{children:"accessibility*"})," props"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Organize code well"})," - Use ",(0,r.jsx)(e.code,{children:"screen"})," over destructuring, prefer ",(0,r.jsx)(e.code,{children:"userEvent"})," over ",(0,r.jsx)(e.code,{children:"fireEvent"}),", and don't use ",(0,r.jsx)(e.code,{children:"cleanup()"})]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"By following these principles, your tests will be more maintainable, accessible, and reliable."})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,i.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(o,{...s})}):o(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fguides%2Fcommon-mistakes.mdx"]={toc:[{id:"using-the-wrong-query",text:"Using the wrong query",depth:2},{id:"not-using-byrole-most-of-the-time",text:"Not using `*ByRole` query most of the time",depth:2},{id:"using-the-wrong-assertion",text:"Using the wrong assertion",depth:2},{id:"using-query-variants-for-anything-except-checking-for-non-existence",text:"Using `query*` variants for anything except checking for non-existence",depth:2},{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",text:"Using `waitFor` to wait for elements that can be queried with `find*`",depth:2},{id:"performing-side-effects-in-waitfor",text:"Performing side-effects in `waitFor`",depth:2},{id:"using-unsafe-root-to-query-for-elements",text:"Using `UNSAFE_root` to query for elements",depth:2},{id:"passing-an-empty-callback-to-waitfor",text:"Passing an empty callback to `waitFor`",depth:2},{id:"not-using-screen",text:"Not using `screen`",depth:2},{id:"wrapping-things-in-act-unnecessarily",text:"Wrapping things in `act` unnecessarily",depth:2},{id:"not-using-user-event-api",text:"Not using User Event API",depth:2},{id:"not-querying-by-text",text:"Not querying by text",depth:2},{id:"not-using-testing-library-eslint-plugins",text:"Not using Testing Library ESLint plugins",depth:2},{id:"using-cleanup",text:"Using `cleanup`",depth:2},{id:"using-get-variants-as-assertions",text:"Using `get*` variants as assertions",depth:2},{id:"having-multiple-assertions-in-a-single-waitfor-callback",text:"Having multiple assertions in a single `waitFor` callback",depth:2},{id:"using-wrapper-as-the-variable-name",text:"Using `wrapper` as the variable name",depth:2},{id:"summary",text:"Summary",depth:2}],title:"Common Mistakes with React Native Testing Library",headingTitle:"Common Mistakes with React Native Testing Library",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/4460.a8103b0bae.js b/static/js/async/4460.a8103b0bae.js new file mode 100644 index 00000000..ad40db7f --- /dev/null +++ b/static/js/async/4460.a8103b0bae.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["4460"],{7991(s,e,n){n.r(e),n.d(e,{default:()=>l});var r=n(4848),i=n(8453);function o(s){let e={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"common-mistakes-with-react-native-testing-library",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#common-mistakes-with-react-native-testing-library",children:"#"}),"Common Mistakes with React Native Testing Library"]}),"\n",(0,r.jsxs)(e.blockquote,{children:["\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.strong,{children:"Note:"})," This guide is adapted from Kent C. Dodds' article ",(0,r.jsx)(e.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library",rel:"noopener noreferrer",target:"_blank",children:'"Common mistakes with React Testing Library"'})," for React Native Testing Library v13. The original article focuses on web React, but the principles apply to React Native as well. This adaptation includes React Native-specific examples and ARIA-compatible accessibility attributes."]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"React Native Testing Library guiding principle is:"}),"\n",(0,r.jsxs)(e.blockquote,{children:["\n",(0,r.jsx)(e.p,{children:'"The more your tests resemble the way your software is used, the more confidence they can give you."'}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"This guide outlines some common mistakes people make when using React Native Testing Library and how to avoid them."}),"\n",(0,r.jsxs)(e.h2,{id:"using-the-wrong-query",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-the-wrong-query",children:"#"}),"Using the wrong query"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsx)(e.p,{children:"React Native Testing Library provides several query types. Here's the priority order:"}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:["\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"Queries that reflect user experience:"})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByRole"})," - most accessible"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByLabelText"})," - accessible label"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByPlaceholderText"})," - ",(0,r.jsx)(e.code,{children:"TextInput"})," placeholder text"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByText"})," - text content"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByDisplayValue"})," - ",(0,r.jsx)(e.code,{children:"TextInput"})," input value"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(e.li,{children:["\n",(0,r.jsx)(e.p,{children:(0,r.jsx)(e.strong,{children:"Semantic queries:"})}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"getByTestId"})," - only if nothing else works"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"Here's an example of using the right query:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'finds input by label'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Username"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Enter username"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'""'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses accessible label"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Also good - uses placeholder"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" inputByPlaceholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter username'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - uses testID when accessible queries work"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const input = screen.getByTestId('username-input');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-byrole-most-of-the-time",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-byrole-most-of-the-time",children:"#"}),"Not using ",(0,r.jsx)(e.code,{children:"*ByRole"})," query most of the time"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"getByRole"})," is the most accessible query and should be your first choice. It queries elements by their semantic role:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'uses role queries'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Submit"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"searchbox"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Search"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Search..."'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses role query"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Submit'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" searchbox"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'searchbox'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Search'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(searchbox)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"Common roles in React Native include:"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"button"})," - pressable elements"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"text"})," - static text"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"header"})," / ",(0,r.jsx)(e.code,{children:"heading"})," - headers"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"searchbox"})," - search inputs"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"switch"})," - toggle switches"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"checkbox"})," - checkboxes"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"radio"})," - radio buttons"]}),"\n",(0,r.jsx)(e.li,{children:"And more..."}),"\n"]}),"\n",(0,r.jsxs)(e.p,{children:["Note: React Native supports both ARIA-compatible (",(0,r.jsx)(e.code,{children:"role"}),") and legacy (",(0,r.jsx)(e.code,{children:"accessibilityRole"}),") props. Prefer ",(0,r.jsx)(e.code,{children:"role"})," for consistency with web standards."]}),"\n",(0,r.jsxs)(e.h2,{id:"using-the-wrong-assertion",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-the-wrong-assertion",children:"#"}),"Using the wrong assertion"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsx)(e.p,{children:"React Native Testing Library provides built-in Jest matchers. Make sure you're using the right ones:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button is disabled'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-disabled"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Submit"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Submit'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses RNTL matcher"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeDisabled"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - doesn't use RNTL matcher"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".props["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'aria-disabled'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"])"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"Common matchers include:"}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toBeOnTheScreen()"})," - checks if element is rendered (replaces ",(0,r.jsx)(e.code,{children:"toBeInTheDocument()"}),")"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toBeDisabled()"})," - checks if element is disabled"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toHaveTextContent()"})," - checks text content"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"toHaveAccessibleName()"})," - checks accessible name"]}),"\n",(0,r.jsx)(e.li,{children:"And more..."}),"\n"]}),"\n",(0,r.jsxs)(e.h2,{id:"using-query-variants-for-anything-except-checking-for-non-existence",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-query-variants-for-anything-except-checking-for-non-existence",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"query*"})," variants for anything except checking for non-existence"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"queryBy*"})," only when checking that an element doesn't exist:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'checks non-existence'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses queryBy for non-existence check"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".queryByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Goodbye'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - uses queryBy when element should exist"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const element = screen.queryByText('Hello');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(element).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses getBy when element should exist"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"waitFor"})," to wait for elements that can be queried with ",(0,r.jsx)(e.code,{children:"find*"})]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Use ",(0,r.jsx)(e.code,{children:"findBy*"})," queries instead of ",(0,r.jsx)(e.code,{children:"waitFor"})," + ",(0,r.jsx)(e.code,{children:"getBy*"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waits for element'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"show"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setShow"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setTimeout"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setShow"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"true"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 100"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" []);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{show "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"&&"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Loaded};"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses findBy query"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".findByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Loaded'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - uses waitFor + getBy"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Loaded')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"performing-side-effects-in-waitfor",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#performing-side-effects-in-waitfor",children:"#"}),"Performing side-effects in ",(0,r.jsx)(e.code,{children:"waitFor"})]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Don't perform side-effects in ",(0,r.jsx)(e.code,{children:"waitFor"})," callbacks:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'avoids side effects in waitFor'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(count "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Increment"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Count: {count}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - side effect in waitFor"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // fireEvent.press(button);"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Count: 1')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - side effect outside waitFor"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"using-unsafe-root-to-query-for-elements",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-unsafe-root-to-query-for-elements",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"UNSAFE_root"})," to query for elements"]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["React Native Testing Library provides an ",(0,r.jsx)(e.code,{children:"UNSAFE_root"})," object that gives access to the root element, but you should avoid using it directly:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'finds element incorrectly'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"UNSAFE_root"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"message"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - using UNSAFE_root directly"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" UNSAFE_root"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".findAll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((node) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" node"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".testID "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'message'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"];"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - use proper queries"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const element = screen.getByTestId('message');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Instead, use the proper query methods from ",(0,r.jsx)(e.code,{children:"screen"})," or the ",(0,r.jsx)(e.code,{children:"render"})," result. The ",(0,r.jsx)(e.code,{children:"UNSAFE_root"})," is a low-level API that you rarely need."]}),"\n",(0,r.jsxs)(e.h2,{id:"passing-an-empty-callback-to-waitfor",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#passing-an-empty-callback-to-waitfor",children:"#"}),"Passing an empty callback to ",(0,r.jsx)(e.code,{children:"waitFor"})]}),"\n",(0,r.jsx)("span",{style:{color:"#a94442",fontWeight:"bold"},children:"Importance: high"}),"\n",(0,r.jsxs)(e.p,{children:["Don't pass an empty callback to ",(0,r.jsx)(e.code,{children:"waitFor"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waits correctly'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"test"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - empty callback"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {});"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - meaningful assertion"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'test'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-screen",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-screen",children:"#"}),"Not using ",(0,r.jsx)(e.code,{children:"screen"})]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["You can get all the queries from the ",(0,r.jsx)(e.code,{children:"render"})," result:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders component'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["But you can also get them from the ",(0,r.jsx)(e.code,{children:"screen"})," object:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders component'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Using ",(0,r.jsx)(e.code,{children:"screen"})," has several benefits:"]}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:["You don't need to destructure ",(0,r.jsx)(e.code,{children:"getByText"})," from ",(0,r.jsx)(e.code,{children:"render"})]}),"\n",(0,r.jsx)(e.li,{children:"It's more consistent with the Testing Library ecosystem"}),"\n"]}),"\n",(0,r.jsxs)(e.h2,{id:"wrapping-things-in-act-unnecessarily",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapping-things-in-act-unnecessarily",children:"#"}),"Wrapping things in ",(0,r.jsx)(e.code,{children:"act"})," unnecessarily"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["React Native Testing Library's ",(0,r.jsx)(e.code,{children:"userEvent"})," methods are already wrapped in ",(0,r.jsx)(e.code,{children:"act"}),", so you don't need to wrap them yourself:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'updates on press'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(count "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Count: {count}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - fireEvent is already wrapped in act"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - unnecessary act wrapper"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // act(() => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // fireEvent.press(button);"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-user-event-api",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-user-event-api",children:"#"}),"Not using User Event API"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"userEvent"})," provides a more realistic way to simulate user interactions:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" userEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'uses userEvent'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Name"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{value} "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"onChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{setValue} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Clear"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Name'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Clear'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - uses userEvent for realistic interactions"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(input"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'John'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(input)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'John'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(button);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(input)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveValue"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"userEvent"})," methods are async and must be awaited. Available methods include:"]}),"\n",(0,r.jsxs)(e.ul,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"press()"})," - simulates a press"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"longPress()"})," - simulates long press"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"type()"})," - simulates typing"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"clear()"})," - clears text input"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"paste()"})," - simulates pasting"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"scrollTo()"})," - simulates scrolling"]}),"\n"]}),"\n",(0,r.jsxs)(e.h2,{id:"not-querying-by-text",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-querying-by-text",children:"#"}),"Not querying by text"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["In React Native, text is rendered in ",(0,r.jsx)(e.code,{children:""})," components. You should query by the text content that users see:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'finds text correctly'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - queries by visible text"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - queries by testID when text is available"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByTestId('greeting')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"not-using-testing-library-eslint-plugins",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#not-using-testing-library-eslint-plugins",children:"#"}),"Not using Testing Library ESLint plugins"]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["There's an ESLint plugin for Testing Library: ",(0,r.jsx)(e.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(e.code,{children:"eslint-plugin-testing-library"})}),". This plugin can help you avoid common mistakes and will automatically fix your code in many cases."]}),"\n",(0,r.jsx)(e.p,{children:"You can install it with:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"bash",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"yarn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" add"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" --dev"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string)"},children:" eslint-plugin-testing-library"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["And configure it in your ",(0,r.jsx)(e.code,{children:"eslint.config.js"})," (flat config):"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" testingLibrary "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'eslint-plugin-testing-library'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" default"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"testingLibrary"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".configs["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'flat/react'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"]];"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Note: Unlike React Testing Library, React Native Testing Library has built-in Jest matchers, so you don't need ",(0,r.jsx)(e.code,{children:"eslint-plugin-jest-dom"}),"."]}),"\n",(0,r.jsxs)(e.h2,{id:"using-cleanup",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-cleanup",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"cleanup"})]}),"\n",(0,r.jsx)("span",{style:{color:"#8a6d3b",fontWeight:"bold"},children:"Importance: medium"}),"\n",(0,r.jsxs)(e.p,{children:["React Native Testing Library automatically cleans up after each test. You don't need to call ",(0,r.jsx)(e.code,{children:"cleanup()"})," manually unless you're using the ",(0,r.jsx)(e.code,{children:"pure"})," export (which doesn't include automatic cleanup)."]}),"\n",(0,r.jsx)(e.p,{children:"If you want to disable automatic cleanup for a specific test, you can use:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native/pure'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'does not cleanup'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // This test won't cleanup automatically"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ... your test"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"But in most cases, you don't need to worry about cleanup at all - it's handled automatically."}),"\n",(0,r.jsxs)(e.h2,{id:"using-get-variants-as-assertions",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-get-variants-as-assertions",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"get*"})," variants as assertions"]}),"\n",(0,r.jsx)("span",{style:{color:"#3c763d",fontWeight:"bold"},children:"Importance: low"}),"\n",(0,r.jsxs)(e.p,{children:[(0,r.jsx)(e.code,{children:"getBy*"})," queries throw errors when elements aren't found, so they work as assertions. However, for better error messages, you might want to combine them with explicit matchers:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'uses getBy as assertion'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - getBy throws if not found, so it's an assertion"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Also good - more explicit"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - redundant assertion"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // const element = screen.getByText('Hello');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(element).not.toBeNull(); // getBy already throws if null"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"having-multiple-assertions-in-a-single-waitfor-callback",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#having-multiple-assertions-in-a-single-waitfor-callback",children:"#"}),"Having multiple assertions in a single ",(0,r.jsx)(e.code,{children:"waitFor"})," callback"]}),"\n",(0,r.jsx)("span",{style:{color:"#3c763d",fontWeight:"bold"},children:"Importance: low"}),"\n",(0,r.jsxs)(e.p,{children:["Keep ",(0,r.jsx)(e.code,{children:"waitFor"})," callbacks focused on a single assertion:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" waitFor } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waits with single assertion'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setTimeout"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 100"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" []);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Count: {count}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ✅ Good - single assertion per waitFor"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // If you need multiple assertions, do them after waitFor"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveTextContent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Count: 1'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ Bad - multiple assertions in waitFor"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // await waitFor(() => {"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Count: 1')).toBeOnTheScreen();"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // expect(screen.getByText('Count: 1')).toHaveTextContent('Count: 1');"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // });"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h2,{id:"using-wrapper-as-the-variable-name",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-wrapper-as-the-variable-name",children:"#"}),"Using ",(0,r.jsx)(e.code,{children:"wrapper"})," as the variable name"]}),"\n",(0,r.jsx)("span",{style:{color:"#3c763d",fontWeight:"bold"},children:"Importance: low"}),"\n",(0,r.jsxs)(e.p,{children:['This is not really a "mistake" per se, but it\'s a common pattern that can be improved. When you use the ',(0,r.jsx)(e.code,{children:"wrapper"})," option in ",(0,r.jsx)(e.code,{children:"render"}),", you might be tempted to name your wrapper component ",(0,r.jsx)(e.code,{children:"Wrapper"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders with wrapper'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ children }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { children"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"ReactNode"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"wrapper"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{children}"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"content"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Content"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'content'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["This works fine, but it's more conventional to name it something more descriptive like ",(0,r.jsx)(e.code,{children:"ThemeProvider"})," or ",(0,r.jsx)(e.code,{children:"AllTheProviders"})," (if you're wrapping with multiple providers). This makes it clearer what the wrapper is doing."]}),"\n",(0,r.jsxs)(e.h2,{id:"summary",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,r.jsx)(e.p,{children:"The key principles to remember:"}),"\n",(0,r.jsxs)(e.ol,{children:["\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Use the right query"})," - Prefer ",(0,r.jsx)(e.code,{children:"getByRole"})," as your first choice, use ",(0,r.jsx)(e.code,{children:"findBy*"})," for async elements, and ",(0,r.jsx)(e.code,{children:"queryBy*"})," only for checking non-existence"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Use proper assertions"})," - Use RNTL's built-in matchers (",(0,r.jsx)(e.code,{children:"toBeOnTheScreen()"}),", ",(0,r.jsx)(e.code,{children:"toBeDisabled()"}),", etc.) instead of asserting on props directly"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Handle async operations correctly"})," - ",(0,r.jsx)(e.code,{children:"userEvent"})," methods are async and must be awaited; ",(0,r.jsx)(e.code,{children:"render()"})," and ",(0,r.jsx)(e.code,{children:"fireEvent"})," are synchronous"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsxs)(e.strong,{children:["Use ",(0,r.jsx)(e.code,{children:"waitFor"})," correctly"]})," - Avoid side-effects in callbacks, use ",(0,r.jsx)(e.code,{children:"findBy*"})," instead when possible, and keep callbacks focused"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Follow accessibility best practices"})," - Prefer ARIA attributes (",(0,r.jsx)(e.code,{children:"role"}),", ",(0,r.jsx)(e.code,{children:"aria-label"}),") over ",(0,r.jsx)(e.code,{children:"accessibility*"})," props"]}),"\n",(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.strong,{children:"Organize code well"})," - Use ",(0,r.jsx)(e.code,{children:"screen"})," over destructuring, prefer ",(0,r.jsx)(e.code,{children:"userEvent"})," over ",(0,r.jsx)(e.code,{children:"fireEvent"}),", and don't use ",(0,r.jsx)(e.code,{children:"cleanup()"})]}),"\n"]}),"\n",(0,r.jsx)(e.p,{children:"By following these principles, your tests will be more maintainable, accessible, and reliable."})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,i.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(o,{...s})}):o(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fguides%2Fcommon-mistakes.mdx"]={toc:[{id:"using-the-wrong-query",text:"Using the wrong query",depth:2},{id:"not-using-byrole-most-of-the-time",text:"Not using `*ByRole` query most of the time",depth:2},{id:"using-the-wrong-assertion",text:"Using the wrong assertion",depth:2},{id:"using-query-variants-for-anything-except-checking-for-non-existence",text:"Using `query*` variants for anything except checking for non-existence",depth:2},{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",text:"Using `waitFor` to wait for elements that can be queried with `find*`",depth:2},{id:"performing-side-effects-in-waitfor",text:"Performing side-effects in `waitFor`",depth:2},{id:"using-unsafe-root-to-query-for-elements",text:"Using `UNSAFE_root` to query for elements",depth:2},{id:"passing-an-empty-callback-to-waitfor",text:"Passing an empty callback to `waitFor`",depth:2},{id:"not-using-screen",text:"Not using `screen`",depth:2},{id:"wrapping-things-in-act-unnecessarily",text:"Wrapping things in `act` unnecessarily",depth:2},{id:"not-using-user-event-api",text:"Not using User Event API",depth:2},{id:"not-querying-by-text",text:"Not querying by text",depth:2},{id:"not-using-testing-library-eslint-plugins",text:"Not using Testing Library ESLint plugins",depth:2},{id:"using-cleanup",text:"Using `cleanup`",depth:2},{id:"using-get-variants-as-assertions",text:"Using `get*` variants as assertions",depth:2},{id:"having-multiple-assertions-in-a-single-waitfor-callback",text:"Having multiple assertions in a single `waitFor` callback",depth:2},{id:"using-wrapper-as-the-variable-name",text:"Using `wrapper` as the variable name",depth:2},{id:"summary",text:"Summary",depth:2}],title:"Common Mistakes with React Native Testing Library",headingTitle:"Common Mistakes with React Native Testing Library",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/4800.198efb3c72.js b/static/js/async/4800.5d5431129d.js similarity index 54% rename from static/js/async/4800.198efb3c72.js rename to static/js/async/4800.5d5431129d.js index cf8ed1e0..0d4831e9 100644 --- a/static/js/async/4800.198efb3c72.js +++ b/static/js/async/4800.5d5431129d.js @@ -1 +1 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["4800"],{211(s,n,e){e.r(n),e.d(n,{default:()=>a});var r=e(4848),o=e(8453),i=e(7425);function l(s){let n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"jotai",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#jotai",children:"#"}),"Jotai"]}),"\n",(0,r.jsxs)(n.h2,{id:"introduction",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#introduction",children:"#"}),"Introduction"]}),"\n",(0,r.jsx)(n.p,{children:"Jotai is a global state management library for React that uses an atomic approach to optimize\nrenders and solve issues like extra re-renders and the need for memoization. It scales from simple\nstate management to complex enterprise applications, offering utilities and extensions to enhance\nthe developer experience."}),"\n",(0,r.jsxs)(n.h2,{id:"task-list-example",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#task-list-example",children:"#"}),"Task List Example"]}),"\n",(0,r.jsx)(n.p,{children:"Let's assume we have a simple task list component that uses Jotai for state management. The\ncomponent has a list of tasks, a text input for typing new task name and a button to add a new task to the list."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/TaskList.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { nanoid } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'nanoid'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(newTaskTitleAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" handleAddTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((tasks) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" nanoid"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ]);"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".map"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((task) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" key"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".id} "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"testID"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"task-item"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".title}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ))}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"length"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ?"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">No tasks, start by adding one... "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityLabel"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task"'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task..."'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{newTaskTitle}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" onChangeText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{(text) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(text)}"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{handleAddTask}>"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">Add Task"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"starting-with-a-simple-test",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#starting-with-a-simple-test",children:"#"}),"Starting with a Simple Test"]}),"\n",(0,r.jsxs)(n.p,{children:["We can test our ",(0,r.jsx)(n.code,{children:"TaskList"})," component using React Native Testing Library's (RNTL) regular ",(0,r.jsx)(n.code,{children:"render"}),"\nfunction. Although it is sufficient to test the empty state of the ",(0,r.jsx)(n.code,{children:"TaskList"})," component, it is not\nenough to test the component with initial tasks present in the list."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" userEvent } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './test-utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { TaskList } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './TaskList'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders an empty task list'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/no tasks, start by adding one/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function-to-populate-jotai-atoms-with-initial-values",children:"#"}),"Custom Render Function to populate Jotai Atoms with Initial Values"]}),"\n",(0,r.jsxs)(n.p,{children:["To test the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks, we need to be able to populate the ",(0,r.jsx)(n.code,{children:"tasksAtom"})," with\ninitial values. We can create a custom render function that uses Jotai's ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook to\nhydrate the atoms with initial values. This function will accept the initial atoms and their\ncorresponding values as an argument."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/test-utils.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useHydrateAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { PrimitiveAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/vanilla/atom'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Jotai types are not well exported, so we will make our life easier by using `any`."})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"> "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PrimitiveAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" interface"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * Renders a React component with Jotai atoms for testing purposes."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" component - The React component to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" options - The render options including the initial atom values."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The render result from `@testing-library/react-native`."})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" component"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".initialValues}>{component}"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PropsWithChildren"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<{"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}>;"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * A wrapper component that hydrates Jotai atoms with initial values."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" initialValues - The initial values for the Jotai atoms."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" children - The child components to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The rendered children."})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"({ initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useHydrateAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(initialValues);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children;"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-the-tasklist-component-with-initial-tasks",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-the-tasklist-component-with-initial-tasks",children:"#"}),"Testing the ",(0,r.jsx)(n.code,{children:"TaskList"})," Component with initial tasks"]}),"\n",(0,r.jsxs)(n.p,{children:["We can now use the ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," function to render the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks. The\n",(0,r.jsx)(n.code,{children:"initialValues"})," property will contain the ",(0,r.jsx)(n.code,{children:"tasksAtom"}),", ",(0,r.jsx)(n.code,{children:"newTaskTitleAtom"})," and their initial values. We can then test the component to ensure that the initial tasks are rendered correctly."]}),"\n",(0,r.jsx)(i.Pq,{type:"info",title:"Info",children:(0,r.jsx)(n.p,{children:"\nIn our test, we populated only one atom and its initial value, but you can add other Jotai atoms and their corresponding values to the initialValues array as needed."})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"======="})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [{ id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '1'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy bread'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders a to do list with 1 items initially, and adds a new item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy bread/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/new task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /add task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy almond milk/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"modifying-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#modifying-atom-outside-of-react-components",children:"#"}),"Modifying atom outside of React components"]}),"\n",(0,r.jsx)(n.p,{children:"In several cases, you might need to change an atom's state outside a React component. In our case,\nwe have a set of functions to get tasks and set tasks, which change the state of the task list atom."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/state.ts",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" createStore } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[]>([]);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Available for use outside React components"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" createStore"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Selectors"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".get"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Actions"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" task]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-atom-outside-of-react-components",children:"#"}),"Testing atom outside of React components"]}),"\n",(0,r.jsxs)(n.p,{children:["You can test the ",(0,r.jsx)(n.code,{children:"getAllTasks"})," and ",(0,r.jsx)(n.code,{children:"addTask"})," functions outside the React component's scope by setting\nthe initial to-do items in the store and then checking if the functions work as expected.\nNo special setup is required to test these functions, as ",(0,r.jsx)(n.code,{children:"store.set"})," is available by default by\nJotai."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"//..."})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'modify store outside of React component'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" // Set the initial to do items in the store"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '2'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"conclusion",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#conclusion",children:"#"}),"Conclusion"]}),"\n",(0,r.jsxs)(n.p,{children:["Testing a component or a function that depends on Jotai atoms is straightforward with the help of\nthe ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook. We've seen how to create a custom render function ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," that\nsets up atoms and their initial values for testing purposes. We've also seen how to test functions\nthat change the state of atoms outside React components. This approach allows us to test components\nin different states and scenarios, ensuring they behave as expected."]})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}={...(0,o.R)(),...s.components};return n?(0,r.jsx)(n,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["13.x%2Fcookbook%2Fstate-management%2Fjotai.md"]={toc:[{id:"introduction",text:"Introduction",depth:2},{id:"task-list-example",text:"Task List Example",depth:2},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2},{id:"conclusion",text:"Conclusion",depth:2}],title:"Jotai",headingTitle:"Jotai",frontmatter:{}}}}]); \ No newline at end of file +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["4800"],{211(s,n,e){e.r(n),e.d(n,{default:()=>a});var r=e(4848),o=e(8453),i=e(7425);function l(s){let n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"jotai",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#jotai",children:"#"}),"Jotai"]}),"\n",(0,r.jsxs)(n.h2,{id:"introduction",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#introduction",children:"#"}),"Introduction"]}),"\n",(0,r.jsx)(n.p,{children:"Jotai is a global state management library for React that uses an atomic approach to optimize\nrenders and solve issues like extra re-renders and the need for memoization. It scales from simple\nstate management to complex enterprise applications, offering utilities and extensions to enhance\nthe developer experience."}),"\n",(0,r.jsxs)(n.h2,{id:"task-list-example",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#task-list-example",children:"#"}),"Task List Example"]}),"\n",(0,r.jsx)(n.p,{children:"Let's assume we have a simple task list component that uses Jotai for state management. The\ncomponent has a list of tasks, a text input for typing new task name and a button to add a new task to the list."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/TaskList.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { nanoid } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'nanoid'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(newTaskTitleAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" handleAddTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((tasks) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" nanoid"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ]);"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".map"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((task) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" key"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".id} "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"testID"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"task-item"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".title}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ))}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"length"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ?"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">No tasks, start by adding one... "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityLabel"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task"'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task..."'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{newTaskTitle}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" onChangeText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{(text) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(text)}"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{handleAddTask}>"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">Add Task"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"starting-with-a-simple-test",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#starting-with-a-simple-test",children:"#"}),"Starting with a Simple Test"]}),"\n",(0,r.jsxs)(n.p,{children:["We can test our ",(0,r.jsx)(n.code,{children:"TaskList"})," component using React Native Testing Library's (RNTL) regular ",(0,r.jsx)(n.code,{children:"render"}),"\nfunction. Although it is sufficient to test the empty state of the ",(0,r.jsx)(n.code,{children:"TaskList"})," component, it is not\nenough to test the component with initial tasks present in the list."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" userEvent } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './test-utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { TaskList } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './TaskList'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders an empty task list'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/no tasks, start by adding one/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function-to-populate-jotai-atoms-with-initial-values",children:"#"}),"Custom Render Function to populate Jotai Atoms with Initial Values"]}),"\n",(0,r.jsxs)(n.p,{children:["To test the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks, we need to be able to populate the ",(0,r.jsx)(n.code,{children:"tasksAtom"})," with\ninitial values. We can create a custom render function that uses Jotai's ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook to\nhydrate the atoms with initial values. This function will accept the initial atoms and their\ncorresponding values as an argument."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/test-utils.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useHydrateAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { PrimitiveAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/vanilla/atom'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Jotai types are not well exported, so we will make our life easier by using `any`."})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"> "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PrimitiveAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" interface"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * Renders a React component with Jotai atoms for testing purposes."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" component - The React component to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" options - The render options including the initial atom values."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The render result from `@testing-library/react-native`."})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" component"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".initialValues}>{component}"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PropsWithChildren"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<{"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}>;"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * A wrapper component that hydrates Jotai atoms with initial values."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" initialValues - The initial values for the Jotai atoms."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" children - The child components to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The rendered children."})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"({ initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useHydrateAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(initialValues);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children;"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-the-tasklist-component-with-initial-tasks",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-the-tasklist-component-with-initial-tasks",children:"#"}),"Testing the ",(0,r.jsx)(n.code,{children:"TaskList"})," Component with initial tasks"]}),"\n",(0,r.jsxs)(n.p,{children:["We can now use the ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," function to render the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks. The\n",(0,r.jsx)(n.code,{children:"initialValues"})," property will contain the ",(0,r.jsx)(n.code,{children:"tasksAtom"}),", ",(0,r.jsx)(n.code,{children:"newTaskTitleAtom"})," and their initial values. We can then test the component to ensure that the initial tasks are rendered correctly."]}),"\n",(0,r.jsx)(i.Pq,{type:"info",title:"Info",children:(0,r.jsx)(n.p,{children:"\nIn our test, we populated only one atom and its initial value, but you can add other Jotai atoms and their corresponding values to the initialValues array as needed."})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"======="})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [{ id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '1'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy bread'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders a to do list with 1 items initially, and adds a new item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy bread/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/new task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /add task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy almond milk/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"modifying-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#modifying-atom-outside-of-react-components",children:"#"}),"Modifying atom outside of React components"]}),"\n",(0,r.jsx)(n.p,{children:"In several cases, you might need to change an atom's state outside a React component. In our case,\nwe have a set of functions to get tasks and set tasks, which change the state of the task list atom."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/state.ts",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" createStore } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[]>([]);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Available for use outside React components"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" createStore"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Selectors"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".get"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Actions"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" task]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-atom-outside-of-react-components",children:"#"}),"Testing atom outside of React components"]}),"\n",(0,r.jsxs)(n.p,{children:["You can test the ",(0,r.jsx)(n.code,{children:"getAllTasks"})," and ",(0,r.jsx)(n.code,{children:"addTask"})," functions outside the React component's scope by setting\nthe initial to-do items in the store and then checking if the functions work as expected.\nNo special setup is required to test these functions, as ",(0,r.jsx)(n.code,{children:"store.set"})," is available by default by\nJotai."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"//..."})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'modify store outside of React component'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" // Set the initial to do items in the store"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '2'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"conclusion",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#conclusion",children:"#"}),"Conclusion"]}),"\n",(0,r.jsxs)(n.p,{children:["Testing a component or a function that depends on Jotai atoms is straightforward with the help of\nthe ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook. We've seen how to create a custom render function ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," that\nsets up atoms and their initial values for testing purposes. We've also seen how to test functions\nthat change the state of atoms outside React components. This approach allows us to test components\nin different states and scenarios, ensuring they behave as expected."]})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}={...(0,o.R)(),...s.components};return n?(0,r.jsx)(n,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["13.x%2Fcookbook%2Fstate-management%2Fjotai.md"]={toc:[{id:"introduction",text:"Introduction",depth:2},{id:"task-list-example",text:"Task List Example",depth:2},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2},{id:"conclusion",text:"Conclusion",depth:2}],title:"Jotai",headingTitle:"Jotai",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/4819.c87a288763.js b/static/js/async/4819.c87a288763.js deleted file mode 100644 index 1b35f320..00000000 --- a/static/js/async/4819.c87a288763.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["4819"],{862(e,s,n){n.r(s),n.d(s,{default:()=>a});var r=n(4848),i=n(8453),l=n(7425);function o(e){let s={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#queries",children:"#"}),"Queries"]}),"\n",(0,r.jsx)(s.p,{children:"Queries are one of the main building blocks for the React Native Testing Library. They enable you to find relevant elements in the element tree, which represents your application's user interface when running under tests."}),"\n",(0,r.jsxs)(s.h2,{id:"accessing-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#accessing-queries",children:"#"}),"Accessing queries"]}),"\n",(0,r.jsxs)(s.p,{children:["All queries described below are accessible in two main ways: through the ",(0,r.jsx)(s.code,{children:"screen"})," object or by capturing the ",(0,r.jsx)(s.code,{children:"render"})," function call result."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-screen-object",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-screen-object",children:"#"}),"Using ",(0,r.jsx)(s.code,{children:"screen"})," object"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'accessing queries using \"screen\" object'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "Start"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["The modern and recommended way of accessing queries is to use the ",(0,r.jsx)(s.code,{children:"screen"})," object exported by the ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"})," package. This object will contain methods of all available queries bound to the most recently rendered UI."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-render-result",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-render-result",children:"#"}),"Using ",(0,r.jsx)(s.code,{children:"render"})," result"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'accessing queries using \"render\" result'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "Start"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["The classic way is to capture query functions, as they are returned from the ",(0,r.jsx)(s.code,{children:"render"})," function call. This provides access to the same functions as in the case of the ",(0,r.jsx)(s.code,{children:"screen"})," object."]}),"\n",(0,r.jsxs)(s.h2,{id:"query-parts",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-parts",children:"#"}),"Query parts"]}),"\n",(0,r.jsxs)(s.p,{children:["Each query is composed of two parts: variant and predicate, which are separated by the ",(0,r.jsx)(s.code,{children:"by"})," word in the middle of the name."]}),"\n",(0,r.jsx)(s.p,{children:"Consider the following query:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"txt",children:(0,r.jsx)(s.code,{children:(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{children:"getByRole()"})})})})}),"\n",(0,r.jsxs)(s.p,{children:["For this query, ",(0,r.jsx)(s.code,{children:"getBy*"})," is the query variant, and ",(0,r.jsx)(s.code,{children:"*ByRole"})," is the predicate."]}),"\n",(0,r.jsxs)(s.h2,{id:"query-variant",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-variant",children:"#"}),"Query variant"]}),"\n",(0,r.jsx)(s.p,{children:"The query variants describe the expected number (and timing) of matching elements, so they differ in their return type."}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Variant"}),(0,r.jsx)(s.th,{children:"Assertion"}),(0,r.jsx)(s.th,{children:"Return type"}),(0,r.jsx)(s.th,{children:"Is Async?"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#get-by",children:(0,r.jsx)(s.code,{children:"getBy*"})})}),(0,r.jsx)(s.td,{children:"Exactly one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"ReactTestInstance"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#get-all-by",children:(0,r.jsx)(s.code,{children:"getAllBy*"})})}),(0,r.jsx)(s.td,{children:"At least one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Array"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#query-by",children:(0,r.jsx)(s.code,{children:"queryBy*"})})}),(0,r.jsx)(s.td,{children:"Zero or one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)("code",{children:"ReactTestInstance | null"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#query-all-by",children:(0,r.jsx)(s.code,{children:"queryAllBy*"})})}),(0,r.jsx)(s.td,{children:"No assertion"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Array"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#find-by",children:(0,r.jsx)(s.code,{children:"findBy*"})})}),(0,r.jsx)(s.td,{children:"Exactly one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Promise"})}),(0,r.jsx)(s.td,{children:"Yes"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#find-all-by",children:(0,r.jsx)(s.code,{children:"findAllBy*"})})}),(0,r.jsx)(s.td,{children:"At least one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Promise>"})}),(0,r.jsx)(s.td,{children:"Yes"})]})]})]}),"\n",(0,r.jsx)(s.p,{children:"Queries work as implicit assertions on the number of matching elements and will throw an error when the assertion fails."}),"\n",(0,r.jsxs)(s.h3,{id:"get-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#get-by",children:"#"}),(0,r.jsx)(s.code,{children:"getBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getBy*"})," queries return the single matching element for a query, and throw an error if no elements match or if more than one match is found. If you need to find more than one element, then use ",(0,r.jsx)(s.code,{children:"getAllBy"}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"get-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#get-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"getAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance[]"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getAllBy*"})," queries return an array of all matching elements for a query and throw an error if no elements match."]}),"\n",(0,r.jsxs)(s.h3,{id:"query-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-by",children:"#"}),(0,r.jsx)(s.code,{children:"queryBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"queryByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" null"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"queryBy*"})," queries return the first matching node for a query, and return ",(0,r.jsx)(s.code,{children:"null"})," if no elements match. This is useful for asserting an element that is not present. This throws if more than one match is found (use ",(0,r.jsx)(s.code,{children:"queryAllBy"})," instead)."]}),"\n",(0,r.jsxs)(s.h3,{id:"query-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"queryAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"queryAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance[]"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"queryAllBy*"})," queries return an array of all matching nodes for a query and return an empty array (",(0,r.jsx)(s.code,{children:"[]"}),") when no elements match."]}),"\n",(0,r.jsxs)(s.h3,{id:"find-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#find-by",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"findBy*"})," queries return a promise which resolves when a matching element is found. The promise is rejected if no elements match or if more than one match is found after a default timeout of 1000 ms. If you need to find more than one element use ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries."]}),"\n",(0,r.jsxs)(s.h3,{id:"find-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#find-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"findAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"ReactTestInstance[]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"findAllBy*"})," queries return a promise which resolves to an array of matching elements. The promise is rejected if no elements match after a default timeout of 1000 ms."]}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\n",(0,r.jsx)(s.code,{children:"findBy*"})," and ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries accept optional ",(0,r.jsx)(s.code,{children:"waitForOptions"})," object arguments, which can contain ",(0,r.jsx)(s.code,{children:"timeout"}),", ",(0,r.jsx)(s.code,{children:"interval"})," and ",(0,r.jsx)(s.code,{children:"onTimeout"})," properties which have the same meaning as respective options for ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/misc/async.html#waitfor",children:(0,r.jsx)(s.code,{children:"waitFor"})})," function."]})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nIn cases when your ",(0,r.jsx)(s.code,{children:"findBy*"})," and ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries throw when unable to find matching elements, it is helpful to pass ",(0,r.jsx)(s.code,{children:"onTimeout: () => { screen.debug(); }"})," callback using the ",(0,r.jsx)(s.code,{children:"waitForOptions"})," parameter."]})}),"\n",(0,r.jsxs)(s.h2,{id:"query-predicates",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-predicates",children:"#"}),"Query predicates"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsxs)(s.em,{children:["Note: most methods like this one return a ",(0,r.jsx)(s.a,{href:"https://reactjs.org/docs/test-renderer.html#testinstance",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"ReactTestInstance"})})," with following properties that you may be interested in:"]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { [propName"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" any"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" parent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" children"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Array"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-role",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-role",children:"#"}),(0,r.jsx)(s.code,{children:"*ByRole"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByRole, getAllByRole, queryByRole, queryAllByRole, findByRole, findAllByRole"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" role: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" name?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextMatch"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" selected?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" checked?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'mixed'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" busy?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" expanded?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" min?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" max"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" now"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextMatch;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"role"})," or ",(0,r.jsx)(s.code,{children:"accessibilityRole"})," prop."]}),"\n",(0,r.jsxs)(l.Pq,{type:"info",title:"Info",children:[(0,r.jsxs)(s.p,{children:["\nIn order for ",(0,r.jsx)(s.code,{children:"*ByRole"})," queries to match an element it needs to be considered an accessibility element:"]}),(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"Text"}),", ",(0,r.jsx)(s.code,{children:"TextInput"})," and ",(0,r.jsx)(s.code,{children:"Switch"})," host elements are these by default."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"View"})," host elements need an explicit ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessible",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessible"})})," prop set to ",(0,r.jsx)(s.code,{children:"true"})]}),"\n",(0,r.jsxs)(s.li,{children:["Some React Native composite components like ",(0,r.jsx)(s.code,{children:"Pressable"})," & ",(0,r.jsx)(s.code,{children:"TouchableOpacity"})," render host ",(0,r.jsx)(s.code,{children:"View"})," element with ",(0,r.jsx)(s.code,{children:"accessible"})," prop already set."]}),"\n"]})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element3"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"by-role-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-role-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"name"}),": Finds an element with given ",(0,r.jsx)(s.code,{children:"role"}),"/",(0,r.jsx)(s.code,{children:"accessibilityRole"})," and an accessible name (= accessability label or text content)."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"disabled"}),": You can filter elements by their disabled state (coming either from ",(0,r.jsx)(s.code,{children:"aria-disabled"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.disabled"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"disabled: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"disabled: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"disabled"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/jest-matchers.html#tobeenabled",children:[(0,r.jsx)(s.code,{children:"toBeEnabled()"})," / ",(0,r.jsx)(s.code,{children:"toBeDisabled()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"selected"}),": You can filter elements by their selected state (coming either from ",(0,r.jsx)(s.code,{children:"aria-selected"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.selected"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"selected: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"selected: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"selected"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/jest-matchers.html#tobeselected",children:(0,r.jsx)(s.code,{children:"toBeSelected()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"checked"}),": You can filter elements by their checked state (coming either from ",(0,r.jsx)(s.code,{children:"aria-checked"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.checked"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"}),", ",(0,r.jsx)(s.code,{children:"false"}),", or ",(0,r.jsx)(s.code,{children:'"mixed"'}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"checked"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/jest-matchers.html#tobechecked",children:[(0,r.jsx)(s.code,{children:"toBeChecked()"})," / ",(0,r.jsx)(s.code,{children:"toBePartiallyChecked()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"busy"}),": You can filter elements by their busy state (coming either from ",(0,r.jsx)(s.code,{children:"aria-busy"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.busy"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"busy: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"busy: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"busy"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/jest-matchers.html#tobebusy",children:(0,r.jsx)(s.code,{children:"toBeBusy()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"expanded"}),": You can filter elements by their expanded state (coming either from ",(0,r.jsx)(s.code,{children:"aria-expanded"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.expanded"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"expanded"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/jest-matchers.html#tobeexpanded",children:[(0,r.jsx)(s.code,{children:"toBeExpanded()"})," / ",(0,r.jsx)(s.code,{children:"toBeCollapsed()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"value"}),": Filter elements by their accessibility value, based on either ",(0,r.jsx)(s.code,{children:"aria-valuemin"}),", ",(0,r.jsx)(s.code,{children:"aria-valuemax"}),", ",(0,r.jsx)(s.code,{children:"aria-valuenow"}),", ",(0,r.jsx)(s.code,{children:"aria-valuetext"})," or ",(0,r.jsx)(s.code,{children:"accessibilityValue"})," props. Accessiblity value conceptually consists of numeric ",(0,r.jsx)(s.code,{children:"min"}),", ",(0,r.jsx)(s.code,{children:"max"})," and ",(0,r.jsx)(s.code,{children:"now"})," entries, as well as string ",(0,r.jsx)(s.code,{children:"text"})," entry."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See React Native ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilityvalue",rel:"noopener noreferrer",target:"_blank",children:"accessibilityValue"})," docs to learn more about the accessibility value concept."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/jest-matchers.html#tohaveaccessibilityvalue",children:(0,r.jsx)(s.code,{children:"toHaveAccessibilityValue()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.h3,{id:"by-label-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-label-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByLabelText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByLabelText, getAllByLabelText, queryByLabelText, queryAllByLabelText, findByLabelText, findAllByLabelText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching label:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["either by matching ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#aria-label",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"aria-label"})}),"/",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitylabel",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessibilityLabel"})})," prop"]}),"\n",(0,r.jsxs)(s.li,{children:["or by matching text content of view referenced by ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#aria-labelledby-android",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"aria-labelledby"})}),"/",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitylabelledby-android",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessibilityLabelledBy"})})," prop"]}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'my-label'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-placeholder-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-placeholder-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByPlaceholderText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByPlaceholderText, getAllByPlaceholderText, queryByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," for a ",(0,r.jsx)(s.code,{children:"TextInput"})," with a matching placeholder – may be a string or regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-display-value",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-display-value",children:"#"}),(0,r.jsx)(s.code,{children:"*ByDisplayValue"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByDisplayValue, getAllByDisplayValue, queryByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByDisplayValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" value: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," for a ",(0,r.jsx)(s.code,{children:"TextInput"})," with a matching display value – may be a string or regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByDisplayValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByText, getAllByText, queryByText, queryAllByText, findByText, findAllByText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching text – may be a string or regular expression."]}),"\n",(0,r.jsxs)(s.p,{children:["This method will join ",(0,r.jsx)(s.code,{children:""})," siblings to find matches, similarly to ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/text#containers",rel:"noopener noreferrer",target:"_blank",children:"how React Native handles these components"}),". This will allow for querying for strings that will be visually rendered together, but may be semantically separate React components."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'banana'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-hint-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-hint-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByHintText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByA11yHint, getAllByA11yHint, queryByA11yHint, queryAllByA11yHint, findByA11yHint, findAllByA11yHint\ngetByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint, findByAccessibilityHint, findAllByAccessibilityHint\ngetByHintText, getAllByHintText, queryByHintText, queryAllByHintText, findByHintText, findAllByHintText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByHintText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" hint: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"accessibilityHint"})," prop."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByHintText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Plays a song'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nPlease consult ",(0,r.jsxs)(s.a,{href:"https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint",rel:"noopener noreferrer",target:"_blank",children:["Apple guidelines on how ",(0,r.jsx)(s.code,{children:"accessibilityHint"})," should be used"]}),"."]})}),"\n",(0,r.jsxs)(s.h3,{id:"by-test-id",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-test-id",children:"#"}),(0,r.jsx)(s.code,{children:"*ByTestId"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByTestId, getAllByTestId, queryByTestId, queryAllByTestId, findByTestId, findAllByTestId"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByTestId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" testId: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"testID"})," prop. ",(0,r.jsx)(s.code,{children:"testID"})," – may be a string or a regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'unique-id'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nIn the spirit of ",(0,r.jsx)(s.a,{href:"https://testing-library.com/docs/guiding-principles",rel:"noopener noreferrer",target:"_blank",children:"the guiding principles"}),", it is recommended to use this only after the other queries don't work for your use case. Using ",(0,r.jsx)(s.code,{children:"testID"})," attributes do not resemble how your software is used and should be avoided if possible. However, they are particularly useful for end-to-end testing on real devices, e.g. using Detox and it's an encouraged technique to use there. Learn more from the blog post ",(0,r.jsx)(s.a,{href:"https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change",rel:"noopener noreferrer",target:"_blank",children:'"Making your UI tests resilient to change"'}),"."]})}),"\n",(0,r.jsxs)(s.h3,{id:"common-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#common-options",children:"#"}),"Common options"]}),"\n",(0,r.jsxs)(s.p,{children:["Usually query first argument can be a ",(0,r.jsx)(s.strong,{children:"string"})," or a ",(0,r.jsx)(s.strong,{children:"regex"}),". All queries take at least the ",(0,r.jsx)(s.a,{href:"#hidden-option",children:(0,r.jsx)(s.code,{children:"hidden"})})," option as an optionnal second argument and some queries accept more options which change string matching behaviour. See ",(0,r.jsx)(s.a,{href:"#textmatch",children:"TextMatch"})," for more info."]}),"\n",(0,r.jsxs)(s.h4,{id:"includehiddenelements-option",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#includehiddenelements-option",children:"#"}),(0,r.jsx)(s.code,{children:"includeHiddenElements"})," option"]}),"\n",(0,r.jsxs)(s.p,{children:["All queries have the ",(0,r.jsx)(s.code,{children:"includeHiddenElements"})," option which affects whether ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/misc/accessibility.html#ishiddenfromaccessibility",children:"elements hidden from accessibility"})," are matched by the query. By default queries will not match hidden elements, because the users of the app would not be able to see such elements."]}),"\n",(0,r.jsxs)(s.p,{children:["You can configure the default value with the ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/misc/config.html#configure",children:[(0,r.jsx)(s.code,{children:"configure"})," function"]}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["This option is also available as ",(0,r.jsx)(s.code,{children:"hidden"})," alias for compatibility with ",(0,r.jsx)(s.a,{href:"https://testing-library.com/docs/queries/byrole#hidden",rel:"noopener noreferrer",target:"_blank",children:"React Testing Library"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Examples"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" style"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{{ display"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'none'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }}>Hidden from accessibility);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Exclude hidden elements"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Include hidden elements"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"textmatch-type",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#textmatch-type",children:"#"}),"TextMatch type"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" RegExp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Most of the query APIs take a ",(0,r.jsx)(s.code,{children:"TextMatch"})," as an argument, which means the argument can be either a ",(0,r.jsx)(s.em,{children:"string"})," or ",(0,r.jsx)(s.em,{children:"regex"}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"examples",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#examples",children:"#"}),"Examples"]}),"\n",(0,r.jsx)(s.p,{children:"Given the following render:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World);"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Will ",(0,r.jsx)(s.strong,{children:"find a match"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matching a string:"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'llo Worl'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'hello world'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ignore case-sensitivity"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matching a regex:"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/World/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/world/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match, ignore case"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"^"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"hello world"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string match, ignore case-sensitivity"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Hello W"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"oRlD/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// advanced regex"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Will ",(0,r.jsx)(s.strong,{children:"NOT find a match"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring does not match"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'llo Worl'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string does not match"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Goodbye World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// case-sensitive regex with different case"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello world/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"text-match-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#text-match-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.h4,{id:"precision",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#precision",children:"#"}),"Precision"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Queries that take a ",(0,r.jsx)(s.code,{children:"TextMatch"})," also accept an object as the second argument that can contain options that affect the precision of string matching:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"exact"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),"; matches full strings, case-sensitive. When false, matches substrings and is not case-sensitive.","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"exact"})," has no effect on regex argument."]}),"\n",(0,r.jsxs)(s.li,{children:["In most cases using a ",(0,r.jsx)(s.code,{children:"regex"})," instead of a string gives you more control over fuzzy matching and should be preferred over ",(0,r.jsx)(s.code,{children:"{ exact: false }"}),"."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"normalizer"}),": An optional function which overrides normalization behavior. See ",(0,r.jsx)(s.a,{href:"#normalization",children:"Normalization"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"exact"})," option defaults to ",(0,r.jsx)(s.code,{children:"true"})," but if you want to search for a text slice or make text matching case-insensitive you can override it. That being said we advise you to use regex in more complex scenarios."]}),"\n",(0,r.jsxs)(s.h4,{id:"normalization",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#normalization",children:"#"}),"Normalization"]}),"\n",(0,r.jsx)(s.p,{children:"Before running any matching logic against text, it is automatically normalized. By default, normalization consists of trimming whitespace from the start and end of text, and collapsing multiple adjacent whitespace characters into a single space."}),"\n",(0,r.jsxs)(s.p,{children:["If you want to prevent that normalization, or provide alternative normalization (e.g. to remove Unicode control characters), you can provide a ",(0,r.jsx)(s.code,{children:"normalizer"})," function in the options object. This function will be given a string and is expected to return a normalized version of that string."]}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nSpecifying a value for ",(0,r.jsx)(s.code,{children:"normalizer"})," replaces the built-in normalization, but you can call ",(0,r.jsx)(s.code,{children:"getDefaultNormalizer"})," to obtain a built-in normalizer, either to adjust that normalization or to call it from your own normalizer."]})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getDefaultNormalizer"})," take options object which allows the selection of behaviour:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"trim"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),". Trims leading and trailing whitespace."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"collapseWhitespace"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),". Collapses inner whitespace (newlines, tabs repeated spaces) into a single space."]}),"\n"]}),"\n",(0,r.jsxs)(s.h5,{id:"normalization-examples",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#normalization-examples",children:"#"}),"Normalization Examples"]}),"\n",(0,r.jsx)(s.p,{children:"To perform a match against text without trimming:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(node"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getDefaultNormalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ trim"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"To override normalization to remove some Unicode characters whilst keeping some (but not all) of the built-in normalization behavior:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(node"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (str) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getDefaultNormalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ trim"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })(str)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".replace"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/[\\u200E-\\u200F]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"*"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"g"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ''"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"legacy-unit-testing-helpers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#legacy-unit-testing-helpers",children:"#"}),"Legacy unit testing helpers"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"render"})," from ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"})," exposes additional queries that ",(0,r.jsx)(s.strong,{children:"should not be used in integration or component testing"}),", but some users (like component library creators) interested in unit testing some components may find helpful."]}),"\n",(0,r.jsx)(s.p,{children:"The interface is the same as for other queries, but we won't provide full names so that they're harder to find by search engines."}),"\n",(0,r.jsxs)(s.h3,{id:"unsafe_bytype",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unsafe_bytype",children:"#"}),(0,r.jsx)(s.code,{children:"UNSAFE_ByType"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"UNSAFE_getByType, UNSAFE_getAllByType, UNSAFE_queryByType, UNSAFE_queryAllByType"}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching a React component type."]}),"\n",(0,r.jsx)(l.Pq,{type:"caution",title:"Caution",children:(0,r.jsx)(s.p,{children:"\nThis query has been marked unsafe, since it requires knowledge about implementation details of the component. Use responsibly."})}),"\n",(0,r.jsxs)(s.h3,{id:"unsafe_byprops",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unsafe_byprops",children:"#"}),(0,r.jsx)(s.code,{children:"UNSAFE_ByProps"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"UNSAFE_getByProps, UNSAFE_getAllByProps, UNSAFE_queryByProps, UNSAFE_queryAllByProps"}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching props object."]}),"\n",(0,r.jsx)(l.Pq,{type:"caution",title:"Caution",children:(0,r.jsx)(s.p,{children:"\nThis query has been marked unsafe, since it requires knowledge about implementation details of the component. Use responsibly."})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["12.x%2Fdocs%2Fapi%2Fqueries.mdx"]={toc:[{id:"accessing-queries",text:"Accessing queries",depth:2},{id:"using-screen-object",text:"Using `screen` object",depth:3},{id:"using-render-result",text:"Using `render` result",depth:3},{id:"query-parts",text:"Query parts",depth:2},{id:"query-variant",text:"Query variant",depth:2},{id:"get-by",text:"`getBy*` queries",depth:3},{id:"get-all-by",text:"`getAllBy*` queries",depth:3},{id:"query-by",text:"`queryBy*` queries",depth:3},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3},{id:"find-by",text:"`findBy*` queries",depth:3},{id:"find-all-by",text:"`findAllBy*` queries",depth:3},{id:"query-predicates",text:"Query predicates",depth:2},{id:"by-role",text:"`*ByRole`",depth:3},{id:"by-role-options",text:"Options",depth:4},{id:"by-label-text",text:"`*ByLabelText`",depth:3},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3},{id:"by-text",text:"`*ByText`",depth:3},{id:"by-hint-text",text:"`*ByHintText`",depth:3},{id:"by-test-id",text:"`*ByTestId`",depth:3},{id:"common-options",text:"Common options",depth:3},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4},{id:"textmatch-type",text:"TextMatch type",depth:2},{id:"examples",text:"Examples",depth:3},{id:"text-match-options",text:"Options",depth:3},{id:"precision",text:"Precision",depth:4},{id:"normalization",text:"Normalization",depth:4},{id:"legacy-unit-testing-helpers",text:"Legacy unit testing helpers",depth:2},{id:"unsafe_bytype",text:"`UNSAFE_ByType`",depth:3},{id:"unsafe_byprops",text:"`UNSAFE_ByProps`",depth:3}],title:"Queries",headingTitle:"Queries",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/4819.fd5144df7d.js b/static/js/async/4819.fd5144df7d.js new file mode 100644 index 00000000..f8708c44 --- /dev/null +++ b/static/js/async/4819.fd5144df7d.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["4819"],{862(e,s,n){n.r(s),n.d(s,{default:()=>a});var r=n(4848),i=n(8453),l=n(7425);function o(e){let s={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#queries",children:"#"}),"Queries"]}),"\n",(0,r.jsx)(s.p,{children:"Queries are one of the main building blocks for the React Native Testing Library. They enable you to find relevant elements in the element tree, which represents your application's user interface when running under tests."}),"\n",(0,r.jsxs)(s.h2,{id:"accessing-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#accessing-queries",children:"#"}),"Accessing queries"]}),"\n",(0,r.jsxs)(s.p,{children:["All queries described below are accessible in two main ways: through the ",(0,r.jsx)(s.code,{children:"screen"})," object or by capturing the ",(0,r.jsx)(s.code,{children:"render"})," function call result."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-screen-object",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-screen-object",children:"#"}),"Using ",(0,r.jsx)(s.code,{children:"screen"})," object"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'accessing queries using \"screen\" object'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "Start"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["The modern and recommended way of accessing queries is to use the ",(0,r.jsx)(s.code,{children:"screen"})," object exported by the ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"})," package. This object will contain methods of all available queries bound to the most recently rendered UI."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-render-result",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-render-result",children:"#"}),"Using ",(0,r.jsx)(s.code,{children:"render"})," result"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'accessing queries using \"render\" result'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "Start"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["The classic way is to capture query functions, as they are returned from the ",(0,r.jsx)(s.code,{children:"render"})," function call. This provides access to the same functions as in the case of the ",(0,r.jsx)(s.code,{children:"screen"})," object."]}),"\n",(0,r.jsxs)(s.h2,{id:"query-parts",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-parts",children:"#"}),"Query parts"]}),"\n",(0,r.jsxs)(s.p,{children:["Each query is composed of two parts: variant and predicate, which are separated by the ",(0,r.jsx)(s.code,{children:"by"})," word in the middle of the name."]}),"\n",(0,r.jsx)(s.p,{children:"Consider the following query:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"txt",children:(0,r.jsx)(s.code,{children:(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{children:"getByRole()"})})})})}),"\n",(0,r.jsxs)(s.p,{children:["For this query, ",(0,r.jsx)(s.code,{children:"getBy*"})," is the query variant, and ",(0,r.jsx)(s.code,{children:"*ByRole"})," is the predicate."]}),"\n",(0,r.jsxs)(s.h2,{id:"query-variant",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-variant",children:"#"}),"Query variant"]}),"\n",(0,r.jsx)(s.p,{children:"The query variants describe the expected number (and timing) of matching elements, so they differ in their return type."}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Variant"}),(0,r.jsx)(s.th,{children:"Assertion"}),(0,r.jsx)(s.th,{children:"Return type"}),(0,r.jsx)(s.th,{children:"Is Async?"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#get-by",children:(0,r.jsx)(s.code,{children:"getBy*"})})}),(0,r.jsx)(s.td,{children:"Exactly one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"ReactTestInstance"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#get-all-by",children:(0,r.jsx)(s.code,{children:"getAllBy*"})})}),(0,r.jsx)(s.td,{children:"At least one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Array"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#query-by",children:(0,r.jsx)(s.code,{children:"queryBy*"})})}),(0,r.jsx)(s.td,{children:"Zero or one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)("code",{children:"ReactTestInstance | null"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#query-all-by",children:(0,r.jsx)(s.code,{children:"queryAllBy*"})})}),(0,r.jsx)(s.td,{children:"No assertion"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Array"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#find-by",children:(0,r.jsx)(s.code,{children:"findBy*"})})}),(0,r.jsx)(s.td,{children:"Exactly one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Promise"})}),(0,r.jsx)(s.td,{children:"Yes"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#find-all-by",children:(0,r.jsx)(s.code,{children:"findAllBy*"})})}),(0,r.jsx)(s.td,{children:"At least one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Promise>"})}),(0,r.jsx)(s.td,{children:"Yes"})]})]})]}),"\n",(0,r.jsx)(s.p,{children:"Queries work as implicit assertions on the number of matching elements and will throw an error when the assertion fails."}),"\n",(0,r.jsxs)(s.h3,{id:"get-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#get-by",children:"#"}),(0,r.jsx)(s.code,{children:"getBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getBy*"})," queries return the single matching element for a query, and throw an error if no elements match or if more than one match is found. If you need to find more than one element, then use ",(0,r.jsx)(s.code,{children:"getAllBy"}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"get-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#get-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"getAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance[]"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getAllBy*"})," queries return an array of all matching elements for a query and throw an error if no elements match."]}),"\n",(0,r.jsxs)(s.h3,{id:"query-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-by",children:"#"}),(0,r.jsx)(s.code,{children:"queryBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"queryByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" null"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"queryBy*"})," queries return the first matching node for a query, and return ",(0,r.jsx)(s.code,{children:"null"})," if no elements match. This is useful for asserting an element that is not present. This throws if more than one match is found (use ",(0,r.jsx)(s.code,{children:"queryAllBy"})," instead)."]}),"\n",(0,r.jsxs)(s.h3,{id:"query-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"queryAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"queryAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance[]"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"queryAllBy*"})," queries return an array of all matching nodes for a query and return an empty array (",(0,r.jsx)(s.code,{children:"[]"}),") when no elements match."]}),"\n",(0,r.jsxs)(s.h3,{id:"find-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#find-by",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"findBy*"})," queries return a promise which resolves when a matching element is found. The promise is rejected if no elements match or if more than one match is found after a default timeout of 1000 ms. If you need to find more than one element use ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries."]}),"\n",(0,r.jsxs)(s.h3,{id:"find-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#find-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"findAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"ReactTestInstance[]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"findAllBy*"})," queries return a promise which resolves to an array of matching elements. The promise is rejected if no elements match after a default timeout of 1000 ms."]}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\n",(0,r.jsx)(s.code,{children:"findBy*"})," and ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries accept optional ",(0,r.jsx)(s.code,{children:"waitForOptions"})," object arguments, which can contain ",(0,r.jsx)(s.code,{children:"timeout"}),", ",(0,r.jsx)(s.code,{children:"interval"})," and ",(0,r.jsx)(s.code,{children:"onTimeout"})," properties which have the same meaning as respective options for ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/misc/async.html#waitfor",children:(0,r.jsx)(s.code,{children:"waitFor"})})," function."]})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nIn cases when your ",(0,r.jsx)(s.code,{children:"findBy*"})," and ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries throw when unable to find matching elements, it is helpful to pass ",(0,r.jsx)(s.code,{children:"onTimeout: () => { screen.debug(); }"})," callback using the ",(0,r.jsx)(s.code,{children:"waitForOptions"})," parameter."]})}),"\n",(0,r.jsxs)(s.h2,{id:"query-predicates",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-predicates",children:"#"}),"Query predicates"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsxs)(s.em,{children:["Note: most methods like this one return a ",(0,r.jsx)(s.a,{href:"https://reactjs.org/docs/test-renderer.html#testinstance",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"ReactTestInstance"})})," with following properties that you may be interested in:"]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { [propName"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" any"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" parent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" children"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Array"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-role",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-role",children:"#"}),(0,r.jsx)(s.code,{children:"*ByRole"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByRole, getAllByRole, queryByRole, queryAllByRole, findByRole, findAllByRole"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" role: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" name?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextMatch"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" selected?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" checked?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'mixed'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" busy?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" expanded?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" min?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" max"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" now"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextMatch;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"role"})," or ",(0,r.jsx)(s.code,{children:"accessibilityRole"})," prop."]}),"\n",(0,r.jsxs)(l.Pq,{type:"info",title:"Info",children:[(0,r.jsxs)(s.p,{children:["\nIn order for ",(0,r.jsx)(s.code,{children:"*ByRole"})," queries to match an element it needs to be considered an accessibility element:"]}),(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"Text"}),", ",(0,r.jsx)(s.code,{children:"TextInput"})," and ",(0,r.jsx)(s.code,{children:"Switch"})," host elements are these by default."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"View"})," host elements need an explicit ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessible",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessible"})})," prop set to ",(0,r.jsx)(s.code,{children:"true"})]}),"\n",(0,r.jsxs)(s.li,{children:["Some React Native composite components like ",(0,r.jsx)(s.code,{children:"Pressable"})," & ",(0,r.jsx)(s.code,{children:"TouchableOpacity"})," render host ",(0,r.jsx)(s.code,{children:"View"})," element with ",(0,r.jsx)(s.code,{children:"accessible"})," prop already set."]}),"\n"]})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element3"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"by-role-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-role-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"name"}),": Finds an element with given ",(0,r.jsx)(s.code,{children:"role"}),"/",(0,r.jsx)(s.code,{children:"accessibilityRole"})," and an accessible name (= accessability label or text content)."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"disabled"}),": You can filter elements by their disabled state (coming either from ",(0,r.jsx)(s.code,{children:"aria-disabled"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.disabled"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"disabled: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"disabled: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"disabled"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/jest-matchers.html#tobeenabled",children:[(0,r.jsx)(s.code,{children:"toBeEnabled()"})," / ",(0,r.jsx)(s.code,{children:"toBeDisabled()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"selected"}),": You can filter elements by their selected state (coming either from ",(0,r.jsx)(s.code,{children:"aria-selected"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.selected"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"selected: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"selected: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"selected"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/jest-matchers.html#tobeselected",children:(0,r.jsx)(s.code,{children:"toBeSelected()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"checked"}),": You can filter elements by their checked state (coming either from ",(0,r.jsx)(s.code,{children:"aria-checked"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.checked"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"}),", ",(0,r.jsx)(s.code,{children:"false"}),", or ",(0,r.jsx)(s.code,{children:'"mixed"'}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"checked"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/jest-matchers.html#tobechecked",children:[(0,r.jsx)(s.code,{children:"toBeChecked()"})," / ",(0,r.jsx)(s.code,{children:"toBePartiallyChecked()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"busy"}),": You can filter elements by their busy state (coming either from ",(0,r.jsx)(s.code,{children:"aria-busy"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.busy"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"busy: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"busy: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"busy"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/jest-matchers.html#tobebusy",children:(0,r.jsx)(s.code,{children:"toBeBusy()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"expanded"}),": You can filter elements by their expanded state (coming either from ",(0,r.jsx)(s.code,{children:"aria-expanded"})," prop or ",(0,r.jsx)(s.code,{children:"accessbilityState.expanded"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"expanded"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/jest-matchers.html#tobeexpanded",children:[(0,r.jsx)(s.code,{children:"toBeExpanded()"})," / ",(0,r.jsx)(s.code,{children:"toBeCollapsed()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"value"}),": Filter elements by their accessibility value, based on either ",(0,r.jsx)(s.code,{children:"aria-valuemin"}),", ",(0,r.jsx)(s.code,{children:"aria-valuemax"}),", ",(0,r.jsx)(s.code,{children:"aria-valuenow"}),", ",(0,r.jsx)(s.code,{children:"aria-valuetext"})," or ",(0,r.jsx)(s.code,{children:"accessibilityValue"})," props. Accessiblity value conceptually consists of numeric ",(0,r.jsx)(s.code,{children:"min"}),", ",(0,r.jsx)(s.code,{children:"max"})," and ",(0,r.jsx)(s.code,{children:"now"})," entries, as well as string ",(0,r.jsx)(s.code,{children:"text"})," entry."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See React Native ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilityvalue",rel:"noopener noreferrer",target:"_blank",children:"accessibilityValue"})," docs to learn more about the accessibility value concept."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/jest-matchers.html#tohaveaccessibilityvalue",children:(0,r.jsx)(s.code,{children:"toHaveAccessibilityValue()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.h3,{id:"by-label-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-label-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByLabelText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByLabelText, getAllByLabelText, queryByLabelText, queryAllByLabelText, findByLabelText, findAllByLabelText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching label:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["either by matching ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#aria-label",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"aria-label"})}),"/",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitylabel",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessibilityLabel"})})," prop"]}),"\n",(0,r.jsxs)(s.li,{children:["or by matching text content of view referenced by ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#aria-labelledby-android",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"aria-labelledby"})}),"/",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitylabelledby-android",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessibilityLabelledBy"})})," prop"]}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'my-label'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-placeholder-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-placeholder-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByPlaceholderText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByPlaceholderText, getAllByPlaceholderText, queryByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," for a ",(0,r.jsx)(s.code,{children:"TextInput"})," with a matching placeholder – may be a string or regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-display-value",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-display-value",children:"#"}),(0,r.jsx)(s.code,{children:"*ByDisplayValue"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByDisplayValue, getAllByDisplayValue, queryByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByDisplayValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" value: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," for a ",(0,r.jsx)(s.code,{children:"TextInput"})," with a matching display value – may be a string or regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByDisplayValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByText, getAllByText, queryByText, queryAllByText, findByText, findAllByText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching text – may be a string or regular expression."]}),"\n",(0,r.jsxs)(s.p,{children:["This method will join ",(0,r.jsx)(s.code,{children:""})," siblings to find matches, similarly to ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/text#containers",rel:"noopener noreferrer",target:"_blank",children:"how React Native handles these components"}),". This will allow for querying for strings that will be visually rendered together, but may be semantically separate React components."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'banana'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-hint-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-hint-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByHintText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByA11yHint, getAllByA11yHint, queryByA11yHint, queryAllByA11yHint, findByA11yHint, findAllByA11yHint\ngetByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint, findByAccessibilityHint, findAllByAccessibilityHint\ngetByHintText, getAllByHintText, queryByHintText, queryAllByHintText, findByHintText, findAllByHintText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByHintText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" hint: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"accessibilityHint"})," prop."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByHintText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Plays a song'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nPlease consult ",(0,r.jsxs)(s.a,{href:"https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint",rel:"noopener noreferrer",target:"_blank",children:["Apple guidelines on how ",(0,r.jsx)(s.code,{children:"accessibilityHint"})," should be used"]}),"."]})}),"\n",(0,r.jsxs)(s.h3,{id:"by-test-id",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-test-id",children:"#"}),(0,r.jsx)(s.code,{children:"*ByTestId"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByTestId, getAllByTestId, queryByTestId, queryAllByTestId, findByTestId, findAllByTestId"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByTestId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" testId: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"testID"})," prop. ",(0,r.jsx)(s.code,{children:"testID"})," – may be a string or a regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'unique-id'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nIn the spirit of ",(0,r.jsx)(s.a,{href:"https://testing-library.com/docs/guiding-principles",rel:"noopener noreferrer",target:"_blank",children:"the guiding principles"}),", it is recommended to use this only after the other queries don't work for your use case. Using ",(0,r.jsx)(s.code,{children:"testID"})," attributes do not resemble how your software is used and should be avoided if possible. However, they are particularly useful for end-to-end testing on real devices, e.g. using Detox and it's an encouraged technique to use there. Learn more from the blog post ",(0,r.jsx)(s.a,{href:"https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change",rel:"noopener noreferrer",target:"_blank",children:'"Making your UI tests resilient to change"'}),"."]})}),"\n",(0,r.jsxs)(s.h3,{id:"common-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#common-options",children:"#"}),"Common options"]}),"\n",(0,r.jsxs)(s.p,{children:["Usually query first argument can be a ",(0,r.jsx)(s.strong,{children:"string"})," or a ",(0,r.jsx)(s.strong,{children:"regex"}),". All queries take at least the ",(0,r.jsx)(s.a,{href:"#hidden-option",children:(0,r.jsx)(s.code,{children:"hidden"})})," option as an optionnal second argument and some queries accept more options which change string matching behaviour. See ",(0,r.jsx)(s.a,{href:"#textmatch",children:"TextMatch"})," for more info."]}),"\n",(0,r.jsxs)(s.h4,{id:"includehiddenelements-option",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#includehiddenelements-option",children:"#"}),(0,r.jsx)(s.code,{children:"includeHiddenElements"})," option"]}),"\n",(0,r.jsxs)(s.p,{children:["All queries have the ",(0,r.jsx)(s.code,{children:"includeHiddenElements"})," option which affects whether ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/misc/accessibility.html#ishiddenfromaccessibility",children:"elements hidden from accessibility"})," are matched by the query. By default queries will not match hidden elements, because the users of the app would not be able to see such elements."]}),"\n",(0,r.jsxs)(s.p,{children:["You can configure the default value with the ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/misc/config.html#configure",children:[(0,r.jsx)(s.code,{children:"configure"})," function"]}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["This option is also available as ",(0,r.jsx)(s.code,{children:"hidden"})," alias for compatibility with ",(0,r.jsx)(s.a,{href:"https://testing-library.com/docs/queries/byrole#hidden",rel:"noopener noreferrer",target:"_blank",children:"React Testing Library"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Examples"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" style"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{{ display"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'none'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }}>Hidden from accessibility);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Exclude hidden elements"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Include hidden elements"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"textmatch-type",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#textmatch-type",children:"#"}),"TextMatch type"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" RegExp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Most of the query APIs take a ",(0,r.jsx)(s.code,{children:"TextMatch"})," as an argument, which means the argument can be either a ",(0,r.jsx)(s.em,{children:"string"})," or ",(0,r.jsx)(s.em,{children:"regex"}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"examples",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#examples",children:"#"}),"Examples"]}),"\n",(0,r.jsx)(s.p,{children:"Given the following render:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World);"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Will ",(0,r.jsx)(s.strong,{children:"find a match"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matching a string:"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'llo Worl'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'hello world'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ignore case-sensitivity"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matching a regex:"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/World/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/world/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match, ignore case"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"^"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"hello world"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string match, ignore case-sensitivity"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Hello W"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"oRlD/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// advanced regex"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Will ",(0,r.jsx)(s.strong,{children:"NOT find a match"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring does not match"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'llo Worl'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string does not match"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Goodbye World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// case-sensitive regex with different case"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello world/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"text-match-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#text-match-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.h4,{id:"precision",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#precision",children:"#"}),"Precision"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Queries that take a ",(0,r.jsx)(s.code,{children:"TextMatch"})," also accept an object as the second argument that can contain options that affect the precision of string matching:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"exact"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),"; matches full strings, case-sensitive. When false, matches substrings and is not case-sensitive.","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"exact"})," has no effect on regex argument."]}),"\n",(0,r.jsxs)(s.li,{children:["In most cases using a ",(0,r.jsx)(s.code,{children:"regex"})," instead of a string gives you more control over fuzzy matching and should be preferred over ",(0,r.jsx)(s.code,{children:"{ exact: false }"}),"."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"normalizer"}),": An optional function which overrides normalization behavior. See ",(0,r.jsx)(s.a,{href:"#normalization",children:"Normalization"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"exact"})," option defaults to ",(0,r.jsx)(s.code,{children:"true"})," but if you want to search for a text slice or make text matching case-insensitive you can override it. That being said we advise you to use regex in more complex scenarios."]}),"\n",(0,r.jsxs)(s.h4,{id:"normalization",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#normalization",children:"#"}),"Normalization"]}),"\n",(0,r.jsx)(s.p,{children:"Before running any matching logic against text, it is automatically normalized. By default, normalization consists of trimming whitespace from the start and end of text, and collapsing multiple adjacent whitespace characters into a single space."}),"\n",(0,r.jsxs)(s.p,{children:["If you want to prevent that normalization, or provide alternative normalization (e.g. to remove Unicode control characters), you can provide a ",(0,r.jsx)(s.code,{children:"normalizer"})," function in the options object. This function will be given a string and is expected to return a normalized version of that string."]}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nSpecifying a value for ",(0,r.jsx)(s.code,{children:"normalizer"})," replaces the built-in normalization, but you can call ",(0,r.jsx)(s.code,{children:"getDefaultNormalizer"})," to obtain a built-in normalizer, either to adjust that normalization or to call it from your own normalizer."]})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getDefaultNormalizer"})," take options object which allows the selection of behaviour:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"trim"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),". Trims leading and trailing whitespace."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"collapseWhitespace"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),". Collapses inner whitespace (newlines, tabs repeated spaces) into a single space."]}),"\n"]}),"\n",(0,r.jsxs)(s.h5,{id:"normalization-examples",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#normalization-examples",children:"#"}),"Normalization Examples"]}),"\n",(0,r.jsx)(s.p,{children:"To perform a match against text without trimming:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(node"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getDefaultNormalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ trim"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"To override normalization to remove some Unicode characters whilst keeping some (but not all) of the built-in normalization behavior:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(node"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (str) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getDefaultNormalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ trim"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })(str)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".replace"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/[\\u200E-\\u200F]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"*"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"g"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ''"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"legacy-unit-testing-helpers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#legacy-unit-testing-helpers",children:"#"}),"Legacy unit testing helpers"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"render"})," from ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"})," exposes additional queries that ",(0,r.jsx)(s.strong,{children:"should not be used in integration or component testing"}),", but some users (like component library creators) interested in unit testing some components may find helpful."]}),"\n",(0,r.jsx)(s.p,{children:"The interface is the same as for other queries, but we won't provide full names so that they're harder to find by search engines."}),"\n",(0,r.jsxs)(s.h3,{id:"unsafe_bytype",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unsafe_bytype",children:"#"}),(0,r.jsx)(s.code,{children:"UNSAFE_ByType"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"UNSAFE_getByType, UNSAFE_getAllByType, UNSAFE_queryByType, UNSAFE_queryAllByType"}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching a React component type."]}),"\n",(0,r.jsx)(l.Pq,{type:"caution",title:"Caution",children:(0,r.jsx)(s.p,{children:"\nThis query has been marked unsafe, since it requires knowledge about implementation details of the component. Use responsibly."})}),"\n",(0,r.jsxs)(s.h3,{id:"unsafe_byprops",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unsafe_byprops",children:"#"}),(0,r.jsx)(s.code,{children:"UNSAFE_ByProps"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"UNSAFE_getByProps, UNSAFE_getAllByProps, UNSAFE_queryByProps, UNSAFE_queryAllByProps"}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching props object."]}),"\n",(0,r.jsx)(l.Pq,{type:"caution",title:"Caution",children:(0,r.jsx)(s.p,{children:"\nThis query has been marked unsafe, since it requires knowledge about implementation details of the component. Use responsibly."})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["12.x%2Fdocs%2Fapi%2Fqueries.mdx"]={toc:[{id:"accessing-queries",text:"Accessing queries",depth:2},{id:"using-screen-object",text:"Using `screen` object",depth:3},{id:"using-render-result",text:"Using `render` result",depth:3},{id:"query-parts",text:"Query parts",depth:2},{id:"query-variant",text:"Query variant",depth:2},{id:"get-by",text:"`getBy*` queries",depth:3},{id:"get-all-by",text:"`getAllBy*` queries",depth:3},{id:"query-by",text:"`queryBy*` queries",depth:3},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3},{id:"find-by",text:"`findBy*` queries",depth:3},{id:"find-all-by",text:"`findAllBy*` queries",depth:3},{id:"query-predicates",text:"Query predicates",depth:2},{id:"by-role",text:"`*ByRole`",depth:3},{id:"by-role-options",text:"Options",depth:4},{id:"by-label-text",text:"`*ByLabelText`",depth:3},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3},{id:"by-text",text:"`*ByText`",depth:3},{id:"by-hint-text",text:"`*ByHintText`",depth:3},{id:"by-test-id",text:"`*ByTestId`",depth:3},{id:"common-options",text:"Common options",depth:3},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4},{id:"textmatch-type",text:"TextMatch type",depth:2},{id:"examples",text:"Examples",depth:3},{id:"text-match-options",text:"Options",depth:3},{id:"precision",text:"Precision",depth:4},{id:"normalization",text:"Normalization",depth:4},{id:"legacy-unit-testing-helpers",text:"Legacy unit testing helpers",depth:2},{id:"unsafe_bytype",text:"`UNSAFE_ByType`",depth:3},{id:"unsafe_byprops",text:"`UNSAFE_ByProps`",depth:3}],title:"Queries",headingTitle:"Queries",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/4936.19c9836cd9.js b/static/js/async/4936.19c9836cd9.js deleted file mode 100644 index 14a3a19a..00000000 --- a/static/js/async/4936.19c9836cd9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["4936"],{4107(s,e,n){n.r(e),n.d(e,{default:()=>a});var r=n(4848),o=n(8453),i=n(7425);function l(s){let e={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"fire-event-api",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fire-event-api",children:"#"}),"Fire Event API"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventName"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"[])"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(i.Pq,{type:"note",title:"Note",children:[(0,r.jsxs)(e.p,{children:["\nFor common events like ",(0,r.jsx)(e.code,{children:"press"})," or ",(0,r.jsx)(e.code,{children:"type"})," it's recommended to use ",(0,r.jsx)(e.a,{href:"/12.x/docs/api/events/user-event.html",children:"User Event API"})," as it offers\nmore realistic event simulation by emitting a sequence of events with proper event objects that mimic React Native runtime behavior."]}),(0,r.jsx)(e.p,{children:"Use Fire Event for cases not supported by User Event and for triggering event handlers on composite components."})]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"fireEvent"})," API allows you to trigger all kinds of event handlers on both host and composite components. It will try to invoke a single event handler traversing the component tree bottom-up from passed element and trying to find enabled event handler named ",(0,r.jsx)(e.code,{children:"onXxx"})," when ",(0,r.jsx)(e.code,{children:"xxx"})," is the name of the event passed."]}),"\n",(0,r.jsx)(e.p,{children:"Unlike User Event, this API does not automatically pass event object to event handler, this is responsibility of the user to construct such object."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'fire changeText event'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onEventMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // MyComponent renders TextInput which has a placeholder 'Enter details'"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // and with `onChangeText` bound to handleChangeText"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" handleChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onEventMock} />"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'change'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'onChangeText'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'ab'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(onEventMock)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'ab'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nPlease note that from version ",(0,r.jsx)(e.code,{children:"7.0"})," ",(0,r.jsx)(e.code,{children:"fireEvent"})," performs checks that should prevent events firing on disabled elements."]})}),"\n",(0,r.jsxs)(e.p,{children:["An example using ",(0,r.jsx)(e.code,{children:"fireEvent"})," with native events that aren't already aliased by the ",(0,r.jsx)(e.code,{children:"fireEvent"})," api."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onBlurMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"my placeholder"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onBlur"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onBlurMock} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// you can omit the `on` prefix"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'my placeholder'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'blur'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["FireEvent exposes convenience methods for common events like: ",(0,r.jsx)(e.code,{children:"press"}),", ",(0,r.jsx)(e.code,{children:"changeText"}),", ",(0,r.jsx)(e.code,{children:"scroll"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"press",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#press",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.press"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"txt",children:(0,r.jsx)(e.code,{children:(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{children:"fireEvent.press: (element: ReactTestInstance, ...data: Array) => void"})})})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nIt is recommended to use the User Event ",(0,r.jsx)(e.a,{href:"/12.x/docs/api/events/user-event.html#press",children:(0,r.jsx)(e.code,{children:"press()"})})," helper instead as it offers more realistic simulation of press interaction, including pressable support."]})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"press"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TouchableOpacity } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onPressMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" eventData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pageX"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TouchableOpacity"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onPressMock}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Press me"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventData);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(onPressMock)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(eventData);"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"change-text",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#change-text",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.changeText"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"txt",children:(0,r.jsx)(e.code,{children:(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{children:"fireEvent.changeText: (element: ReactTestInstance, ...data: Array) => void"})})})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nIt is recommended to use the User Event ",(0,r.jsx)(e.a,{href:"/12.x/docs/api/events/user-event.html#type",children:(0,r.jsx)(e.code,{children:"type()"})})," helper instead as it offers more realistic simulation of text change interaction, including key-by-key typing, element focus, and other editing events."]})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"changeText"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onChangeTextMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" CHANGE_TEXT"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'content'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Enter data"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onChangeTextMock} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".changeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter data'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" CHANGE_TEXT"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"scroll",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#scroll",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.scroll"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"txt",children:(0,r.jsx)(e.code,{children:(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{children:"fireEvent.scroll: (element: ReactTestInstance, ...data: Array) => void"})})})})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"scroll"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsxs)(e.h4,{id:"on-a-scrollview",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#on-a-scrollview",children:"#"}),"On a ",(0,r.jsx)(e.code,{children:"ScrollView"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { ScrollView"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onScrollMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" eventData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" contentOffset"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" y"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 200"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ScrollView"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onScroll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onScrollMock}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">XD"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".scroll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'scroll-view'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventData);"})]})]})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["Prefer using ",(0,r.jsx)(e.a,{href:"/12.x/docs/api/events/user-event.html#scrollto",children:(0,r.jsx)(e.code,{children:"user.scrollTo"})})," over ",(0,r.jsx)(e.code,{children:"fireEvent.scroll"})," for ",(0,r.jsx)(e.code,{children:"ScrollView"}),", ",(0,r.jsx)(e.code,{children:"FlatList"}),", and ",(0,r.jsx)(e.code,{children:"SectionList"})," components. User Event provides a more realistic event simulation based on React Native runtime behavior."]})})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["12.x%2Fdocs%2Fapi%2Fevents%2Ffire-event.mdx"]={toc:[{id:"press",text:"`fireEvent.press`",depth:3},{id:"change-text",text:"`fireEvent.changeText`",depth:3},{id:"scroll",text:"`fireEvent.scroll`",depth:3},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4}],title:"Fire Event API",headingTitle:"Fire Event API",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/4936.e8c067c941.js b/static/js/async/4936.e8c067c941.js new file mode 100644 index 00000000..90a6641c --- /dev/null +++ b/static/js/async/4936.e8c067c941.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["4936"],{4107(s,e,n){n.r(e),n.d(e,{default:()=>a});var r=n(4848),o=n(8453),i=n(7425);function l(s){let e={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"fire-event-api",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fire-event-api",children:"#"}),"Fire Event API"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventName"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"[])"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(i.Pq,{type:"note",title:"Note",children:[(0,r.jsxs)(e.p,{children:["\nFor common events like ",(0,r.jsx)(e.code,{children:"press"})," or ",(0,r.jsx)(e.code,{children:"type"})," it's recommended to use ",(0,r.jsx)(e.a,{href:"/12.x/docs/api/events/user-event.html",children:"User Event API"})," as it offers\nmore realistic event simulation by emitting a sequence of events with proper event objects that mimic React Native runtime behavior."]}),(0,r.jsx)(e.p,{children:"Use Fire Event for cases not supported by User Event and for triggering event handlers on composite components."})]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"fireEvent"})," API allows you to trigger all kinds of event handlers on both host and composite components. It will try to invoke a single event handler traversing the component tree bottom-up from passed element and trying to find enabled event handler named ",(0,r.jsx)(e.code,{children:"onXxx"})," when ",(0,r.jsx)(e.code,{children:"xxx"})," is the name of the event passed."]}),"\n",(0,r.jsx)(e.p,{children:"Unlike User Event, this API does not automatically pass event object to event handler, this is responsibility of the user to construct such object."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'fire changeText event'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onEventMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // MyComponent renders TextInput which has a placeholder 'Enter details'"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // and with `onChangeText` bound to handleChangeText"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" handleChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onEventMock} />"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'change'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'onChangeText'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'ab'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(onEventMock)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'ab'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nPlease note that from version ",(0,r.jsx)(e.code,{children:"7.0"})," ",(0,r.jsx)(e.code,{children:"fireEvent"})," performs checks that should prevent events firing on disabled elements."]})}),"\n",(0,r.jsxs)(e.p,{children:["An example using ",(0,r.jsx)(e.code,{children:"fireEvent"})," with native events that aren't already aliased by the ",(0,r.jsx)(e.code,{children:"fireEvent"})," api."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" render } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onBlurMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"my placeholder"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onBlur"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onBlurMock} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// you can omit the `on` prefix"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'my placeholder'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'blur'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["FireEvent exposes convenience methods for common events like: ",(0,r.jsx)(e.code,{children:"press"}),", ",(0,r.jsx)(e.code,{children:"changeText"}),", ",(0,r.jsx)(e.code,{children:"scroll"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"press",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#press",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.press"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"txt",children:(0,r.jsx)(e.code,{children:(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{children:"fireEvent.press: (element: ReactTestInstance, ...data: Array) => void"})})})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nIt is recommended to use the User Event ",(0,r.jsx)(e.a,{href:"/12.x/docs/api/events/user-event.html#press",children:(0,r.jsx)(e.code,{children:"press()"})})," helper instead as it offers more realistic simulation of press interaction, including pressable support."]})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"press"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TouchableOpacity } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onPressMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" eventData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pageX"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TouchableOpacity"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onPressMock}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Press me"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventData);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(onPressMock)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(eventData);"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"change-text",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#change-text",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.changeText"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"txt",children:(0,r.jsx)(e.code,{children:(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{children:"fireEvent.changeText: (element: ReactTestInstance, ...data: Array) => void"})})})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nIt is recommended to use the User Event ",(0,r.jsx)(e.a,{href:"/12.x/docs/api/events/user-event.html#type",children:(0,r.jsx)(e.code,{children:"type()"})})," helper instead as it offers more realistic simulation of text change interaction, including key-by-key typing, element focus, and other editing events."]})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"changeText"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onChangeTextMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" CHANGE_TEXT"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'content'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Enter data"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onChangeTextMock} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".changeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter data'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" CHANGE_TEXT"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"scroll",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#scroll",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.scroll"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"txt",children:(0,r.jsx)(e.code,{children:(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{children:"fireEvent.scroll: (element: ReactTestInstance, ...data: Array) => void"})})})})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"scroll"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsxs)(e.h4,{id:"on-a-scrollview",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#on-a-scrollview",children:"#"}),"On a ",(0,r.jsx)(e.code,{children:"ScrollView"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { ScrollView"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onScrollMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" eventData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" contentOffset"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" y"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 200"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ScrollView"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onScroll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onScrollMock}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">XD"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".scroll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'scroll-view'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventData);"})]})]})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["Prefer using ",(0,r.jsx)(e.a,{href:"/12.x/docs/api/events/user-event.html#scrollto",children:(0,r.jsx)(e.code,{children:"user.scrollTo"})})," over ",(0,r.jsx)(e.code,{children:"fireEvent.scroll"})," for ",(0,r.jsx)(e.code,{children:"ScrollView"}),", ",(0,r.jsx)(e.code,{children:"FlatList"}),", and ",(0,r.jsx)(e.code,{children:"SectionList"})," components. User Event provides a more realistic event simulation based on React Native runtime behavior."]})})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["12.x%2Fdocs%2Fapi%2Fevents%2Ffire-event.mdx"]={toc:[{id:"press",text:"`fireEvent.press`",depth:3},{id:"change-text",text:"`fireEvent.changeText`",depth:3},{id:"scroll",text:"`fireEvent.scroll`",depth:3},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4}],title:"Fire Event API",headingTitle:"Fire Event API",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/543.5216745632.js b/static/js/async/543.5216745632.js new file mode 100644 index 00000000..db73a48d --- /dev/null +++ b/static/js/async/543.5216745632.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["543"],{898(e,s,n){n.r(s),n.d(s,{default:()=>c});var r=n(4848),i=n(8453),o=n(7425),l=n(4424);function a(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"migration-to-14x",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-to-14x",children:"#"}),"Migration to 14.x"]}),"\n",(0,r.jsx)(s.p,{children:"This guide describes the migration to React Native Testing Library version 14 from version 13.x."}),"\n",(0,r.jsxs)(s.h2,{id:"overview",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#overview",children:"#"}),"Overview"]}),"\n",(0,r.jsx)(s.p,{children:"RNTL v14 drops support for React 18 and adopts React 19's async rendering model. Here's what changed:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"React 19.0.0+ and React Native 0.78+ are now required"}),"\n",(0,r.jsxs)(s.li,{children:["Node.js ",(0,r.jsx)(s.code,{children:"^22.13.0 || >=24"})," is now required"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"render"}),", ",(0,r.jsx)(s.code,{children:"renderHook"}),", ",(0,r.jsx)(s.code,{children:"fireEvent"}),", and ",(0,r.jsx)(s.code,{children:"act"})," are now async"]}),"\n",(0,r.jsxs)(s.li,{children:["Switched from deprecated ",(0,r.jsx)(s.a,{href:"https://reactjs.org/docs/test-renderer.html",rel:"noopener noreferrer",target:"_blank",children:"React Test Renderer"})," to ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"})]}),"\n",(0,r.jsxs)(s.li,{children:["Removed deprecated APIs: ",(0,r.jsx)(s.code,{children:"update"}),", ",(0,r.jsx)(s.code,{children:"getQueriesForElement"}),", ",(0,r.jsx)(s.code,{children:"UNSAFE_root"}),", ",(0,r.jsx)(s.code,{children:"concurrentRoot"})," option, ",(0,r.jsx)(s.code,{children:"createNodeMock"})," option"]}),"\n",(0,r.jsxs)(s.li,{children:["Reintroduced ",(0,r.jsx)(s.code,{children:"container"})," API, which is now safe to use"]}),"\n"]}),"\n",(0,r.jsx)(o.Pq,{type:"info",title:"React 18 Users",children:(0,r.jsx)(s.p,{children:"If you need to support React 18, please continue using RNTL v13.x."})}),"\n",(0,r.jsxs)(s.h2,{id:"quick-migration",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#quick-migration",children:"#"}),"Quick Migration"]}),"\n",(0,r.jsx)(s.p,{children:"We provide codemods to automate most of the migration:"}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Step 1: Update dependencies"})}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-update-deps --target .\nnpm install",yarn:"yarn dlx codemod@latest rntl-v14-update-deps --target .\nyarn install",pnpm:"pnpm dlx codemod@latest rntl-v14-update-deps --target .\npnpm install",bun:"bunx codemod@latest rntl-v14-update-deps --target .\nbun install"}}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Step 2: Update test code to async"})}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-async-functions --target ./src",yarn:"yarn dlx codemod@latest rntl-v14-async-functions --target ./src",pnpm:"pnpm dlx codemod@latest rntl-v14-async-functions --target ./src",bun:"bunx codemod@latest rntl-v14-async-functions --target ./src"}}),"\n",(0,r.jsx)(s.p,{children:"After running the codemods, review the changes and run your tests."}),"\n",(0,r.jsxs)(s.p,{children:["If your project uses coding agents, add the RNTL package-docs instruction snippet from the ",(0,r.jsx)(s.a,{href:"/14.x/docs/start/quick-start.html#agent-docs-in-the-package",children:"Quick Start"})," so agents read the docs that match your installed package version."]}),"\n",(0,r.jsxs)(s.h2,{id:"breaking-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#breaking-changes",children:"#"}),"Breaking Changes"]}),"\n",(0,r.jsxs)(s.h3,{id:"supported-react-react-native-and-nodejs-versions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#supported-react-react-native-and-nodejs-versions",children:"#"}),"Supported React, React Native, and Node.js versions"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsxs)(s.strong,{children:["This version requires React 19+, React Native 0.78+, and Node.js ",(0,r.jsx)(s.code,{children:"^22.13.0 || >=24"}),"."]})," If you need to support React 18, please use the latest v13.x version."]}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"RNTL Version"}),(0,r.jsx)(s.th,{children:"React Version"}),(0,r.jsx)(s.th,{children:"React Native Version"}),(0,r.jsx)(s.th,{children:"Node.js Version"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"v14.x"}),(0,r.jsx)(s.td,{children:">= 19.0.0"}),(0,r.jsx)(s.td,{children:">= 0.78"}),(0,r.jsx)(s.td,{children:"^22.13.0 || >=24"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"v13.x"}),(0,r.jsx)(s.td,{children:">= 18.0.0"}),(0,r.jsx)(s.td,{children:">= 0.71"}),(0,r.jsx)(s.td,{children:">= 18"})]})]})]}),"\n",(0,r.jsxs)(s.h3,{id:"test-renderer-replaces-react-test-renderer",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#test-renderer-replaces-react-test-renderer",children:"#"}),"Test Renderer replaces React Test Renderer"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, React Native Testing Library uses ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"})," instead of the deprecated ",(0,r.jsx)(s.a,{href:"https://reactjs.org/docs/test-renderer.html",rel:"noopener noreferrer",target:"_blank",children:"React Test Renderer"}),". Test Renderer works with React 19 and has better TypeScript support."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"The underlying renderer is now Test Renderer instead of React Test Renderer"}),"\n",(0,r.jsx)(s.li,{children:"This is mostly an internal change; your tests should work without modifications in most cases"}),"\n",(0,r.jsxs)(s.li,{children:["Type definitions now use ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer#test-instance",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"TestInstance"})})," from Test Renderer instead of ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})]}),"\n",(0,r.jsx)(s.li,{children:"Test Renderer 1.x is required as a peer dependency. Use the recommended Test Renderer version for your React 19 minor version."}),"\n"]}),"\n",(0,r.jsxs)(s.h4,{id:"recommended-test-renderer-versions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#recommended-test-renderer-versions",children:"#"}),"Recommended Test Renderer versions"]}),"\n",(0,r.jsx)(s.p,{children:"Choose the Test Renderer version that matches your React 19 minor version:"}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"React version"}),(0,r.jsx)(s.th,{children:"Recommended Test Renderer version"}),(0,r.jsx)(s.th,{children:"Notable React features"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"19.2"})}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"test-renderer@1.2"})}),(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:""}),", ",(0,r.jsx)(s.code,{children:"useEffectEvent"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"19.1"})}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"test-renderer@1.1"})}),(0,r.jsxs)(s.td,{children:["Owner Stack support, updated ",(0,r.jsx)(s.code,{children:"useId()"})," format"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"19.0"})}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"test-renderer@1.0"})}),(0,r.jsxs)(s.td,{children:["Actions, ",(0,r.jsx)(s.code,{children:"useActionState"}),", ",(0,r.jsx)(s.code,{children:"useOptimistic"}),", ",(0,r.jsx)(s.code,{children:"use"})]})]})]})]}),"\n",(0,r.jsxs)(s.p,{children:["Using an older Test Renderer line can prevent RNTL from supporting newer React 19 features in your tests. Using a newer Test Renderer line than your React version can produce peer dependency warnings, or an install error with ",(0,r.jsx)(s.code,{children:"npm"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer#react-19-compatibility-lines",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer React 19 compatibility lines"})," for the latest recommendations."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Migration:"})}),"\n",(0,r.jsxs)(s.h4,{id:"1-update-dependencies",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#1-update-dependencies",children:"#"}),"1. Update dependencies"]}),"\n",(0,r.jsx)(s.p,{children:"Run codemod for updating dependencies:"}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-update-deps\nnpm install",yarn:"yarn dlx codemod@latest rntl-v14-update-deps\nyarn install",pnpm:"pnpm dlx codemod@latest rntl-v14-update-deps\npnpm install",bun:"bunx codemod@latest rntl-v14-update-deps\nbun install"}}),"\n",(0,r.jsxs)(s.h5,{id:"manual-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#manual-changes",children:"#"}),"Manual changes"]}),"\n",(0,r.jsx)(s.p,{children:"Remove React Test Renderer and its type definitions from your dev dependencies, and add the Test Renderer line that matches your React minor version:"}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npm uninstall react-test-renderer @types/react-test-renderer\nnpm install -D test-renderer@1.2",yarn:"yarn remove react-test-renderer @types/react-test-renderer\nyarn add -D test-renderer@1.2",pnpm:"pnpm remove react-test-renderer @types/react-test-renderer\npnpm add -D test-renderer@1.2",bun:"bun remove react-test-renderer @types/react-test-renderer\nbun add -D test-renderer@1.2"}}),"\n",(0,r.jsxs)(s.p,{children:["The commands above use ",(0,r.jsx)(s.code,{children:"test-renderer@1.2"})," for React 19.2. Use ",(0,r.jsx)(s.code,{children:"test-renderer@1.1"})," for React 19.1, or ",(0,r.jsx)(s.code,{children:"test-renderer@1.0"})," for React 19.0."]}),"\n",(0,r.jsxs)(s.h4,{id:"2-update-type-imports-if-needed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#2-update-type-imports-if-needed",children:"#"}),"2. Update type imports (if needed)"]}),"\n",(0,r.jsx)(s.p,{children:"If you were directly importing types from React Test Renderer, you may need to update your imports:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { ReactTestInstance } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-test-renderer'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { TestInstance } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'test-renderer'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note:"})," Most users won't need to update type imports, as React Native Testing Library now exports the necessary types directly."]}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer documentation"})," for more."]}),"\n",(0,r.jsxs)(s.h3,{id:"async-apis-by-default",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-apis-by-default",children:"#"}),"Async APIs by Default"]}),"\n",(0,r.jsx)(s.p,{children:"With React 18 support dropped, RNTL v14 uses React 19's async rendering model. The following functions are now async by default:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"render()"})," → returns ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"rerender()"})," and ",(0,r.jsx)(s.code,{children:"unmount()"})," → return ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"renderHook()"})," → returns ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"fireEvent()"})," and helpers (",(0,r.jsx)(s.code,{children:"press"}),", ",(0,r.jsx)(s.code,{children:"changeText"}),", ",(0,r.jsx)(s.code,{children:"scroll"}),") → return ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"act()"})," → always returns ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n"]}),"\n",(0,r.jsx)(o.Pq,{type:"tip",title:"Already using async APIs?",children:(0,r.jsxs)(s.p,{children:["If you adopted the async APIs introduced in RNTL v13.3 (",(0,r.jsx)(s.code,{children:"renderAsync"}),", ",(0,r.jsx)(s.code,{children:"fireEventAsync"}),", ",(0,r.jsx)(s.code,{children:"renderHookAsync"}),"), rename them to their non-async counterparts (",(0,r.jsx)(s.code,{children:"render"}),", ",(0,r.jsx)(s.code,{children:"fireEvent"}),", ",(0,r.jsx)(s.code,{children:"renderHook"}),"). The async versions have been removed since the standard APIs are now async by default."]})}),"\n",(0,r.jsxs)(s.h4,{id:"render-async-default",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render-async-default",children:"#"}),(0,r.jsx)(s.code,{children:"render"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"render"})," is async by default and returns a Promise. This allows proper support for ",(0,r.jsx)(s.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(s.code,{children:"use()"})," hook."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should render component'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should render component'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/render.html",children:[(0,r.jsx)(s.code,{children:"render"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"renderhook-is-now-async",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook-is-now-async",children:"#"}),(0,r.jsx)(s.code,{children:"renderHook"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"renderHook"})," is async by default and returns a Promise."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should test hook'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" useMyHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(newProps);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should test hook'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" useMyHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(newProps);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/render-hook.html",children:[(0,r.jsx)(s.code,{children:"renderHook"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"fireevent-is-now-async",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fireevent-is-now-async",children:"#"}),(0,r.jsx)(s.code,{children:"fireEvent"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"fireEvent"})," and its helpers (",(0,r.jsx)(s.code,{children:"press"}),", ",(0,r.jsx)(s.code,{children:"changeText"}),", ",(0,r.jsx)(s.code,{children:"scroll"}),") are async by default and return a Promise."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should press button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(onPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should press button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(onPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"fireEvent.press()"})," and ",(0,r.jsx)(s.code,{children:"fireEvent.scroll()"})," now create default synthetic native event objects. If you pass event props, they are deep-merged into the default event object:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { pageX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(onPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".objectContaining"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".objectContaining"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ pageX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["If your v13 assertions expected the handler to receive exactly the object you passed to ",(0,r.jsx)(s.code,{children:"fireEvent.press()"})," or ",(0,r.jsx)(s.code,{children:"fireEvent.scroll()"}),", update them to use partial matching."]}),"\n",(0,r.jsxs)(s.h4,{id:"act-is-now-async",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#act-is-now-async",children:"#"}),(0,r.jsx)(s.code,{children:"act"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"act"})," is async by default and always returns a Promise. You should always ",(0,r.jsx)(s.code,{children:"await"})," the result of ",(0,r.jsx)(s.code,{children:"act()"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"act"})," now always returns ",(0,r.jsx)(s.code,{children:"Promise"})," instead of ",(0,r.jsx)(s.code,{children:"T | Thenable"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"act"})," should always be awaited"]}),"\n"]}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["The transition to async ",(0,r.jsx)(s.code,{children:"act"})," may prevent testing very short transient states, as awaiting ",(0,r.jsx)(s.code,{children:"act"})," will flush all pending updates before returning."]})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { act } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should update state'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" setState"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(state)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { act } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should update state'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" setState"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(state)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note"}),": Even if your callback is synchronous, you should still use ",(0,r.jsx)(s.code,{children:"await act(...)"})," as ",(0,r.jsx)(s.code,{children:"act"})," now always returns a Promise."]}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/other.html#act",children:[(0,r.jsx)(s.code,{children:"act"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"why-async-apis",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#why-async-apis",children:"#"}),"Why async APIs?"]}),"\n",(0,r.jsxs)(s.p,{children:["The async APIs properly handle ",(0,r.jsx)(s.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(s.code,{children:"use()"})," hook, and ensure all pending React updates complete before assertions run. This matches React 19's async rendering model."]}),"\n",(0,r.jsxs)(s.h3,{id:"removed-apis",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#removed-apis",children:"#"}),"Removed APIs"]}),"\n",(0,r.jsxs)(s.h4,{id:"update-alias-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#update-alias-removed",children:"#"}),(0,r.jsx)(s.code,{children:"update"})," alias removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"update"})," alias for ",(0,r.jsx)(s.code,{children:"rerender"})," has been removed. Use ",(0,r.jsx)(s.code,{children:"rerender"})," instead:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" newProp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" newProp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"getqueriesforelement-export-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#getqueriesforelement-export-removed",children:"#"}),(0,r.jsx)(s.code,{children:"getQueriesForElement"})," export removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"getQueriesForElement"})," export alias for ",(0,r.jsx)(s.code,{children:"within"})," has been removed. Use ",(0,r.jsx)(s.code,{children:"within"})," instead:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { getQueriesForElement } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" queries"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getQueriesForElement"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(element);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { within } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" queries"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" within"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(element);"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note:"})," ",(0,r.jsx)(s.code,{children:"getQueriesForElement"})," was just an alias for ",(0,r.jsx)(s.code,{children:"within"}),", so the functionality is identical - only the import needs to change."]}),"\n",(0,r.jsxs)(s.h4,{id:"unsafe_root-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unsafe_root-removed",children:"#"}),(0,r.jsx)(s.code,{children:"UNSAFE_root"})," removed"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"UNSAFE_root"})," has been removed. Use ",(0,r.jsx)(s.code,{children:"container"})," to access the pseudo-element container, or ",(0,r.jsx)(s.code,{children:"root"})," to access the first rendered host element:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" unsafeRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".UNSAFE_root;"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".container; "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// pseudo-element container"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".root; "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// first rendered host element"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"legacy-unsafe_-queries-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#legacy-unsafe_-queries-removed",children:"#"}),"Legacy ",(0,r.jsx)(s.code,{children:"UNSAFE_*"})," queries removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The legacy ",(0,r.jsx)(s.code,{children:"UNSAFE_getAllByType"}),", ",(0,r.jsx)(s.code,{children:"UNSAFE_getByType"}),", ",(0,r.jsx)(s.code,{children:"UNSAFE_getAllByProps"}),", and ",(0,r.jsx)(s.code,{children:"UNSAFE_getByProps"})," queries have been removed. These queries could return composite (user-defined) components, which is no longer supported with ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"})," as it only renders host elements."]}),"\n",(0,r.jsxs)(s.p,{children:["If you were using these legacy queries, you should refactor your tests to use the standard queries (",(0,r.jsx)(s.code,{children:"getByRole"}),", ",(0,r.jsx)(s.code,{children:"getByText"}),", ",(0,r.jsx)(s.code,{children:"getByTestId"}),", etc.) which target host elements."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" buttons"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".UNSAFE_getAllByType"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(Button);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".UNSAFE_getByProps"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ placeholder"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Enter text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" buttons"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"concurrentroot-option-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#concurrentroot-option-removed",children:"#"}),(0,r.jsx)(s.code,{children:"concurrentRoot"})," option removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"concurrentRoot"})," option has been removed from both ",(0,r.jsx)(s.code,{children:"render"})," options and ",(0,r.jsx)(s.code,{children:"configure"})," function. In v14, concurrent rendering is always enabled, since it's the standard rendering mode for React 19 and React Native's New Architecture."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { concurrentRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Enable concurrent mode"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { concurrentRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Disable concurrent mode"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"configure"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ concurrentRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Disable globally"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Always uses concurrent rendering"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Migration:"})," Remove any ",(0,r.jsx)(s.code,{children:"concurrentRoot"})," options from your ",(0,r.jsx)(s.code,{children:"render"})," calls and ",(0,r.jsx)(s.code,{children:"configure"})," function. If you were setting ",(0,r.jsx)(s.code,{children:"concurrentRoot: true"}),", just remove the option. If you were setting ",(0,r.jsx)(s.code,{children:"concurrentRoot: false"})," to disable concurrent rendering, this is no longer supported in v14."]}),"\n",(0,r.jsxs)(s.h4,{id:"createnodemock-option-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#createnodemock-option-removed",children:"#"}),(0,r.jsx)(s.code,{children:"createNodeMock"})," option removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"createNodeMock"})," render option has been removed. It was previously passed through to React Test Renderer, but the v14 Test Renderer integration does not support this option."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" createNodeMock"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (element) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" if"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" ("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".type "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput) {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { focus"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"() };"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {};"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["If you used ",(0,r.jsx)(s.code,{children:"createNodeMock"})," to mock imperative refs, prefer testing user-visible behavior and mock the component or native module at the boundary where the ref behavior is introduced."]}),"\n",(0,r.jsxs)(s.h3,{id:"container-api-reintroduced",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#container-api-reintroduced",children:"#"}),(0,r.jsx)(s.code,{children:"container"})," API reintroduced"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, the ",(0,r.jsx)(s.code,{children:"container"})," API has been reintroduced and is now safe to use. Previously, ",(0,r.jsx)(s.code,{children:"container"})," was renamed to ",(0,r.jsx)(s.code,{children:"UNSAFE_root"})," in v12 due to behavioral differences from React Testing Library's ",(0,r.jsx)(s.code,{children:"container"}),". Now ",(0,r.jsx)(s.code,{children:"container"})," returns a pseudo-element container whose children are the elements you rendered, consistent with React Testing Library's behavior."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"screen.container"})," is now available and safe to use"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"container"})," returns a pseudo-element container from Test Renderer"]}),"\n",(0,r.jsx)(s.li,{children:"The container's children are the elements you rendered"}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"UNSAFE_root"})," has been removed"]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should access root'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // UNSAFE_root was the only way to access the container"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".UNSAFE_root;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should access container'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // container is now safe and available"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".container;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // root is the first child of container"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".root;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/screen.html#container",children:[(0,r.jsx)(s.code,{children:"screen"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"text-string-validation-enforced-by-default",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#text-string-validation-enforced-by-default",children:"#"}),"Text string validation enforced by default"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, Test Renderer enforces React Native's requirement that text strings must be rendered within a ",(0,r.jsx)(s.code,{children:""})," component. The ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText"})," option has been removed from ",(0,r.jsx)(s.code,{children:"RenderOptions"})," since this validation is now always on."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"Text string validation is now always enabled and cannot be disabled"}),"\n",(0,r.jsxs)(s.li,{children:["The ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText"})," option has been removed"]}),"\n",(0,r.jsxs)(s.li,{children:["Tests will now throw ",(0,r.jsx)(s.code,{children:"Invariant Violation: Text strings must be rendered within a component"})," errors when attempting to render strings outside of ",(0,r.jsx)(s.code,{children:""})," components, matching React Native's runtime behavior"]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Migration:"})}),"\n",(0,r.jsxs)(s.p,{children:["If you were using ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText: true"})," in your render options, you can simply remove this option as the validation is now always enabled:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" unstable_validateStringsRenderedWithinText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Validation is now always enabled"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["If you were relying on the previous behavior where strings could be rendered outside of ",(0,r.jsx)(s.code,{children:""})," components, you'll need to fix your components to wrap strings in ",(0,r.jsx)(s.code,{children:""})," components, as this matches React Native's actual runtime behavior."]}),"\n",(0,r.jsxs)(s.h3,{id:"hidden-suspense-and-activity-content",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#hidden-suspense-and-activity-content",children:"#"}),"Hidden Suspense and Activity content"]}),"\n",(0,r.jsxs)(s.p,{children:["When React keeps previously rendered content hidden, such as suspended content or React 19.2 ",(0,r.jsx)(s.code,{children:''}),", RNTL now applies React Native-like hidden props to the affected instances. In practice, hidden instances receive ",(0,r.jsx)(s.code,{children:"display: 'none'"}),", preserving existing styles by appending the hidden style."]}),"\n",(0,r.jsx)(s.p,{children:"This makes visibility queries and matchers behave closer to runtime behavior:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"default queries do not match hidden instances"}),"\n",(0,r.jsxs)(s.li,{children:["queries with ",(0,r.jsx)(s.code,{children:"{ includeHiddenElements: true }"})," can still find hidden instances"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"toBeVisible()"})," treats these instances as hidden"]}),"\n"]}),"\n",(0,r.jsxs)(s.h3,{id:"accessible-name-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#accessible-name-changes",children:"#"}),"Accessible name changes"]}),"\n",(0,r.jsx)(s.p,{children:"Accessible name calculation has been updated to better match React Native behavior:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"aria-labelledby"})," and ",(0,r.jsx)(s.code,{children:"accessibilityLabelledBy"})," still take precedence over explicit labels"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"aria-label"})," and ",(0,r.jsx)(s.code,{children:"accessibilityLabel"})," take precedence over text content"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"Image"})," ",(0,r.jsx)(s.code,{children:"alt"})," is used as an accessible label"]}),"\n",(0,r.jsxs)(s.li,{children:["a root ",(0,r.jsx)(s.code,{children:"TextInput"})," can use its ",(0,r.jsx)(s.code,{children:"placeholder"})," as its accessible name"]}),"\n",(0,r.jsx)(s.li,{children:"child accessible names are concatenated with spaces"}),"\n",(0,r.jsxs)(s.li,{children:["child ",(0,r.jsx)(s.code,{children:"TextInput"})," placeholders are not used when computing a parent's accessible name"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["This affects ",(0,r.jsx)(s.code,{children:"getByRole(..., { name })"})," and ",(0,r.jsx)(s.code,{children:"toHaveAccessibleName()"}),". If a v13 role query matched because descendant text or label queries were used as a fallback, update the test to match the element's computed accessible name directly or query the descendant element instead."]}),"\n",(0,r.jsxs)(s.h3,{id:"unknown-options-now-warn",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unknown-options-now-warn",children:"#"}),"Unknown options now warn"]}),"\n",(0,r.jsxs)(s.p,{children:["RNTL now logs a warning when unknown options are passed to ",(0,r.jsx)(s.code,{children:"configure"}),", ",(0,r.jsx)(s.code,{children:"render"}),", ",(0,r.jsx)(s.code,{children:"renderHook"}),", or ",(0,r.jsx)(s.code,{children:"userEvent.setup"}),". This helps catch stale v13 options and misspellings during migration."]}),"\n",(0,r.jsxs)(s.p,{children:["For example, after removing ",(0,r.jsx)(s.code,{children:"concurrentRoot"}),", ",(0,r.jsx)(s.code,{children:"createNodeMock"}),", or ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText"}),", make sure those options are not still being passed through shared test helpers."]}),"\n",(0,r.jsxs)(s.h2,{id:"codemods",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#codemods",children:"#"}),"Codemods"]}),"\n",(0,r.jsx)(s.p,{children:"Two codemods are available to automate the migration. Both are safe to run multiple times - they only transform code that hasn't been migrated yet."}),"\n",(0,r.jsxs)(s.h3,{id:"rntl-v14-update-deps",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rntl-v14-update-deps",children:"#"}),(0,r.jsx)(s.code,{children:"rntl-v14-update-deps"})]}),"\n",(0,r.jsxs)(s.p,{children:["Updates your ",(0,r.jsx)(s.code,{children:"package.json"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Removes React Test Renderer (",(0,r.jsx)(s.code,{children:"react-test-renderer"})," and ",(0,r.jsx)(s.code,{children:"@types/react-test-renderer"}),")"]}),"\n",(0,r.jsxs)(s.li,{children:["Adds Test Renderer (",(0,r.jsx)(s.code,{children:"test-renderer"}),") using the current recommended 1.x line"]}),"\n",(0,r.jsxs)(s.li,{children:["Updates ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"})," to the v14 version"]}),"\n"]}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-update-deps --target .\nnpm install",yarn:"yarn dlx codemod@latest rntl-v14-update-deps --target .\nyarn install",pnpm:"pnpm dlx codemod@latest rntl-v14-update-deps --target .\npnpm install",bun:"bunx codemod@latest rntl-v14-update-deps --target .\nbun install"}}),"\n",(0,r.jsxs)(s.h3,{id:"rntl-v14-async-functions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rntl-v14-async-functions",children:"#"}),(0,r.jsx)(s.code,{children:"rntl-v14-async-functions"})]}),"\n",(0,r.jsx)(s.p,{children:"Transforms test files:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Adds ",(0,r.jsx)(s.code,{children:"await"})," to ",(0,r.jsx)(s.code,{children:"render()"}),", ",(0,r.jsx)(s.code,{children:"act()"}),", ",(0,r.jsx)(s.code,{children:"renderHook()"}),", ",(0,r.jsx)(s.code,{children:"fireEvent()"})," calls"]}),"\n",(0,r.jsx)(s.li,{children:"Makes test functions async when needed"}),"\n",(0,r.jsxs)(s.li,{children:["Handles ",(0,r.jsx)(s.code,{children:"screen.rerender()"}),", ",(0,r.jsx)(s.code,{children:"screen.unmount()"}),", and renderer methods"]}),"\n"]}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-async-functions --target ./src",yarn:"yarn dlx codemod@latest rntl-v14-async-functions --target ./src",pnpm:"pnpm dlx codemod@latest rntl-v14-async-functions --target ./src",bun:"bunx codemod@latest rntl-v14-async-functions --target ./src"}}),"\n",(0,r.jsxs)(s.h4,{id:"custom-render-functions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-functions",children:"#"}),"Custom render functions"]}),"\n",(0,r.jsxs)(s.p,{children:["If you have custom render helpers (like ",(0,r.jsx)(s.code,{children:"renderWithProviders"}),"), you can specify them using the ",(0,r.jsx)(s.code,{children:"customRenderFunctions"})," parameter. The codemod will then also transform calls to these functions:"]}),"\n",(0,r.jsx)(l.ky,{command:{npm:'npx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"',yarn:'yarn dlx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"',pnpm:'pnpm dlx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"',bun:'bunx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"'}}),"\n",(0,r.jsxs)(s.p,{children:["This will add ",(0,r.jsx)(s.code,{children:"await"})," to your custom render calls and make the containing test functions async, just like it does for the standard ",(0,r.jsx)(s.code,{children:"render"})," function."]}),"\n",(0,r.jsxs)(s.h4,{id:"limitations",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#limitations",children:"#"}),"Limitations"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"Helper functions defined in test files are not transformed by default"}),"\n",(0,r.jsxs)(s.li,{children:["Namespace imports (",(0,r.jsx)(s.code,{children:"import * as RNTL"}),") are not handled"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"full-changelog",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#full-changelog",children:"#"}),"Full Changelog"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/compare/v13.3.3...v14.0.0",rel:"noopener noreferrer",target:"_blank",children:"https://github.com/callstack/react-native-testing-library/compare/v13.3.3...v14.0.0"})})]})}function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}c.__RSPRESS_PAGE_META={},c.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fstart%2Fmigration-v14.mdx"]={toc:[{id:"overview",text:"Overview",depth:2},{id:"quick-migration",text:"Quick Migration",depth:2},{id:"breaking-changes",text:"Breaking Changes",depth:2},{id:"supported-react-react-native-and-nodejs-versions",text:"Supported React, React Native, and Node.js versions",depth:3},{id:"test-renderer-replaces-react-test-renderer",text:"Test Renderer replaces React Test Renderer",depth:3},{id:"recommended-test-renderer-versions",text:"Recommended Test Renderer versions",depth:4},{id:"1-update-dependencies",text:"1. Update dependencies",depth:4},{id:"2-update-type-imports-if-needed",text:"2. Update type imports (if needed)",depth:4},{id:"async-apis-by-default",text:"Async APIs by Default",depth:3},{id:"render-async-default",text:"`render` is now async",depth:4},{id:"renderhook-is-now-async",text:"`renderHook` is now async",depth:4},{id:"fireevent-is-now-async",text:"`fireEvent` is now async",depth:4},{id:"act-is-now-async",text:"`act` is now async",depth:4},{id:"why-async-apis",text:"Why async APIs?",depth:4},{id:"removed-apis",text:"Removed APIs",depth:3},{id:"update-alias-removed",text:"`update` alias removed",depth:4},{id:"getqueriesforelement-export-removed",text:"`getQueriesForElement` export removed",depth:4},{id:"unsafe_root-removed",text:"`UNSAFE_root` removed",depth:4},{id:"legacy-unsafe_-queries-removed",text:"Legacy `UNSAFE_*` queries removed",depth:4},{id:"concurrentroot-option-removed",text:"`concurrentRoot` option removed",depth:4},{id:"createnodemock-option-removed",text:"`createNodeMock` option removed",depth:4},{id:"container-api-reintroduced",text:"`container` API reintroduced",depth:3},{id:"text-string-validation-enforced-by-default",text:"Text string validation enforced by default",depth:3},{id:"hidden-suspense-and-activity-content",text:"Hidden Suspense and Activity content",depth:3},{id:"accessible-name-changes",text:"Accessible name changes",depth:3},{id:"unknown-options-now-warn",text:"Unknown options now warn",depth:3},{id:"codemods",text:"Codemods",depth:2},{id:"rntl-v14-update-deps",text:"`rntl-v14-update-deps`",depth:3},{id:"rntl-v14-async-functions",text:"`rntl-v14-async-functions`",depth:3},{id:"custom-render-functions",text:"Custom render functions",depth:4},{id:"limitations",text:"Limitations",depth:4},{id:"full-changelog",text:"Full Changelog",depth:2}],title:"Migration to 14.x",headingTitle:"Migration to 14.x",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/543.b484d49a87.js b/static/js/async/543.b484d49a87.js deleted file mode 100644 index 5f83ec13..00000000 --- a/static/js/async/543.b484d49a87.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["543"],{898(e,s,n){n.r(s),n.d(s,{default:()=>c});var r=n(4848),i=n(8453),o=n(7425),l=n(4424);function a(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"migration-to-14x",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-to-14x",children:"#"}),"Migration to 14.x"]}),"\n",(0,r.jsx)(s.p,{children:"This guide describes the migration to React Native Testing Library version 14 from version 13.x."}),"\n",(0,r.jsxs)(s.h2,{id:"overview",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#overview",children:"#"}),"Overview"]}),"\n",(0,r.jsx)(s.p,{children:"RNTL v14 drops support for React 18 and adopts React 19's async rendering model. Here's what changed:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"React 19.0.0+ and React Native 0.78+ are now required"}),"\n",(0,r.jsxs)(s.li,{children:["Node.js ",(0,r.jsx)(s.code,{children:"^22.13.0 || >=24"})," is now required"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"render"}),", ",(0,r.jsx)(s.code,{children:"renderHook"}),", ",(0,r.jsx)(s.code,{children:"fireEvent"}),", and ",(0,r.jsx)(s.code,{children:"act"})," are now async"]}),"\n",(0,r.jsxs)(s.li,{children:["Switched from deprecated ",(0,r.jsx)(s.a,{href:"https://reactjs.org/docs/test-renderer.html",rel:"noopener noreferrer",target:"_blank",children:"React Test Renderer"})," to ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"})]}),"\n",(0,r.jsxs)(s.li,{children:["Removed deprecated APIs: ",(0,r.jsx)(s.code,{children:"update"}),", ",(0,r.jsx)(s.code,{children:"getQueriesForElement"}),", ",(0,r.jsx)(s.code,{children:"UNSAFE_root"}),", ",(0,r.jsx)(s.code,{children:"concurrentRoot"})," option, ",(0,r.jsx)(s.code,{children:"createNodeMock"})," option"]}),"\n",(0,r.jsxs)(s.li,{children:["Reintroduced ",(0,r.jsx)(s.code,{children:"container"})," API, which is now safe to use"]}),"\n"]}),"\n",(0,r.jsx)(o.Pq,{type:"info",title:"React 18 Users",children:(0,r.jsx)(s.p,{children:"If you need to support React 18, please continue using RNTL v13.x."})}),"\n",(0,r.jsxs)(s.h2,{id:"quick-migration",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#quick-migration",children:"#"}),"Quick Migration"]}),"\n",(0,r.jsx)(s.p,{children:"We provide codemods to automate most of the migration:"}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Step 1: Update dependencies"})}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-update-deps --target .\nnpm install",yarn:"yarn dlx codemod@latest rntl-v14-update-deps --target .\nyarn install",pnpm:"pnpm dlx codemod@latest rntl-v14-update-deps --target .\npnpm install",bun:"bunx codemod@latest rntl-v14-update-deps --target .\nbun install"}}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Step 2: Update test code to async"})}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-async-functions --target ./src",yarn:"yarn dlx codemod@latest rntl-v14-async-functions --target ./src",pnpm:"pnpm dlx codemod@latest rntl-v14-async-functions --target ./src",bun:"bunx codemod@latest rntl-v14-async-functions --target ./src"}}),"\n",(0,r.jsx)(s.p,{children:"After running the codemods, review the changes and run your tests."}),"\n",(0,r.jsxs)(s.p,{children:["If your project uses coding agents, add the RNTL package-docs instruction snippet from the ",(0,r.jsx)(s.a,{href:"/14.x/docs/start/quick-start.html#agent-docs-in-the-package",children:"Quick Start"})," so agents read the docs that match your installed package version."]}),"\n",(0,r.jsxs)(s.h2,{id:"breaking-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#breaking-changes",children:"#"}),"Breaking Changes"]}),"\n",(0,r.jsxs)(s.h3,{id:"supported-react-react-native-and-nodejs-versions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#supported-react-react-native-and-nodejs-versions",children:"#"}),"Supported React, React Native, and Node.js versions"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsxs)(s.strong,{children:["This version requires React 19+, React Native 0.78+, and Node.js ",(0,r.jsx)(s.code,{children:"^22.13.0 || >=24"}),"."]})," If you need to support React 18, please use the latest v13.x version."]}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"RNTL Version"}),(0,r.jsx)(s.th,{children:"React Version"}),(0,r.jsx)(s.th,{children:"React Native Version"}),(0,r.jsx)(s.th,{children:"Node.js Version"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"v14.x"}),(0,r.jsx)(s.td,{children:">= 19.0.0"}),(0,r.jsx)(s.td,{children:">= 0.78"}),(0,r.jsx)(s.td,{children:"^22.13.0 || >=24"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"v13.x"}),(0,r.jsx)(s.td,{children:">= 18.0.0"}),(0,r.jsx)(s.td,{children:">= 0.71"}),(0,r.jsx)(s.td,{children:">= 18"})]})]})]}),"\n",(0,r.jsxs)(s.h3,{id:"test-renderer-replaces-react-test-renderer",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#test-renderer-replaces-react-test-renderer",children:"#"}),"Test Renderer replaces React Test Renderer"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, React Native Testing Library uses ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"})," instead of the deprecated ",(0,r.jsx)(s.a,{href:"https://reactjs.org/docs/test-renderer.html",rel:"noopener noreferrer",target:"_blank",children:"React Test Renderer"}),". Test Renderer works with React 19 and has better TypeScript support."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"The underlying renderer is now Test Renderer instead of React Test Renderer"}),"\n",(0,r.jsx)(s.li,{children:"This is mostly an internal change; your tests should work without modifications in most cases"}),"\n",(0,r.jsxs)(s.li,{children:["Type definitions now use ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer#test-instance",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"TestInstance"})})," from Test Renderer instead of ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})]}),"\n",(0,r.jsx)(s.li,{children:"Test Renderer 1.x is required as a peer dependency. Use the recommended Test Renderer version for your React 19 minor version."}),"\n"]}),"\n",(0,r.jsxs)(s.h4,{id:"recommended-test-renderer-versions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#recommended-test-renderer-versions",children:"#"}),"Recommended Test Renderer versions"]}),"\n",(0,r.jsx)(s.p,{children:"Choose the Test Renderer version that matches your React 19 minor version:"}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"React version"}),(0,r.jsx)(s.th,{children:"Recommended Test Renderer version"}),(0,r.jsx)(s.th,{children:"Notable React features"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"19.2"})}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"test-renderer@1.2"})}),(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:""}),", ",(0,r.jsx)(s.code,{children:"useEffectEvent"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"19.1"})}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"test-renderer@1.1"})}),(0,r.jsxs)(s.td,{children:["Owner Stack support, updated ",(0,r.jsx)(s.code,{children:"useId()"})," format"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"19.0"})}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"test-renderer@1.0"})}),(0,r.jsxs)(s.td,{children:["Actions, ",(0,r.jsx)(s.code,{children:"useActionState"}),", ",(0,r.jsx)(s.code,{children:"useOptimistic"}),", ",(0,r.jsx)(s.code,{children:"use"})]})]})]})]}),"\n",(0,r.jsxs)(s.p,{children:["Using an older Test Renderer line can prevent RNTL from supporting newer React 19 features in your tests. Using a newer Test Renderer line than your React version can produce peer dependency warnings, or an install error with ",(0,r.jsx)(s.code,{children:"npm"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer#react-19-compatibility-lines",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer React 19 compatibility lines"})," for the latest recommendations."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Migration:"})}),"\n",(0,r.jsxs)(s.h4,{id:"1-update-dependencies",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#1-update-dependencies",children:"#"}),"1. Update dependencies"]}),"\n",(0,r.jsx)(s.p,{children:"Run codemod for updating dependencies:"}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-update-deps\nnpm install",yarn:"yarn dlx codemod@latest rntl-v14-update-deps\nyarn install",pnpm:"pnpm dlx codemod@latest rntl-v14-update-deps\npnpm install",bun:"bunx codemod@latest rntl-v14-update-deps\nbun install"}}),"\n",(0,r.jsxs)(s.h5,{id:"manual-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#manual-changes",children:"#"}),"Manual changes"]}),"\n",(0,r.jsx)(s.p,{children:"Remove React Test Renderer and its type definitions from your dev dependencies, and add the Test Renderer line that matches your React minor version:"}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npm uninstall react-test-renderer @types/react-test-renderer\nnpm install -D test-renderer@1.2",yarn:"yarn remove react-test-renderer @types/react-test-renderer\nyarn add -D test-renderer@1.2",pnpm:"pnpm remove react-test-renderer @types/react-test-renderer\npnpm add -D test-renderer@1.2",bun:"bun remove react-test-renderer @types/react-test-renderer\nbun add -D test-renderer@1.2"}}),"\n",(0,r.jsxs)(s.p,{children:["The commands above use ",(0,r.jsx)(s.code,{children:"test-renderer@1.2"})," for React 19.2. Use ",(0,r.jsx)(s.code,{children:"test-renderer@1.1"})," for React 19.1, or ",(0,r.jsx)(s.code,{children:"test-renderer@1.0"})," for React 19.0."]}),"\n",(0,r.jsxs)(s.h4,{id:"2-update-type-imports-if-needed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#2-update-type-imports-if-needed",children:"#"}),"2. Update type imports (if needed)"]}),"\n",(0,r.jsx)(s.p,{children:"If you were directly importing types from React Test Renderer, you may need to update your imports:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { ReactTestInstance } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-test-renderer'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { TestInstance } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'test-renderer'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note:"})," Most users won't need to update type imports, as React Native Testing Library now exports the necessary types directly."]}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer documentation"})," for more."]}),"\n",(0,r.jsxs)(s.h3,{id:"async-apis-by-default",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-apis-by-default",children:"#"}),"Async APIs by Default"]}),"\n",(0,r.jsx)(s.p,{children:"With React 18 support dropped, RNTL v14 uses React 19's async rendering model. The following functions are now async by default:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"render()"})," → returns ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"rerender()"})," and ",(0,r.jsx)(s.code,{children:"unmount()"})," → return ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"renderHook()"})," → returns ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"fireEvent()"})," and helpers (",(0,r.jsx)(s.code,{children:"press"}),", ",(0,r.jsx)(s.code,{children:"changeText"}),", ",(0,r.jsx)(s.code,{children:"scroll"}),") → return ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"act()"})," → always returns ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n"]}),"\n",(0,r.jsx)(o.Pq,{type:"tip",title:"Already using async APIs?",children:(0,r.jsxs)(s.p,{children:["If you adopted the async APIs introduced in RNTL v13.3 (",(0,r.jsx)(s.code,{children:"renderAsync"}),", ",(0,r.jsx)(s.code,{children:"fireEventAsync"}),", ",(0,r.jsx)(s.code,{children:"renderHookAsync"}),"), rename them to their non-async counterparts (",(0,r.jsx)(s.code,{children:"render"}),", ",(0,r.jsx)(s.code,{children:"fireEvent"}),", ",(0,r.jsx)(s.code,{children:"renderHook"}),"). The async versions have been removed since the standard APIs are now async by default."]})}),"\n",(0,r.jsxs)(s.h4,{id:"render-async-default",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render-async-default",children:"#"}),(0,r.jsx)(s.code,{children:"render"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"render"})," is async by default and returns a Promise. This allows proper support for ",(0,r.jsx)(s.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(s.code,{children:"use()"})," hook."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should render component'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should render component'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/render.html",children:[(0,r.jsx)(s.code,{children:"render"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"renderhook-is-now-async",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook-is-now-async",children:"#"}),(0,r.jsx)(s.code,{children:"renderHook"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"renderHook"})," is async by default and returns a Promise."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should test hook'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" useMyHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(newProps);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should test hook'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" useMyHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(newProps);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/render-hook.html",children:[(0,r.jsx)(s.code,{children:"renderHook"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"fireevent-is-now-async",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fireevent-is-now-async",children:"#"}),(0,r.jsx)(s.code,{children:"fireEvent"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"fireEvent"})," and its helpers (",(0,r.jsx)(s.code,{children:"press"}),", ",(0,r.jsx)(s.code,{children:"changeText"}),", ",(0,r.jsx)(s.code,{children:"scroll"}),") are async by default and return a Promise."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should press button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(onPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should press button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(onPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"fireEvent.press()"})," and ",(0,r.jsx)(s.code,{children:"fireEvent.scroll()"})," now create default synthetic native event objects. If you pass event props, they are deep-merged into the default event object:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { pageX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(onPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".objectContaining"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".objectContaining"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ pageX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["If your v13 assertions expected the handler to receive exactly the object you passed to ",(0,r.jsx)(s.code,{children:"fireEvent.press()"})," or ",(0,r.jsx)(s.code,{children:"fireEvent.scroll()"}),", update them to use partial matching."]}),"\n",(0,r.jsxs)(s.h4,{id:"act-is-now-async",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#act-is-now-async",children:"#"}),(0,r.jsx)(s.code,{children:"act"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"act"})," is async by default and always returns a Promise. You should always ",(0,r.jsx)(s.code,{children:"await"})," the result of ",(0,r.jsx)(s.code,{children:"act()"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"act"})," now always returns ",(0,r.jsx)(s.code,{children:"Promise"})," instead of ",(0,r.jsx)(s.code,{children:"T | Thenable"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"act"})," should always be awaited"]}),"\n"]}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["The transition to async ",(0,r.jsx)(s.code,{children:"act"})," may prevent testing very short transient states, as awaiting ",(0,r.jsx)(s.code,{children:"act"})," will flush all pending updates before returning."]})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { act } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should update state'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" setState"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(state)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { act } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should update state'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" setState"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(state)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note"}),": Even if your callback is synchronous, you should still use ",(0,r.jsx)(s.code,{children:"await act(...)"})," as ",(0,r.jsx)(s.code,{children:"act"})," now always returns a Promise."]}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/other.html#act",children:[(0,r.jsx)(s.code,{children:"act"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"why-async-apis",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#why-async-apis",children:"#"}),"Why async APIs?"]}),"\n",(0,r.jsxs)(s.p,{children:["The async APIs properly handle ",(0,r.jsx)(s.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(s.code,{children:"use()"})," hook, and ensure all pending React updates complete before assertions run. This matches React 19's async rendering model."]}),"\n",(0,r.jsxs)(s.h3,{id:"removed-apis",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#removed-apis",children:"#"}),"Removed APIs"]}),"\n",(0,r.jsxs)(s.h4,{id:"update-alias-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#update-alias-removed",children:"#"}),(0,r.jsx)(s.code,{children:"update"})," alias removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"update"})," alias for ",(0,r.jsx)(s.code,{children:"rerender"})," has been removed. Use ",(0,r.jsx)(s.code,{children:"rerender"})," instead:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" newProp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" newProp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"getqueriesforelement-export-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#getqueriesforelement-export-removed",children:"#"}),(0,r.jsx)(s.code,{children:"getQueriesForElement"})," export removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"getQueriesForElement"})," export alias for ",(0,r.jsx)(s.code,{children:"within"})," has been removed. Use ",(0,r.jsx)(s.code,{children:"within"})," instead:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { getQueriesForElement } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" queries"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getQueriesForElement"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(element);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { within } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" queries"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" within"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(element);"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note:"})," ",(0,r.jsx)(s.code,{children:"getQueriesForElement"})," was just an alias for ",(0,r.jsx)(s.code,{children:"within"}),", so the functionality is identical - only the import needs to change."]}),"\n",(0,r.jsxs)(s.h4,{id:"unsafe_root-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unsafe_root-removed",children:"#"}),(0,r.jsx)(s.code,{children:"UNSAFE_root"})," removed"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"UNSAFE_root"})," has been removed. Use ",(0,r.jsx)(s.code,{children:"container"})," to access the pseudo-element container, or ",(0,r.jsx)(s.code,{children:"root"})," to access the first rendered host element:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" unsafeRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".UNSAFE_root;"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".container; "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// pseudo-element container"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".root; "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// first rendered host element"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"legacy-unsafe_-queries-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#legacy-unsafe_-queries-removed",children:"#"}),"Legacy ",(0,r.jsx)(s.code,{children:"UNSAFE_*"})," queries removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The legacy ",(0,r.jsx)(s.code,{children:"UNSAFE_getAllByType"}),", ",(0,r.jsx)(s.code,{children:"UNSAFE_getByType"}),", ",(0,r.jsx)(s.code,{children:"UNSAFE_getAllByProps"}),", and ",(0,r.jsx)(s.code,{children:"UNSAFE_getByProps"})," queries have been removed. These queries could return composite (user-defined) components, which is no longer supported with ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"})," as it only renders host elements."]}),"\n",(0,r.jsxs)(s.p,{children:["If you were using these legacy queries, you should refactor your tests to use the standard queries (",(0,r.jsx)(s.code,{children:"getByRole"}),", ",(0,r.jsx)(s.code,{children:"getByText"}),", ",(0,r.jsx)(s.code,{children:"getByTestId"}),", etc.) which target host elements."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" buttons"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".UNSAFE_getAllByType"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(Button);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".UNSAFE_getByProps"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ placeholder"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Enter text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" buttons"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"concurrentroot-option-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#concurrentroot-option-removed",children:"#"}),(0,r.jsx)(s.code,{children:"concurrentRoot"})," option removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"concurrentRoot"})," option has been removed from both ",(0,r.jsx)(s.code,{children:"render"})," options and ",(0,r.jsx)(s.code,{children:"configure"})," function. In v14, concurrent rendering is always enabled, since it's the standard rendering mode for React 19 and React Native's New Architecture."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { concurrentRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Enable concurrent mode"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { concurrentRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Disable concurrent mode"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"configure"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ concurrentRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Disable globally"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Always uses concurrent rendering"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Migration:"})," Remove any ",(0,r.jsx)(s.code,{children:"concurrentRoot"})," options from your ",(0,r.jsx)(s.code,{children:"render"})," calls and ",(0,r.jsx)(s.code,{children:"configure"})," function. If you were setting ",(0,r.jsx)(s.code,{children:"concurrentRoot: true"}),", just remove the option. If you were setting ",(0,r.jsx)(s.code,{children:"concurrentRoot: false"})," to disable concurrent rendering, this is no longer supported in v14."]}),"\n",(0,r.jsxs)(s.h4,{id:"createnodemock-option-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#createnodemock-option-removed",children:"#"}),(0,r.jsx)(s.code,{children:"createNodeMock"})," option removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"createNodeMock"})," render option has been removed. It was previously passed through to React Test Renderer, but the v14 Test Renderer integration does not support this option."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" createNodeMock"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (element) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" if"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" ("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".type "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput) {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { focus"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"() };"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {};"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["If you used ",(0,r.jsx)(s.code,{children:"createNodeMock"})," to mock imperative refs, prefer testing user-visible behavior and mock the component or native module at the boundary where the ref behavior is introduced."]}),"\n",(0,r.jsxs)(s.h3,{id:"container-api-reintroduced",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#container-api-reintroduced",children:"#"}),(0,r.jsx)(s.code,{children:"container"})," API reintroduced"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, the ",(0,r.jsx)(s.code,{children:"container"})," API has been reintroduced and is now safe to use. Previously, ",(0,r.jsx)(s.code,{children:"container"})," was renamed to ",(0,r.jsx)(s.code,{children:"UNSAFE_root"})," in v12 due to behavioral differences from React Testing Library's ",(0,r.jsx)(s.code,{children:"container"}),". Now ",(0,r.jsx)(s.code,{children:"container"})," returns a pseudo-element container whose children are the elements you rendered, consistent with React Testing Library's behavior."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"screen.container"})," is now available and safe to use"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"container"})," returns a pseudo-element container from Test Renderer"]}),"\n",(0,r.jsx)(s.li,{children:"The container's children are the elements you rendered"}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"UNSAFE_root"})," has been removed"]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should access root'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // UNSAFE_root was the only way to access the container"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".UNSAFE_root;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should access container'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // container is now safe and available"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".container;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // root is the first child of container"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".root;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/screen.html#container",children:[(0,r.jsx)(s.code,{children:"screen"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"text-string-validation-enforced-by-default",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#text-string-validation-enforced-by-default",children:"#"}),"Text string validation enforced by default"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, Test Renderer enforces React Native's requirement that text strings must be rendered within a ",(0,r.jsx)(s.code,{children:""})," component. The ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText"})," option has been removed from ",(0,r.jsx)(s.code,{children:"RenderOptions"})," since this validation is now always on."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"Text string validation is now always enabled and cannot be disabled"}),"\n",(0,r.jsxs)(s.li,{children:["The ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText"})," option has been removed"]}),"\n",(0,r.jsxs)(s.li,{children:["Tests will now throw ",(0,r.jsx)(s.code,{children:"Invariant Violation: Text strings must be rendered within a component"})," errors when attempting to render strings outside of ",(0,r.jsx)(s.code,{children:""})," components, matching React Native's runtime behavior"]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Migration:"})}),"\n",(0,r.jsxs)(s.p,{children:["If you were using ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText: true"})," in your render options, you can simply remove this option as the validation is now always enabled:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" unstable_validateStringsRenderedWithinText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Validation is now always enabled"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["If you were relying on the previous behavior where strings could be rendered outside of ",(0,r.jsx)(s.code,{children:""})," components, you'll need to fix your components to wrap strings in ",(0,r.jsx)(s.code,{children:""})," components, as this matches React Native's actual runtime behavior."]}),"\n",(0,r.jsxs)(s.h3,{id:"hidden-suspense-and-activity-content",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#hidden-suspense-and-activity-content",children:"#"}),"Hidden Suspense and Activity content"]}),"\n",(0,r.jsxs)(s.p,{children:["When React keeps previously rendered content hidden, such as suspended content or React 19.2 ",(0,r.jsx)(s.code,{children:''}),", RNTL now applies React Native-like hidden props to the affected instances. In practice, hidden instances receive ",(0,r.jsx)(s.code,{children:"display: 'none'"}),", preserving existing styles by appending the hidden style."]}),"\n",(0,r.jsx)(s.p,{children:"This makes visibility queries and matchers behave closer to runtime behavior:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"default queries do not match hidden instances"}),"\n",(0,r.jsxs)(s.li,{children:["queries with ",(0,r.jsx)(s.code,{children:"{ includeHiddenElements: true }"})," can still find hidden instances"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"toBeVisible()"})," treats these instances as hidden"]}),"\n"]}),"\n",(0,r.jsxs)(s.h3,{id:"accessible-name-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#accessible-name-changes",children:"#"}),"Accessible name changes"]}),"\n",(0,r.jsx)(s.p,{children:"Accessible name calculation has been updated to better match React Native behavior:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"aria-labelledby"})," and ",(0,r.jsx)(s.code,{children:"accessibilityLabelledBy"})," still take precedence over explicit labels"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"aria-label"})," and ",(0,r.jsx)(s.code,{children:"accessibilityLabel"})," take precedence over text content"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"Image"})," ",(0,r.jsx)(s.code,{children:"alt"})," is used as an accessible label"]}),"\n",(0,r.jsxs)(s.li,{children:["a root ",(0,r.jsx)(s.code,{children:"TextInput"})," can use its ",(0,r.jsx)(s.code,{children:"placeholder"})," as its accessible name"]}),"\n",(0,r.jsx)(s.li,{children:"child accessible names are concatenated with spaces"}),"\n",(0,r.jsxs)(s.li,{children:["child ",(0,r.jsx)(s.code,{children:"TextInput"})," placeholders are not used when computing a parent's accessible name"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["This affects ",(0,r.jsx)(s.code,{children:"getByRole(..., { name })"})," and ",(0,r.jsx)(s.code,{children:"toHaveAccessibleName()"}),". If a v13 role query matched because descendant text or label queries were used as a fallback, update the test to match the element's computed accessible name directly or query the descendant element instead."]}),"\n",(0,r.jsxs)(s.h3,{id:"unknown-options-now-warn",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unknown-options-now-warn",children:"#"}),"Unknown options now warn"]}),"\n",(0,r.jsxs)(s.p,{children:["RNTL now logs a warning when unknown options are passed to ",(0,r.jsx)(s.code,{children:"configure"}),", ",(0,r.jsx)(s.code,{children:"render"}),", ",(0,r.jsx)(s.code,{children:"renderHook"}),", or ",(0,r.jsx)(s.code,{children:"userEvent.setup"}),". This helps catch stale v13 options and misspellings during migration."]}),"\n",(0,r.jsxs)(s.p,{children:["For example, after removing ",(0,r.jsx)(s.code,{children:"concurrentRoot"}),", ",(0,r.jsx)(s.code,{children:"createNodeMock"}),", or ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText"}),", make sure those options are not still being passed through shared test helpers."]}),"\n",(0,r.jsxs)(s.h2,{id:"codemods",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#codemods",children:"#"}),"Codemods"]}),"\n",(0,r.jsx)(s.p,{children:"Two codemods are available to automate the migration. Both are safe to run multiple times - they only transform code that hasn't been migrated yet."}),"\n",(0,r.jsxs)(s.h3,{id:"rntl-v14-update-deps",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rntl-v14-update-deps",children:"#"}),(0,r.jsx)(s.code,{children:"rntl-v14-update-deps"})]}),"\n",(0,r.jsxs)(s.p,{children:["Updates your ",(0,r.jsx)(s.code,{children:"package.json"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Removes React Test Renderer (",(0,r.jsx)(s.code,{children:"react-test-renderer"})," and ",(0,r.jsx)(s.code,{children:"@types/react-test-renderer"}),")"]}),"\n",(0,r.jsxs)(s.li,{children:["Adds Test Renderer (",(0,r.jsx)(s.code,{children:"test-renderer"}),") using the current recommended 1.x line"]}),"\n",(0,r.jsxs)(s.li,{children:["Updates ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"})," to the v14 version"]}),"\n"]}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-update-deps --target .\nnpm install",yarn:"yarn dlx codemod@latest rntl-v14-update-deps --target .\nyarn install",pnpm:"pnpm dlx codemod@latest rntl-v14-update-deps --target .\npnpm install",bun:"bunx codemod@latest rntl-v14-update-deps --target .\nbun install"}}),"\n",(0,r.jsxs)(s.h3,{id:"rntl-v14-async-functions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rntl-v14-async-functions",children:"#"}),(0,r.jsx)(s.code,{children:"rntl-v14-async-functions"})]}),"\n",(0,r.jsx)(s.p,{children:"Transforms test files:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Adds ",(0,r.jsx)(s.code,{children:"await"})," to ",(0,r.jsx)(s.code,{children:"render()"}),", ",(0,r.jsx)(s.code,{children:"act()"}),", ",(0,r.jsx)(s.code,{children:"renderHook()"}),", ",(0,r.jsx)(s.code,{children:"fireEvent()"})," calls"]}),"\n",(0,r.jsx)(s.li,{children:"Makes test functions async when needed"}),"\n",(0,r.jsxs)(s.li,{children:["Handles ",(0,r.jsx)(s.code,{children:"screen.rerender()"}),", ",(0,r.jsx)(s.code,{children:"screen.unmount()"}),", and renderer methods"]}),"\n"]}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-async-functions --target ./src",yarn:"yarn dlx codemod@latest rntl-v14-async-functions --target ./src",pnpm:"pnpm dlx codemod@latest rntl-v14-async-functions --target ./src",bun:"bunx codemod@latest rntl-v14-async-functions --target ./src"}}),"\n",(0,r.jsxs)(s.h4,{id:"custom-render-functions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-functions",children:"#"}),"Custom render functions"]}),"\n",(0,r.jsxs)(s.p,{children:["If you have custom render helpers (like ",(0,r.jsx)(s.code,{children:"renderWithProviders"}),"), you can specify them using the ",(0,r.jsx)(s.code,{children:"customRenderFunctions"})," parameter. The codemod will then also transform calls to these functions:"]}),"\n",(0,r.jsx)(l.ky,{command:{npm:'npx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"',yarn:'yarn dlx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"',pnpm:'pnpm dlx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"',bun:'bunx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"'}}),"\n",(0,r.jsxs)(s.p,{children:["This will add ",(0,r.jsx)(s.code,{children:"await"})," to your custom render calls and make the containing test functions async, just like it does for the standard ",(0,r.jsx)(s.code,{children:"render"})," function."]}),"\n",(0,r.jsxs)(s.h4,{id:"limitations",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#limitations",children:"#"}),"Limitations"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"Helper functions defined in test files are not transformed by default"}),"\n",(0,r.jsxs)(s.li,{children:["Namespace imports (",(0,r.jsx)(s.code,{children:"import * as RNTL"}),") are not handled"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"full-changelog",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#full-changelog",children:"#"}),"Full Changelog"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/compare/v13.3.3...v14.0.0",rel:"noopener noreferrer",target:"_blank",children:"https://github.com/callstack/react-native-testing-library/compare/v13.3.3...v14.0.0"})})]})}function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}c.__RSPRESS_PAGE_META={},c.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fstart%2Fmigration-v14.mdx"]={toc:[{id:"overview",text:"Overview",depth:2},{id:"quick-migration",text:"Quick Migration",depth:2},{id:"breaking-changes",text:"Breaking Changes",depth:2},{id:"supported-react-react-native-and-nodejs-versions",text:"Supported React, React Native, and Node.js versions",depth:3},{id:"test-renderer-replaces-react-test-renderer",text:"Test Renderer replaces React Test Renderer",depth:3},{id:"recommended-test-renderer-versions",text:"Recommended Test Renderer versions",depth:4},{id:"1-update-dependencies",text:"1. Update dependencies",depth:4},{id:"2-update-type-imports-if-needed",text:"2. Update type imports (if needed)",depth:4},{id:"async-apis-by-default",text:"Async APIs by Default",depth:3},{id:"render-async-default",text:"`render` is now async",depth:4},{id:"renderhook-is-now-async",text:"`renderHook` is now async",depth:4},{id:"fireevent-is-now-async",text:"`fireEvent` is now async",depth:4},{id:"act-is-now-async",text:"`act` is now async",depth:4},{id:"why-async-apis",text:"Why async APIs?",depth:4},{id:"removed-apis",text:"Removed APIs",depth:3},{id:"update-alias-removed",text:"`update` alias removed",depth:4},{id:"getqueriesforelement-export-removed",text:"`getQueriesForElement` export removed",depth:4},{id:"unsafe_root-removed",text:"`UNSAFE_root` removed",depth:4},{id:"legacy-unsafe_-queries-removed",text:"Legacy `UNSAFE_*` queries removed",depth:4},{id:"concurrentroot-option-removed",text:"`concurrentRoot` option removed",depth:4},{id:"createnodemock-option-removed",text:"`createNodeMock` option removed",depth:4},{id:"container-api-reintroduced",text:"`container` API reintroduced",depth:3},{id:"text-string-validation-enforced-by-default",text:"Text string validation enforced by default",depth:3},{id:"hidden-suspense-and-activity-content",text:"Hidden Suspense and Activity content",depth:3},{id:"accessible-name-changes",text:"Accessible name changes",depth:3},{id:"unknown-options-now-warn",text:"Unknown options now warn",depth:3},{id:"codemods",text:"Codemods",depth:2},{id:"rntl-v14-update-deps",text:"`rntl-v14-update-deps`",depth:3},{id:"rntl-v14-async-functions",text:"`rntl-v14-async-functions`",depth:3},{id:"custom-render-functions",text:"Custom render functions",depth:4},{id:"limitations",text:"Limitations",depth:4},{id:"full-changelog",text:"Full Changelog",depth:2}],title:"Migration to 14.x",headingTitle:"Migration to 14.x",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/5816.9ec1e73c3d.js b/static/js/async/5816.9ec1e73c3d.js deleted file mode 100644 index 682258f4..00000000 --- a/static/js/async/5816.9ec1e73c3d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["5816"],{7483(e,s,n){n.r(s),n.d(s,{default:()=>l});var r=n(4848),i=n(8453);function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"async-tests",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-tests",children:"#"}),"Async tests"]}),"\n",(0,r.jsxs)(s.h2,{id:"summary",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,r.jsx)(s.p,{children:"Typically, you would write synchronous tests, as they are simple and get the work done. However, there are cases when using asynchronous (async) tests might be necessary or beneficial. The two most common cases are:"}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Testing Code with asynchronous operations"}),": When your code relies on asynchronous operations, such as network calls or database queries, async tests are essential. Even though you should mock these network calls, the mock should act similarly to the actual behavior and hence by async."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"UserEvent API:"})," Using the ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/events/user-event.html",children:"User Event API"})," in your tests creates more realistic event handling. These interactions introduce delays (even though these are typically event-loop ticks with 0 ms delays), requiring async tests to handle the timing correctly."]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:"Using async tests when needed ensures your tests are reliable and simulate real-world conditions accurately."}),"\n",(0,r.jsxs)(s.h3,{id:"example",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,r.jsx)(s.p,{children:"Consider a basic asynchronous test for a user signing in with correct credentials:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"javascript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'User can sign in with correct credentials'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Typical test setup"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"App"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // No need to use async here, components are already rendered"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign in to Hello World App!'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Using await as User Event requires it"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'admin'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Password'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'admin1'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign In'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Using await as sign in operation is asynchronous"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Welcome admin!'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Follow-up assertions do not need to be async, as we already waited for sign in operation to complete"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign in to Hello World App'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" )."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Password'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"async-utilities",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-utilities",children:"#"}),"Async utilities"]}),"\n",(0,r.jsx)(s.p,{children:"There are several asynchronous utilities you might use in your tests."}),"\n",(0,r.jsxs)(s.h3,{id:"findby-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#findby-queries",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsxs)(s.p,{children:["The most common are the ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/queries.html#find-by",children:[(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),". These are useful when waiting for a matching element to appear. They can be understood as a ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/queries.html#get-by",children:[(0,r.jsx)(s.code,{children:"getBy*"})," queries"]})," used in conjunction with a ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/misc/async.html#waitfor",children:[(0,r.jsx)(s.code,{children:"waitFor"})," function"]}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["They accept the same predicates as ",(0,r.jsx)(s.code,{children:"getBy*"})," queries like ",(0,r.jsx)(s.code,{children:"findByRole"}),", ",(0,r.jsx)(s.code,{children:"findByTest"}),", etc. They also have a multiple elements variant called ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#find-all-by",children:(0,r.jsx)(s.code,{children:"findAllBy*"})}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:": ("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" role"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" queryOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Query specific options"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // .."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Each query has a default ",(0,r.jsx)(s.code,{children:"timeout"})," value of 1000 ms and a default ",(0,r.jsx)(s.code,{children:"interval"})," of 50 ms. Custom timeout and check intervals can be specified if needed, as shown below:"]}),"\n",(0,r.jsxs)(s.h4,{id:"example-1",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-1",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Start'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"50"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Alternatively, a default global ",(0,r.jsx)(s.code,{children:"timeout"})," value can be set using the ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/misc/config.html#configure",children:[(0,r.jsx)(s.code,{children:"configure"})," function"]}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"configure"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ asyncUtilTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout });"})]})})})}),"\n",(0,r.jsxs)(s.h3,{id:"waitfor-function",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor-function",children:"#"}),(0,r.jsx)(s.code,{children:"waitFor"})," function"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"waitFor"})," function is another option, serving as a lower-level utility in more advanced cases."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["It accepts an ",(0,r.jsx)(s.code,{children:"expectation"})," to be validated and repeats the check every defined interval until it no longer throws an error. Similarly to ",(0,r.jsx)(s.code,{children:"findBy*"})," queries they accept ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," options and have the same default values of 1000ms for timeout, and a checking interval of 50 ms."]}),"\n",(0,r.jsxs)(s.h4,{id:"example-2",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-2",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockAPI)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledTimes"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["If you want to use it with ",(0,r.jsx)(s.code,{children:"getBy*"})," queries, use the ",(0,r.jsx)(s.code,{children:"findBy*"})," queries instead, as they essentially do the same, but offer better developer experience."]}),"\n",(0,r.jsxs)(s.h3,{id:"waitforelementtoberemoved-function",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitforelementtoberemoved-function",children:"#"}),(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," function"]}),"\n",(0,r.jsxs)(s.p,{children:["A specialized function, ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/misc/async.html#waitforelementtoberemoved",children:(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})}),", is used to verify that a matching element was present but has since been removed."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"> {}"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["This function is, in a way, the negation of ",(0,r.jsx)(s.code,{children:"waitFor"})," 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 ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," parameters as ",(0,r.jsx)(s.code,{children:"findBy*"})," queries and ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"example-3",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-3",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})})})}),"\n",(0,r.jsxs)(s.h2,{id:"fake-timers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fake-timers",children:"#"}),"Fake Timers"]}),"\n",(0,r.jsxs)(s.p,{children:["Asynchronous tests can take long to execute due to the delays introduced by asynchronous operations. To mitigate this, fake timers can be used. These are particularly useful when delays are mere waits, such as the 130 milliseconds wait introduced by the UserEvent ",(0,r.jsx)(s.code,{children:"press()"})," event due to React Native runtime behavior or simulated 1000 wait in a API call mock. Fake timers allow for precise fast-forwarding through these wait periods."]}),"\n",(0,r.jsxs)(s.p,{children:["Here are the basics of using ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/timer-mocks",rel:"noopener noreferrer",target:"_blank",children:"Jest fake timers"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Enable fake timers with: ",(0,r.jsx)(s.code,{children:"jest.useFakeTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Disable fake timers with: ",(0,r.jsx)(s.code,{children:"jest.useRealTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Advance fake timers forward with: ",(0,r.jsx)(s.code,{children:"jest.advanceTimersByTime(interval)"})]}),"\n",(0,r.jsxs)(s.li,{children:["Run ",(0,r.jsx)(s.strong,{children:"all timers"})," to completion with: ",(0,r.jsx)(s.code,{children:"jest.runAllTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Run ",(0,r.jsx)(s.strong,{children:"currently pending timers"})," to completion with: ",(0,r.jsx)(s.code,{children:"jest.runOnlyPendingTimers()"})]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Be cautious when running all timers to completion as it might create an infinite loop if these timers schedule follow-up timers. In such cases, it's safer to use ",(0,r.jsx)(s.code,{children:"jest.runOnlyPendingTimers()"})," to avoid ending up in an infinite loop of scheduled tasks."]}),"\n",(0,r.jsxs)(s.p,{children:["You can use both built-in Jest fake timers, as well as ",(0,r.jsx)(s.a,{href:"https://sinonjs.org/releases/latest/fake-timers/",rel:"noopener noreferrer",target:"_blank",children:"Sinon.JS fake timers"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"Note: you do not need to advance timers by hand when using User Event API, as it's automatically."})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["12.x%2Fcookbook%2Fbasics%2Fasync-tests.md"]={toc:[{id:"summary",text:"Summary",depth:2},{id:"example",text:"Example",depth:3},{id:"async-utilities",text:"Async utilities",depth:2},{id:"findby-queries",text:"`findBy*` queries",depth:3},{id:"example-1",text:"Example",depth:4},{id:"waitfor-function",text:"`waitFor` function",depth:3},{id:"example-2",text:"Example",depth:4},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3},{id:"example-3",text:"Example",depth:4},{id:"fake-timers",text:"Fake Timers",depth:2}],title:"Async tests",headingTitle:"Async tests",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/5816.f41e3e5e16.js b/static/js/async/5816.f41e3e5e16.js new file mode 100644 index 00000000..5baf7b12 --- /dev/null +++ b/static/js/async/5816.f41e3e5e16.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["5816"],{7483(e,s,n){n.r(s),n.d(s,{default:()=>l});var r=n(4848),i=n(8453);function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"async-tests",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-tests",children:"#"}),"Async tests"]}),"\n",(0,r.jsxs)(s.h2,{id:"summary",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,r.jsx)(s.p,{children:"Typically, you would write synchronous tests, as they are simple and get the work done. However, there are cases when using asynchronous (async) tests might be necessary or beneficial. The two most common cases are:"}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Testing Code with asynchronous operations"}),": When your code relies on asynchronous operations, such as network calls or database queries, async tests are essential. Even though you should mock these network calls, the mock should act similarly to the actual behavior and hence by async."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"UserEvent API:"})," Using the ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/events/user-event.html",children:"User Event API"})," in your tests creates more realistic event handling. These interactions introduce delays (even though these are typically event-loop ticks with 0 ms delays), requiring async tests to handle the timing correctly."]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:"Using async tests when needed ensures your tests are reliable and simulate real-world conditions accurately."}),"\n",(0,r.jsxs)(s.h3,{id:"example",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,r.jsx)(s.p,{children:"Consider a basic asynchronous test for a user signing in with correct credentials:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"javascript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'User can sign in with correct credentials'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Typical test setup"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"App"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // No need to use async here, components are already rendered"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign in to Hello World App!'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Using await as User Event requires it"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'admin'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Password'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'admin1'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign In'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Using await as sign in operation is asynchronous"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Welcome admin!'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Follow-up assertions do not need to be async, as we already waited for sign in operation to complete"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign in to Hello World App'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" )."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Password'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"async-utilities",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-utilities",children:"#"}),"Async utilities"]}),"\n",(0,r.jsx)(s.p,{children:"There are several asynchronous utilities you might use in your tests."}),"\n",(0,r.jsxs)(s.h3,{id:"findby-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#findby-queries",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsxs)(s.p,{children:["The most common are the ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/queries.html#find-by",children:[(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),". These are useful when waiting for a matching element to appear. They can be understood as a ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/queries.html#get-by",children:[(0,r.jsx)(s.code,{children:"getBy*"})," queries"]})," used in conjunction with a ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/misc/async.html#waitfor",children:[(0,r.jsx)(s.code,{children:"waitFor"})," function"]}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["They accept the same predicates as ",(0,r.jsx)(s.code,{children:"getBy*"})," queries like ",(0,r.jsx)(s.code,{children:"findByRole"}),", ",(0,r.jsx)(s.code,{children:"findByTest"}),", etc. They also have a multiple elements variant called ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#find-all-by",children:(0,r.jsx)(s.code,{children:"findAllBy*"})}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:": ("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" role"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" queryOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Query specific options"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // .."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Each query has a default ",(0,r.jsx)(s.code,{children:"timeout"})," value of 1000 ms and a default ",(0,r.jsx)(s.code,{children:"interval"})," of 50 ms. Custom timeout and check intervals can be specified if needed, as shown below:"]}),"\n",(0,r.jsxs)(s.h4,{id:"example-1",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-1",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Start'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"50"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Alternatively, a default global ",(0,r.jsx)(s.code,{children:"timeout"})," value can be set using the ",(0,r.jsxs)(s.a,{href:"/12.x/docs/api/misc/config.html#configure",children:[(0,r.jsx)(s.code,{children:"configure"})," function"]}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"configure"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ asyncUtilTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout });"})]})})})}),"\n",(0,r.jsxs)(s.h3,{id:"waitfor-function",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor-function",children:"#"}),(0,r.jsx)(s.code,{children:"waitFor"})," function"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"waitFor"})," function is another option, serving as a lower-level utility in more advanced cases."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["It accepts an ",(0,r.jsx)(s.code,{children:"expectation"})," to be validated and repeats the check every defined interval until it no longer throws an error. Similarly to ",(0,r.jsx)(s.code,{children:"findBy*"})," queries they accept ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," options and have the same default values of 1000ms for timeout, and a checking interval of 50 ms."]}),"\n",(0,r.jsxs)(s.h4,{id:"example-2",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-2",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockAPI)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledTimes"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["If you want to use it with ",(0,r.jsx)(s.code,{children:"getBy*"})," queries, use the ",(0,r.jsx)(s.code,{children:"findBy*"})," queries instead, as they essentially do the same, but offer better developer experience."]}),"\n",(0,r.jsxs)(s.h3,{id:"waitforelementtoberemoved-function",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitforelementtoberemoved-function",children:"#"}),(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," function"]}),"\n",(0,r.jsxs)(s.p,{children:["A specialized function, ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/misc/async.html#waitforelementtoberemoved",children:(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})}),", is used to verify that a matching element was present but has since been removed."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"> {}"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["This function is, in a way, the negation of ",(0,r.jsx)(s.code,{children:"waitFor"})," 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 ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," parameters as ",(0,r.jsx)(s.code,{children:"findBy*"})," queries and ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"example-3",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-3",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})})})}),"\n",(0,r.jsxs)(s.h2,{id:"fake-timers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fake-timers",children:"#"}),"Fake Timers"]}),"\n",(0,r.jsxs)(s.p,{children:["Asynchronous tests can take long to execute due to the delays introduced by asynchronous operations. To mitigate this, fake timers can be used. These are particularly useful when delays are mere waits, such as the 130 milliseconds wait introduced by the UserEvent ",(0,r.jsx)(s.code,{children:"press()"})," event due to React Native runtime behavior or simulated 1000 wait in a API call mock. Fake timers allow for precise fast-forwarding through these wait periods."]}),"\n",(0,r.jsxs)(s.p,{children:["Here are the basics of using ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/timer-mocks",rel:"noopener noreferrer",target:"_blank",children:"Jest fake timers"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Enable fake timers with: ",(0,r.jsx)(s.code,{children:"jest.useFakeTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Disable fake timers with: ",(0,r.jsx)(s.code,{children:"jest.useRealTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Advance fake timers forward with: ",(0,r.jsx)(s.code,{children:"jest.advanceTimersByTime(interval)"})]}),"\n",(0,r.jsxs)(s.li,{children:["Run ",(0,r.jsx)(s.strong,{children:"all timers"})," to completion with: ",(0,r.jsx)(s.code,{children:"jest.runAllTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Run ",(0,r.jsx)(s.strong,{children:"currently pending timers"})," to completion with: ",(0,r.jsx)(s.code,{children:"jest.runOnlyPendingTimers()"})]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Be cautious when running all timers to completion as it might create an infinite loop if these timers schedule follow-up timers. In such cases, it's safer to use ",(0,r.jsx)(s.code,{children:"jest.runOnlyPendingTimers()"})," to avoid ending up in an infinite loop of scheduled tasks."]}),"\n",(0,r.jsxs)(s.p,{children:["You can use both built-in Jest fake timers, as well as ",(0,r.jsx)(s.a,{href:"https://sinonjs.org/releases/latest/fake-timers/",rel:"noopener noreferrer",target:"_blank",children:"Sinon.JS fake timers"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"Note: you do not need to advance timers by hand when using User Event API, as it's automatically."})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["12.x%2Fcookbook%2Fbasics%2Fasync-tests.md"]={toc:[{id:"summary",text:"Summary",depth:2},{id:"example",text:"Example",depth:3},{id:"async-utilities",text:"Async utilities",depth:2},{id:"findby-queries",text:"`findBy*` queries",depth:3},{id:"example-1",text:"Example",depth:4},{id:"waitfor-function",text:"`waitFor` function",depth:3},{id:"example-2",text:"Example",depth:4},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3},{id:"example-3",text:"Example",depth:4},{id:"fake-timers",text:"Fake Timers",depth:2}],title:"Async tests",headingTitle:"Async tests",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/594.89ce3c8362.js b/static/js/async/594.89ce3c8362.js new file mode 100644 index 00000000..79354453 --- /dev/null +++ b/static/js/async/594.89ce3c8362.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["594"],{1961(s,e,n){n.r(e),n.d(e,{default:()=>a});var r=n(4848),o=n(8453),i=n(7425);function l(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"fire-event-api",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fire-event-api",children:"#"}),"Fire Event API"]}),"\n",(0,r.jsxs)(e.h2,{id:"fire-event",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fire-event",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent"})]}),"\n",(0,r.jsxs)(i.Pq,{type:"note",title:"Note",children:[(0,r.jsxs)(e.p,{children:["\nFor common events like ",(0,r.jsx)(e.code,{children:"press"})," or ",(0,r.jsx)(e.code,{children:"type"}),", use the ",(0,r.jsx)(e.a,{href:"/14.x/docs/api/events/user-event.html",children:"User Event API"}),". It simulates events more realistically by emitting a sequence of events with proper event objects that mimic React Native runtime behavior."]}),(0,r.jsx)(e.p,{children:"Use Fire Event for cases not supported by User Event and for triggering event handlers on composite components."})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(instance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventName"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"[])"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"fireEvent"})," API triggers event handlers on both host and composite components. It traverses the component tree bottom-up from the passed element to find an enabled event handler named ",(0,r.jsx)(e.code,{children:"onXxx"})," where ",(0,r.jsx)(e.code,{children:"xxx"})," is the event name."]}),"\n",(0,r.jsx)(e.p,{children:"Unlike User Event, this API does not automatically pass event object to event handler, this is responsibility of the user to construct such object."}),"\n",(0,r.jsxs)(e.p,{children:["The base ",(0,r.jsx)(e.code,{children:"fireEvent(instance, eventName, ...data)"})," API can pass multiple custom arguments to the handler. Convenience helpers such as ",(0,r.jsx)(e.code,{children:"fireEvent.press"})," and ",(0,r.jsx)(e.code,{children:"fireEvent.scroll"})," are different: they create a default event object and accept one optional object to merge into it."]}),"\n",(0,r.jsxs)(e.p,{children:["This function uses async ",(0,r.jsx)(e.code,{children:"act"})," internally to execute all pending React updates during event handling."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'fire changeText event'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onEventMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // MyComponent renders TextInput which has a placeholder 'Enter details'"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // and with `onChangeText` bound to handleChangeText"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" handleChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onEventMock} />"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'change'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'onChangeText'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'ab'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(onEventMock)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'ab'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\n",(0,r.jsx)(e.code,{children:"fireEvent"})," performs checks that should prevent events firing on disabled elements."]})}),"\n",(0,r.jsxs)(e.p,{children:["An example using ",(0,r.jsx)(e.code,{children:"fireEvent"})," with native events that aren't already aliased by the ",(0,r.jsx)(e.code,{children:"fireEvent"})," api."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onBlurMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"my placeholder"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onBlur"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onBlurMock} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// you can omit the `on` prefix"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'my placeholder'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'blur'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["FireEvent exposes convenience methods for common events like: ",(0,r.jsx)(e.code,{children:"press"}),", ",(0,r.jsx)(e.code,{children:"changeText"}),", ",(0,r.jsx)(e.code,{children:"scroll"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"press",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#press",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.press"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nUse the User Event ",(0,r.jsx)(e.a,{href:"/14.x/docs/api/events/user-event.html#press",children:(0,r.jsx)(e.code,{children:"press()"})})," helper instead. It simulates press interactions more realistically, including pressable support."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".press: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" instance: TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Record"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:""})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Builds a press event object, merges ",(0,r.jsx)(e.code,{children:"eventProps"})," into it, and invokes the ",(0,r.jsx)(e.code,{children:"press"})," handler on the element or nearest eligible parent."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TouchableOpacity } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onPressMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" eventData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pageX"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TouchableOpacity"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onPressMock}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Press me"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventData);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(onPressMock)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".objectContaining"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(eventData));"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"change-text",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#change-text",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.changeText"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nUse the User Event ",(0,r.jsx)(e.a,{href:"/14.x/docs/api/events/user-event.html#type",children:(0,r.jsx)(e.code,{children:"type()"})})," helper instead. It simulates text change interactions more realistically, including key-by-key typing, element focus, and other editing events."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".changeText: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" instance: TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" text: string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:""})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"changeText"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onChangeTextMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" CHANGE_TEXT"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'content'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Enter data"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onChangeTextMock} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".changeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter data'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" CHANGE_TEXT"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"scroll",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#scroll",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.scroll"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nPrefer ",(0,r.jsx)(e.a,{href:"/14.x/docs/api/events/user-event.html#scrollto",children:(0,r.jsx)(e.code,{children:"user.scrollTo"})})," over ",(0,r.jsx)(e.code,{children:"fireEvent.scroll"})," for ",(0,r.jsx)(e.code,{children:"ScrollView"}),", ",(0,r.jsx)(e.code,{children:"FlatList"}),", and ",(0,r.jsx)(e.code,{children:"SectionList"})," components. User Event simulates events more realistically based on React Native runtime behavior."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".scroll: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" instance: TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Record"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:""})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Builds a scroll event object, merges ",(0,r.jsx)(e.code,{children:"eventProps"})," into it, and invokes the ",(0,r.jsx)(e.code,{children:"scroll"})," handler on the element or nearest eligible parent."]}),"\n",(0,r.jsxs)(e.h4,{id:"on-a-scrollview",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#on-a-scrollview",children:"#"}),"On a ",(0,r.jsx)(e.code,{children:"ScrollView"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { ScrollView"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onScrollMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" eventData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" contentOffset"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" y"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 200"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ScrollView"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"scroll-view"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onScroll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onScrollMock}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Content"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".scroll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'scroll-view'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventData);"})]})]})})})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fapi%2Fevents%2Ffire-event.mdx"]={toc:[{id:"fire-event",text:"`fireEvent`",depth:2},{id:"press",text:"`fireEvent.press`",depth:3},{id:"change-text",text:"`fireEvent.changeText`",depth:3},{id:"scroll",text:"`fireEvent.scroll`",depth:3},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4}],title:"Fire Event API",headingTitle:"Fire Event API",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/594.cfd2e88542.js b/static/js/async/594.cfd2e88542.js deleted file mode 100644 index f48a78a6..00000000 --- a/static/js/async/594.cfd2e88542.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["594"],{1961(s,e,n){n.r(e),n.d(e,{default:()=>a});var r=n(4848),o=n(8453),i=n(7425);function l(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"fire-event-api",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fire-event-api",children:"#"}),"Fire Event API"]}),"\n",(0,r.jsxs)(e.h2,{id:"fire-event",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fire-event",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent"})]}),"\n",(0,r.jsxs)(i.Pq,{type:"note",title:"Note",children:[(0,r.jsxs)(e.p,{children:["\nFor common events like ",(0,r.jsx)(e.code,{children:"press"})," or ",(0,r.jsx)(e.code,{children:"type"}),", use the ",(0,r.jsx)(e.a,{href:"/14.x/docs/api/events/user-event.html",children:"User Event API"}),". It simulates events more realistically by emitting a sequence of events with proper event objects that mimic React Native runtime behavior."]}),(0,r.jsx)(e.p,{children:"Use Fire Event for cases not supported by User Event and for triggering event handlers on composite components."})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(instance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventName"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"data"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"[])"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"fireEvent"})," API triggers event handlers on both host and composite components. It traverses the component tree bottom-up from the passed element to find an enabled event handler named ",(0,r.jsx)(e.code,{children:"onXxx"})," where ",(0,r.jsx)(e.code,{children:"xxx"})," is the event name."]}),"\n",(0,r.jsx)(e.p,{children:"Unlike User Event, this API does not automatically pass event object to event handler, this is responsibility of the user to construct such object."}),"\n",(0,r.jsxs)(e.p,{children:["The base ",(0,r.jsx)(e.code,{children:"fireEvent(instance, eventName, ...data)"})," API can pass multiple custom arguments to the handler. Convenience helpers such as ",(0,r.jsx)(e.code,{children:"fireEvent.press"})," and ",(0,r.jsx)(e.code,{children:"fireEvent.scroll"})," are different: they create a default event object and accept one optional object to merge into it."]}),"\n",(0,r.jsxs)(e.p,{children:["This function uses async ",(0,r.jsx)(e.code,{children:"act"})," internally to execute all pending React updates during event handling."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'fire changeText event'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onEventMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // MyComponent renders TextInput which has a placeholder 'Enter details'"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // and with `onChangeText` bound to handleChangeText"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" handleChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onEventMock} />"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'change'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'onChangeText'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'ab'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(onEventMock)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'ab'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\n",(0,r.jsx)(e.code,{children:"fireEvent"})," performs checks that should prevent events firing on disabled elements."]})}),"\n",(0,r.jsxs)(e.p,{children:["An example using ",(0,r.jsx)(e.code,{children:"fireEvent"})," with native events that aren't already aliased by the ",(0,r.jsx)(e.code,{children:"fireEvent"})," api."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onBlurMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"my placeholder"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onBlur"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onBlurMock} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// you can omit the `on` prefix"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'my placeholder'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'blur'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["FireEvent exposes convenience methods for common events like: ",(0,r.jsx)(e.code,{children:"press"}),", ",(0,r.jsx)(e.code,{children:"changeText"}),", ",(0,r.jsx)(e.code,{children:"scroll"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"press",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#press",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.press"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nUse the User Event ",(0,r.jsx)(e.a,{href:"/14.x/docs/api/events/user-event.html#press",children:(0,r.jsx)(e.code,{children:"press()"})})," helper instead. It simulates press interactions more realistically, including pressable support."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".press: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" instance: TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Record"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:""})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Builds a press event object, merges ",(0,r.jsx)(e.code,{children:"eventProps"})," into it, and invokes the ",(0,r.jsx)(e.code,{children:"press"})," handler on the element or nearest eligible parent."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TouchableOpacity } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onPressMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" eventData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pageX"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TouchableOpacity"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onPressMock}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Press me"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventData);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(onPressMock)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".objectContaining"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(eventData));"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"change-text",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#change-text",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.changeText"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nUse the User Event ",(0,r.jsx)(e.a,{href:"/14.x/docs/api/events/user-event.html#type",children:(0,r.jsx)(e.code,{children:"type()"})})," helper instead. It simulates text change interactions more realistically, including key-by-key typing, element focus, and other editing events."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".changeText: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" instance: TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" text: string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:""})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Invokes ",(0,r.jsx)(e.code,{children:"changeText"})," event handler on the element or parent element in the tree."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onChangeTextMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" CHANGE_TEXT"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'content'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"Enter data"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onChangeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onChangeTextMock} />"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".changeText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter data'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" CHANGE_TEXT"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"scroll",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#scroll",children:"#"}),(0,r.jsx)(e.code,{children:"fireEvent.scroll"})]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["\nPrefer ",(0,r.jsx)(e.a,{href:"/14.x/docs/api/events/user-event.html#scrollto",children:(0,r.jsx)(e.code,{children:"user.scrollTo"})})," over ",(0,r.jsx)(e.code,{children:"fireEvent.scroll"})," for ",(0,r.jsx)(e.code,{children:"ScrollView"}),", ",(0,r.jsx)(e.code,{children:"FlatList"}),", and ",(0,r.jsx)(e.code,{children:"SectionList"})," components. User Event simulates events more realistically based on React Native runtime behavior."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".scroll: ("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" instance: TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Record"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:""})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Builds a scroll event object, merges ",(0,r.jsx)(e.code,{children:"eventProps"})," into it, and invokes the ",(0,r.jsx)(e.code,{children:"scroll"})," handler on the element or nearest eligible parent."]}),"\n",(0,r.jsxs)(e.h4,{id:"on-a-scrollview",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#on-a-scrollview",children:"#"}),"On a ",(0,r.jsx)(e.code,{children:"ScrollView"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { ScrollView"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Text } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" fireEvent } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" onScrollMock"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" eventData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" contentOffset"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" y"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 200"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ScrollView"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"scroll-view"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onScroll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{onScrollMock}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Content"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".scroll"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'scroll-view'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" eventData);"})]})]})})})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fapi%2Fevents%2Ffire-event.mdx"]={toc:[{id:"fire-event",text:"`fireEvent`",depth:2},{id:"press",text:"`fireEvent.press`",depth:3},{id:"change-text",text:"`fireEvent.changeText`",depth:3},{id:"scroll",text:"`fireEvent.scroll`",depth:3},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4}],title:"Fire Event API",headingTitle:"Fire Event API",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/6341.29aa18fd2d.js b/static/js/async/6341.e5811d8661.js similarity index 60% rename from static/js/async/6341.29aa18fd2d.js rename to static/js/async/6341.e5811d8661.js index ea4027b0..7097e50d 100644 --- a/static/js/async/6341.29aa18fd2d.js +++ b/static/js/async/6341.e5811d8661.js @@ -1 +1 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["6341"],{660(e,s,r){r.r(s),r.d(s,{default:()=>a});var n=r(4848),i=r(8453),o=r(7425);function t(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.h1,{id:"migration-to-9x",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-to-9x",children:"#"}),"Migration to 9.x"]}),"\n",(0,n.jsxs)(s.p,{children:["Version 7.0 brought React Native Testing Library into the ",(0,n.jsx)(s.code,{children:"@testing-library"})," family. Since it has been implemented independently from its web counterpart – the React Testing Library – there are some differences in the API and behavior. Version 9.0 solves several of these problems."]}),"\n",(0,n.jsxs)(s.h2,{id:"support-for-text-match-options-aka-string-precision-api",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#support-for-text-match-options-aka-string-precision-api",children:"#"}),"Support for text match options a.k.a string precision API"]}),"\n",(0,n.jsx)(s.p,{children:"This is a backward compatible change."}),"\n",(0,n.jsxs)(s.p,{children:["When querying text, it is now possible to pass a ",(0,n.jsx)(s.a,{href:"/docs/api/queries.html#textmatch",children:(0,n.jsx)(s.code,{children:"TextMatch"})})," to most text based queries, which lets you configure how ",(0,n.jsx)(s.code,{children:"@testing-library/react-native"})," should match your text. For instance, passing ",(0,n.jsx)(s.code,{children:"exact: false"})," will allow matching substrings and will ignore case:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,n.jsxs)(s.code,{children:[(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World);"})]}),"\n",(0,n.jsx)(s.span,{className:"line"}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matches"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Doesn't match"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'hello'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ignore case-sensitivity and does partial matching"})]})]})})}),"\n",(0,n.jsxs)(s.p,{children:["Please note that the ",(0,n.jsx)(s.code,{children:"findBy*"})," queries used to take a ",(0,n.jsx)(s.code,{children:"waitForOptions"})," parameter as a second argument, which has now been moved to the third argument:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"diff",children:(0,n.jsxs)(s.code,{children:[(0,n.jsx)(s.span,{className:"line",children:(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-deleted)"},children:"-findByText('Hello world', { timeout: 3000 }); // old findBy* API"})}),"\n",(0,n.jsx)(s.span,{className:"line",children:(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-inserted)"},children:"+findByText('Hello world', {}, { timeout: 3000 }); // new findBy* API"})})]})})}),"\n",(0,n.jsxs)(s.p,{children:["For backward compatibility RNTL v9 can still read ",(0,n.jsx)(s.code,{children:"waitForOptions"})," from the second argument but will print a deprecation warning."]}),"\n",(0,n.jsxs)(s.h2,{id:"reverted-matching-text-across-several-nodes",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#reverted-matching-text-across-several-nodes",children:"#"}),"Reverted matching text across several nodes"]}),"\n",(0,n.jsx)(o.Pq,{type:"caution",title:"Caution",children:(0,n.jsx)(s.p,{children:"\nThis is a breaking change."})}),"\n",(0,n.jsx)(s.p,{children:"In v1.14 we've introduced a feature allowing to match text when it's spread across several nodes:"}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,n.jsxs)(s.code,{children:[(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" Hello <"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">world"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,n.jsx)(s.span,{className:"line",children:(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello world'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// matches"})]})]})})}),"\n",(0,n.jsx)(s.p,{children:"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."}),"\n",(0,n.jsxs)(s.p,{children:["A work around is to use ",(0,n.jsx)(s.code,{children:"within"}),":"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,n.jsxs)(s.code,{children:[(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { Text } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" within } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"})]}),"\n",(0,n.jsx)(s.span,{className:"line"}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello <"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">world)"})]}),"\n",(0,n.jsx)(s.span,{className:"line"}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"within(getByText('Hello', {exact: "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})).getByText('world')"})]})]})})}),"\n",(0,n.jsxs)(s.h2,{id:"future-plans",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#future-plans",children:"#"}),"Future plans"]}),"\n",(0,n.jsx)(s.p,{children:"This release changes a lot of internal logic in the library, enabling more improvements to bring us closer to our web counterpart, with better support for accessibility queries."}),"\n",(0,n.jsxs)(s.p,{children:["We're also ",(0,n.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/issues/877",rel:"noopener noreferrer",target:"_blank",children:"migrating the codebase to TypeScript"}),". Please let us know if you're interested in helping us with this effort."]}),"\n",(0,n.jsx)(s.p,{children:"Stay safe!"})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(t,{...e})}):t(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fmigration%2Fprevious%2Fv9.mdx"]={toc:[{id:"support-for-text-match-options-aka-string-precision-api",text:"Support for text match options a.k.a string precision API",depth:2},{id:"reverted-matching-text-across-several-nodes",text:"Reverted matching text across several nodes",depth:2},{id:"future-plans",text:"Future plans",depth:2}],title:"Migration to 9.x",headingTitle:"Migration to 9.x",frontmatter:{}}}}]); \ No newline at end of file +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["6341"],{660(e,s,r){r.r(s),r.d(s,{default:()=>a});var n=r(4848),i=r(8453),o=r(7425);function t(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.h1,{id:"migration-to-9x",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-to-9x",children:"#"}),"Migration to 9.x"]}),"\n",(0,n.jsxs)(s.p,{children:["Version 7.0 brought React Native Testing Library into the ",(0,n.jsx)(s.code,{children:"@testing-library"})," family. Since it has been implemented independently from its web counterpart – the React Testing Library – there are some differences in the API and behavior. Version 9.0 solves several of these problems."]}),"\n",(0,n.jsxs)(s.h2,{id:"support-for-text-match-options-aka-string-precision-api",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#support-for-text-match-options-aka-string-precision-api",children:"#"}),"Support for text match options a.k.a string precision API"]}),"\n",(0,n.jsx)(s.p,{children:"This is a backward compatible change."}),"\n",(0,n.jsxs)(s.p,{children:["When querying text, it is now possible to pass a ",(0,n.jsx)(s.a,{href:"/docs/api/queries.html#textmatch",children:(0,n.jsx)(s.code,{children:"TextMatch"})})," to most text based queries, which lets you configure how ",(0,n.jsx)(s.code,{children:"@testing-library/react-native"})," should match your text. For instance, passing ",(0,n.jsx)(s.code,{children:"exact: false"})," will allow matching substrings and will ignore case:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,n.jsxs)(s.code,{children:[(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World);"})]}),"\n",(0,n.jsx)(s.span,{className:"line"}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matches"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Doesn't match"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'hello'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ignore case-sensitivity and does partial matching"})]})]})})}),"\n",(0,n.jsxs)(s.p,{children:["Please note that the ",(0,n.jsx)(s.code,{children:"findBy*"})," queries used to take a ",(0,n.jsx)(s.code,{children:"waitForOptions"})," parameter as a second argument, which has now been moved to the third argument:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"diff",children:(0,n.jsxs)(s.code,{children:[(0,n.jsx)(s.span,{className:"line",children:(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-deleted)"},children:"-findByText('Hello world', { timeout: 3000 }); // old findBy* API"})}),"\n",(0,n.jsx)(s.span,{className:"line",children:(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-inserted)"},children:"+findByText('Hello world', {}, { timeout: 3000 }); // new findBy* API"})})]})})}),"\n",(0,n.jsxs)(s.p,{children:["For backward compatibility RNTL v9 can still read ",(0,n.jsx)(s.code,{children:"waitForOptions"})," from the second argument but will print a deprecation warning."]}),"\n",(0,n.jsxs)(s.h2,{id:"reverted-matching-text-across-several-nodes",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#reverted-matching-text-across-several-nodes",children:"#"}),"Reverted matching text across several nodes"]}),"\n",(0,n.jsx)(o.Pq,{type:"caution",title:"Caution",children:(0,n.jsx)(s.p,{children:"\nThis is a breaking change."})}),"\n",(0,n.jsx)(s.p,{children:"In v1.14 we've introduced a feature allowing to match text when it's spread across several nodes:"}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,n.jsxs)(s.code,{children:[(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" Hello <"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">world"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(s.span,{className:"line",children:(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello world'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// matches"})]})]})})}),"\n",(0,n.jsx)(s.p,{children:"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."}),"\n",(0,n.jsxs)(s.p,{children:["A work around is to use ",(0,n.jsx)(s.code,{children:"within"}),":"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,n.jsxs)(s.code,{children:[(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { Text } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" within } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"})]}),"\n",(0,n.jsx)(s.span,{className:"line"}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello <"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">world)"})]}),"\n",(0,n.jsx)(s.span,{className:"line"}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"within(getByText('Hello', {exact: "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})).getByText('world')"})]})]})})}),"\n",(0,n.jsxs)(s.h2,{id:"future-plans",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#future-plans",children:"#"}),"Future plans"]}),"\n",(0,n.jsx)(s.p,{children:"This release changes a lot of internal logic in the library, enabling more improvements to bring us closer to our web counterpart, with better support for accessibility queries."}),"\n",(0,n.jsxs)(s.p,{children:["We're also ",(0,n.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/issues/877",rel:"noopener noreferrer",target:"_blank",children:"migrating the codebase to TypeScript"}),". Please let us know if you're interested in helping us with this effort."]}),"\n",(0,n.jsx)(s.p,{children:"Stay safe!"})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(t,{...e})}):t(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fmigration%2Fprevious%2Fv9.mdx"]={toc:[{id:"support-for-text-match-options-aka-string-precision-api",text:"Support for text match options a.k.a string precision API",depth:2},{id:"reverted-matching-text-across-several-nodes",text:"Reverted matching text across several nodes",depth:2},{id:"future-plans",text:"Future plans",depth:2}],title:"Migration to 9.x",headingTitle:"Migration to 9.x",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/6958.0e94eb3026.js b/static/js/async/6958.d6f25cfe87.js similarity index 70% rename from static/js/async/6958.0e94eb3026.js rename to static/js/async/6958.d6f25cfe87.js index c9105669..40262fdf 100644 --- a/static/js/async/6958.0e94eb3026.js +++ b/static/js/async/6958.d6f25cfe87.js @@ -1 +1 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["6958"],{1389(e,r,n){n.r(r),n.d(r,{default:()=>l});var s=n(4848),o=n(8453),i=n(7425);function t(e){let r={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(r.h1,{id:"render-api",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render-api",children:"#"}),(0,s.jsx)(r.code,{children:"render"})," API"]}),"\n",(0,s.jsxs)(r.h2,{id:"render",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render",children:"#"}),(0,s.jsx)(r.code,{children:"render"})," function"]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,s.jsxs)(r.code,{children:[(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" component"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" RenderOptions"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" RenderResult"})]})]})})}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.code,{children:"render"})," 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 components' structure."]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,s.jsxs)(r.code,{children:[(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,s.jsx)(r.span,{className:"line"}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'basic test'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"MyApp"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByRole"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'start'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,s.jsx)(r.span,{className:"line",children:(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,s.jsxs)(r.blockquote,{children:["\n",(0,s.jsxs)(r.p,{children:["When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases, it's convenient to create your own custom ",(0,s.jsx)(r.code,{children:"render"})," method. ",(0,s.jsx)(r.a,{href:"https://testing-library.com/docs/react-testing-library/setup#custom-render",rel:"noopener noreferrer",target:"_blank",children:"Follow this great guide on how to set this up"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(r.h3,{id:"options",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),"Options"]}),"\n",(0,s.jsxs)(r.p,{children:["The behavior of the ",(0,s.jsx)(r.code,{children:"render"})," method can be customized by passing various options as a second argument of the ",(0,s.jsx)(r.code,{children:"RenderOptions"})," type:"]}),"\n",(0,s.jsxs)(r.h4,{id:"wrapper",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapper",children:"#"}),(0,s.jsx)(r.code,{children:"wrapper"})]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,s.jsx)(r.code,{children:(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"wrapper"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:".ComponentType"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]})})})}),"\n",(0,s.jsxs)(r.p,{children:["This option allows you to wrap the tested component, passed as the first option to the ",(0,s.jsx)(r.code,{children:"render()"})," function, in an additional wrapper component. This is useful for creating reusable custom render functions for common React Context providers."]}),"\n",(0,s.jsxs)(r.h4,{id:"concurrent-root",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#concurrent-root",children:"#"}),(0,s.jsx)(r.code,{children:"concurrentRoot"})]}),"\n",(0,s.jsxs)(r.p,{children:["Set to ",(0,s.jsx)(r.code,{children:"false"})," to disable concurrent rendering.\nOtherwise, ",(0,s.jsx)(r.code,{children:"render"})," will default to using concurrent rendering used in the React Native New Architecture."]}),"\n",(0,s.jsxs)(r.h4,{id:"create-node-mock",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#create-node-mock",children:"#"}),(0,s.jsx)(r.code,{children:"createNodeMock"})]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,s.jsx)(r.code,{children:(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"createNodeMock"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" (element"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" unknown"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]})})})}),"\n",(0,s.jsxs)(r.p,{children:["This option allows you to pass ",(0,s.jsx)(r.code,{children:"createNodeMock"})," option to ",(0,s.jsx)(r.code,{children:"ReactTestRenderer.create()"})," method in order to allow for custom mock refs. You can learn more about this option from ",(0,s.jsx)(r.a,{href:"https://reactjs.org/docs/test-renderer.html#ideas",rel:"noopener noreferrer",target:"_blank",children:"React Test Renderer documentation"}),"."]}),"\n",(0,s.jsxs)(r.h4,{id:"unstable_validatestringsrenderedwithintext",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unstable_validatestringsrenderedwithintext",children:"#"}),(0,s.jsx)(r.code,{children:"unstable_validateStringsRenderedWithinText"})]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,s.jsx)(r.code,{children:(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"unstable_validateStringsRenderedWithinText"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]})})})}),"\n",(0,s.jsx)(i.Pq,{type:"note",title:"Note",children:(0,s.jsxs)(r.p,{children:["\nThis options is experimental, in some cases it might not work as intended, and its behavior might change without observing ",(0,s.jsx)(r.a,{href:"https://semver.org/",rel:"noopener noreferrer",target:"_blank",children:"SemVer"})," requirements for breaking changes."]})}),"\n",(0,s.jsxs)(r.p,{children:["This ",(0,s.jsx)(r.strong,{children:"experimental"})," option allows you to replicate React Native behavior of throwing ",(0,s.jsx)(r.code,{children:"Invariant Violation: Text strings must be rendered within a component"})," error when you try to render ",(0,s.jsx)(r.code,{children:"string"})," value under components different than ",(0,s.jsx)(r.code,{children:""}),", e.g., under ",(0,s.jsx)(r.code,{children:""}),"."]}),"\n",(0,s.jsx)(r.p,{children:"React Test Renderer does not enforce this check; hence, by default, React Native Testing Library also does not check this. That might result in runtime errors when running your code on a device, while the code works without errors in tests."}),"\n",(0,s.jsxs)(r.h3,{id:"result",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result",children:"#"}),"Result"]}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.code,{children:"render"})," function returns the same queries and utilities as the ",(0,s.jsx)(r.a,{href:"/docs/api/screen.html",children:(0,s.jsx)(r.code,{children:"screen"})})," object. We recommend using the ",(0,s.jsx)(r.code,{children:"screen"})," object for a more developer-friendly experience."]}),"\n",(0,s.jsxs)(r.p,{children:["See ",(0,s.jsx)(r.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen",rel:"noopener noreferrer",target:"_blank",children:"this article"})," from Kent C. Dodds for more details."]}),"\n",(0,s.jsxs)(r.h2,{id:"render-async",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render-async",children:"#"}),(0,s.jsx)(r.code,{children:"renderAsync"})," function"]}),"\n",(0,s.jsx)(i.Pq,{type:"info",title:"RNTL minimal version",children:(0,s.jsx)(r.p,{children:"This API requires RNTL v13.3.0 or later."})}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,s.jsxs)(r.code,{children:[(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" renderAsync"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" component"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" RenderAsyncOptions"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"RenderAsyncResult"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.code,{children:"renderAsync"})," function is the async version of ",(0,s.jsx)(r.a,{href:"#render",children:(0,s.jsx)(r.code,{children:"render"})})," designed for working with React 19 and React Suspense. This function uses async ",(0,s.jsx)(r.code,{children:"act"})," function internally to ensure all pending React updates are executed during rendering."]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,s.jsxs)(r.code,{children:[(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { renderAsync"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,s.jsx)(r.span,{className:"line"}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'async component test'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" renderAsync"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"MyAsyncApp"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByRole"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'start'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,s.jsx)(r.span,{className:"line",children:(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,s.jsxs)(r.h3,{id:"options-1",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options-1",children:"#"}),"Options"]}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.code,{children:"renderAsync"})," accepts the same options as ",(0,s.jsx)(r.code,{children:"render"}),"."]}),"\n",(0,s.jsxs)(r.h3,{id:"result-1",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result-1",children:"#"}),"Result"]}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.code,{children:"renderAsync"})," function returns a promise that resolves to the same queries and utilities as the ",(0,s.jsx)(r.a,{href:"/docs/api/screen.html",children:(0,s.jsx)(r.code,{children:"screen"})})," object. Use the ",(0,s.jsx)(r.code,{children:"screen"})," object for queries and the lifecycle methods from the render result when needed."]}),"\n",(0,s.jsx)(i.Pq,{type:"warning",title:"Async lifecycle methods",children:(0,s.jsxs)(r.p,{children:["When using ",(0,s.jsx)(r.code,{children:"renderAsync"}),", you have to use correspodning lifecycle methods: ",(0,s.jsx)(r.code,{children:"rerenderAsync"})," and ",(0,s.jsx)(r.code,{children:"unmountAsync"})," instead of their sync versions."]})})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:r}={...(0,o.R)(),...e.components};return r?(0,s.jsx)(r,{...e,children:(0,s.jsx)(t,{...e})}):t(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fapi%2Frender.mdx"]={toc:[{id:"render",text:"`render` function",depth:2},{id:"options",text:"Options",depth:3},{id:"wrapper",text:"`wrapper`",depth:4},{id:"concurrent-root",text:"`concurrentRoot`",depth:4},{id:"create-node-mock",text:"`createNodeMock`",depth:4},{id:"unstable_validatestringsrenderedwithintext",text:"`unstable_validateStringsRenderedWithinText`",depth:4},{id:"result",text:"Result",depth:3},{id:"render-async",text:"`renderAsync` function",depth:2},{id:"options-1",text:"Options",depth:3},{id:"result-1",text:"Result",depth:3}],title:"`render` API",headingTitle:"`render` API",frontmatter:{}}}}]); \ No newline at end of file +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["6958"],{1389(e,r,n){n.r(r),n.d(r,{default:()=>l});var s=n(4848),o=n(8453),i=n(7425);function t(e){let r={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",strong:"strong",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(r.h1,{id:"render-api",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render-api",children:"#"}),(0,s.jsx)(r.code,{children:"render"})," API"]}),"\n",(0,s.jsxs)(r.h2,{id:"render",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render",children:"#"}),(0,s.jsx)(r.code,{children:"render"})," function"]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,s.jsxs)(r.code,{children:[(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" component"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" RenderOptions"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" RenderResult"})]})]})})}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.code,{children:"render"})," 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 components' structure."]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,s.jsxs)(r.code,{children:[(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,s.jsx)(r.span,{className:"line"}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'basic test'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"MyApp"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByRole"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'start'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,s.jsx)(r.span,{className:"line",children:(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,s.jsxs)(r.blockquote,{children:["\n",(0,s.jsxs)(r.p,{children:["When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases, it's convenient to create your own custom ",(0,s.jsx)(r.code,{children:"render"})," method. ",(0,s.jsx)(r.a,{href:"https://testing-library.com/docs/react-testing-library/setup#custom-render",rel:"noopener noreferrer",target:"_blank",children:"Follow this great guide on how to set this up"}),"."]}),"\n"]}),"\n",(0,s.jsxs)(r.h3,{id:"options",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),"Options"]}),"\n",(0,s.jsxs)(r.p,{children:["The behavior of the ",(0,s.jsx)(r.code,{children:"render"})," method can be customized by passing various options as a second argument of the ",(0,s.jsx)(r.code,{children:"RenderOptions"})," type:"]}),"\n",(0,s.jsxs)(r.h4,{id:"wrapper",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapper",children:"#"}),(0,s.jsx)(r.code,{children:"wrapper"})]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,s.jsx)(r.code,{children:(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"wrapper"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:".ComponentType"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]})})})}),"\n",(0,s.jsxs)(r.p,{children:["This option allows you to wrap the tested component, passed as the first option to the ",(0,s.jsx)(r.code,{children:"render()"})," function, in an additional wrapper component. This is useful for creating reusable custom render functions for common React Context providers."]}),"\n",(0,s.jsxs)(r.h4,{id:"concurrent-root",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#concurrent-root",children:"#"}),(0,s.jsx)(r.code,{children:"concurrentRoot"})]}),"\n",(0,s.jsxs)(r.p,{children:["Set to ",(0,s.jsx)(r.code,{children:"false"})," to disable concurrent rendering.\nOtherwise, ",(0,s.jsx)(r.code,{children:"render"})," will default to using concurrent rendering used in the React Native New Architecture."]}),"\n",(0,s.jsxs)(r.h4,{id:"create-node-mock",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#create-node-mock",children:"#"}),(0,s.jsx)(r.code,{children:"createNodeMock"})]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,s.jsx)(r.code,{children:(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"createNodeMock"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" (element"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" unknown"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]})})})}),"\n",(0,s.jsxs)(r.p,{children:["This option allows you to pass ",(0,s.jsx)(r.code,{children:"createNodeMock"})," option to ",(0,s.jsx)(r.code,{children:"ReactTestRenderer.create()"})," method in order to allow for custom mock refs. You can learn more about this option from ",(0,s.jsx)(r.a,{href:"https://reactjs.org/docs/test-renderer.html#ideas",rel:"noopener noreferrer",target:"_blank",children:"React Test Renderer documentation"}),"."]}),"\n",(0,s.jsxs)(r.h4,{id:"unstable_validatestringsrenderedwithintext",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unstable_validatestringsrenderedwithintext",children:"#"}),(0,s.jsx)(r.code,{children:"unstable_validateStringsRenderedWithinText"})]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,s.jsx)(r.code,{children:(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"unstable_validateStringsRenderedWithinText"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]})})})}),"\n",(0,s.jsx)(i.Pq,{type:"note",title:"Note",children:(0,s.jsxs)(r.p,{children:["\nThis options is experimental, in some cases it might not work as intended, and its behavior might change without observing ",(0,s.jsx)(r.a,{href:"https://semver.org/",rel:"noopener noreferrer",target:"_blank",children:"SemVer"})," requirements for breaking changes."]})}),"\n",(0,s.jsxs)(r.p,{children:["This ",(0,s.jsx)(r.strong,{children:"experimental"})," option allows you to replicate React Native behavior of throwing ",(0,s.jsx)(r.code,{children:"Invariant Violation: Text strings must be rendered within a component"})," error when you try to render ",(0,s.jsx)(r.code,{children:"string"})," value under components different than ",(0,s.jsx)(r.code,{children:""}),", e.g., under ",(0,s.jsx)(r.code,{children:""}),"."]}),"\n",(0,s.jsx)(r.p,{children:"React Test Renderer does not enforce this check; hence, by default, React Native Testing Library also does not check this. That might result in runtime errors when running your code on a device, while the code works without errors in tests."}),"\n",(0,s.jsxs)(r.h3,{id:"result",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result",children:"#"}),"Result"]}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.code,{children:"render"})," function returns the same queries and utilities as the ",(0,s.jsx)(r.a,{href:"/docs/api/screen.html",children:(0,s.jsx)(r.code,{children:"screen"})})," object. We recommend using the ",(0,s.jsx)(r.code,{children:"screen"})," object for a more developer-friendly experience."]}),"\n",(0,s.jsxs)(r.p,{children:["See ",(0,s.jsx)(r.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen",rel:"noopener noreferrer",target:"_blank",children:"this article"})," from Kent C. Dodds for more details."]}),"\n",(0,s.jsxs)(r.h2,{id:"render-async",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render-async",children:"#"}),(0,s.jsx)(r.code,{children:"renderAsync"})," function"]}),"\n",(0,s.jsx)(i.Pq,{type:"info",title:"RNTL minimal version",children:(0,s.jsx)(r.p,{children:"This API requires RNTL v13.3.0 or later."})}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,s.jsxs)(r.code,{children:[(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" renderAsync"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" component"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" RenderAsyncOptions"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"RenderAsyncResult"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.code,{children:"renderAsync"})," function is the async version of ",(0,s.jsx)(r.a,{href:"#render",children:(0,s.jsx)(r.code,{children:"render"})})," designed for working with React 19 and React Suspense. This function uses async ",(0,s.jsx)(r.code,{children:"act"})," function internally to ensure all pending React updates are executed during rendering."]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,s.jsxs)(r.code,{children:[(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { renderAsync"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,s.jsx)(r.span,{className:"line"}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'async component test'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" renderAsync"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"MyAsyncApp"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,s.jsxs)(r.span,{className:"line",children:[(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByRole"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'start'"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,s.jsx)(r.span,{className:"line",children:(0,s.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,s.jsxs)(r.h3,{id:"options-1",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options-1",children:"#"}),"Options"]}),"\n",(0,s.jsxs)(r.p,{children:[(0,s.jsx)(r.code,{children:"renderAsync"})," accepts the same options as ",(0,s.jsx)(r.code,{children:"render"}),"."]}),"\n",(0,s.jsxs)(r.h3,{id:"result-1",children:[(0,s.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result-1",children:"#"}),"Result"]}),"\n",(0,s.jsxs)(r.p,{children:["The ",(0,s.jsx)(r.code,{children:"renderAsync"})," function returns a promise that resolves to the same queries and utilities as the ",(0,s.jsx)(r.a,{href:"/docs/api/screen.html",children:(0,s.jsx)(r.code,{children:"screen"})})," object. Use the ",(0,s.jsx)(r.code,{children:"screen"})," object for queries and the lifecycle methods from the render result when needed."]}),"\n",(0,s.jsx)(i.Pq,{type:"warning",title:"Async lifecycle methods",children:(0,s.jsxs)(r.p,{children:["When using ",(0,s.jsx)(r.code,{children:"renderAsync"}),", you have to use correspodning lifecycle methods: ",(0,s.jsx)(r.code,{children:"rerenderAsync"})," and ",(0,s.jsx)(r.code,{children:"unmountAsync"})," instead of their sync versions."]})})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:r}={...(0,o.R)(),...e.components};return r?(0,s.jsx)(r,{...e,children:(0,s.jsx)(t,{...e})}):t(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fapi%2Frender.mdx"]={toc:[{id:"render",text:"`render` function",depth:2},{id:"options",text:"Options",depth:3},{id:"wrapper",text:"`wrapper`",depth:4},{id:"concurrent-root",text:"`concurrentRoot`",depth:4},{id:"create-node-mock",text:"`createNodeMock`",depth:4},{id:"unstable_validatestringsrenderedwithintext",text:"`unstable_validateStringsRenderedWithinText`",depth:4},{id:"result",text:"Result",depth:3},{id:"render-async",text:"`renderAsync` function",depth:2},{id:"options-1",text:"Options",depth:3},{id:"result-1",text:"Result",depth:3}],title:"`render` API",headingTitle:"`render` API",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/7340.94b9988bf4.js b/static/js/async/7340.94b9988bf4.js deleted file mode 100644 index 5e69d919..00000000 --- a/static/js/async/7340.94b9988bf4.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["7340"],{1511(e,s,n){n.r(s),n.d(s,{default:()=>l});var r=n(4848),i=n(8453);function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"async-events",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-events",children:"#"}),"Async Events"]}),"\n",(0,r.jsxs)(s.h2,{id:"summary",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,r.jsxs)(s.p,{children:["In RNTL v14, all tests are async since ",(0,r.jsx)(s.code,{children:"render()"}),", ",(0,r.jsx)(s.code,{children:"fireEvent()"}),", and other core APIs return Promises. Beyond the basic async APIs, there are additional async utilities for handling events that complete over time:"]}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Waiting for elements to appear"}),": Use ",(0,r.jsx)(s.code,{children:"findBy*"})," queries when elements appear after some delay (e.g., after data fetching)."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Waiting for conditions"}),": Use ",(0,r.jsx)(s.code,{children:"waitFor()"})," to wait for arbitrary conditions to be met."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Waiting for elements to disappear"}),": Use ",(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved()"})," when elements should be removed after some action."]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:"These utilities help you write reliable tests that properly handle timing in your application."}),"\n",(0,r.jsxs)(s.h3,{id:"example",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,r.jsx)(s.p,{children:"Consider a test for a user signing in with correct credentials:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"javascript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'User can sign in with correct credentials'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Typical test setup"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"App"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // No need to use async here, components are already rendered"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign in to Hello World App!'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Using await as User Event requires it"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'admin'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Password'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'admin1'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign In'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Using await as sign in operation is asynchronous"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Welcome admin!'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Follow-up assertions do not need to be async, as we already waited for sign in operation to complete"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign in to Hello World App'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" )."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Password'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"async-utilities",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-utilities",children:"#"}),"Async utilities"]}),"\n",(0,r.jsx)(s.p,{children:"There are several asynchronous utilities you might use in your tests."}),"\n",(0,r.jsxs)(s.h3,{id:"findby-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#findby-queries",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsxs)(s.p,{children:["The most common are the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/queries.html#find-by",children:[(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),". These are useful when waiting for a matching element to appear. They can be understood as a ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/queries.html#get-by",children:[(0,r.jsx)(s.code,{children:"getBy*"})," queries"]})," used in conjunction with a ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/async.html#waitfor",children:[(0,r.jsx)(s.code,{children:"waitFor"})," function"]}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["They accept the same predicates as ",(0,r.jsx)(s.code,{children:"getBy*"})," queries like ",(0,r.jsx)(s.code,{children:"findByRole"}),", ",(0,r.jsx)(s.code,{children:"findByTest"}),", etc. They also have a multiple elements variant called ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#find-all-by",children:(0,r.jsx)(s.code,{children:"findAllBy*"})}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:": ("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" role"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" queryOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Query specific options"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // .."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"TestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Each query has a default ",(0,r.jsx)(s.code,{children:"timeout"})," value of 1000 ms and a default ",(0,r.jsx)(s.code,{children:"interval"})," of 50 ms. Custom timeout and check intervals can be specified if needed, as shown below:"]}),"\n",(0,r.jsxs)(s.h4,{id:"example-1",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-1",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Start'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 50"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Alternatively, a default global ",(0,r.jsx)(s.code,{children:"timeout"})," value can be set using the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/config.html#configure",children:[(0,r.jsx)(s.code,{children:"configure"})," function"]}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"configure"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ asyncUtilTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout });"})]})})})}),"\n",(0,r.jsxs)(s.h3,{id:"waitfor-function",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor-function",children:"#"}),(0,r.jsx)(s.code,{children:"waitFor"})," function"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"waitFor"})," function is another option, serving as a lower-level utility in more advanced cases."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["It accepts an ",(0,r.jsx)(s.code,{children:"expectation"})," to be validated and repeats the check every defined interval until it no longer throws an error. Similarly to ",(0,r.jsx)(s.code,{children:"findBy*"})," queries they accept ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," options and have the same default values of 1000ms for timeout, and a checking interval of 50 ms."]}),"\n",(0,r.jsxs)(s.h4,{id:"example-2",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-2",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockAPI)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledTimes"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["If you want to use it with ",(0,r.jsx)(s.code,{children:"getBy*"})," queries, use the ",(0,r.jsx)(s.code,{children:"findBy*"})," queries instead, as they essentially do the same, but offer better developer experience."]}),"\n",(0,r.jsxs)(s.h3,{id:"waitforelementtoberemoved-function",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitforelementtoberemoved-function",children:"#"}),(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," function"]}),"\n",(0,r.jsxs)(s.p,{children:["A specialized function, ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/misc/async.html#waitforelementtoberemoved",children:(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})}),", is used to verify that a matching element was present but has since been removed."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"> {}"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["This function is, in a way, the negation of ",(0,r.jsx)(s.code,{children:"waitFor"})," 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 ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," parameters as ",(0,r.jsx)(s.code,{children:"findBy*"})," queries and ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"example-3",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-3",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})})})}),"\n",(0,r.jsxs)(s.h2,{id:"fake-timers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fake-timers",children:"#"}),"Fake Timers"]}),"\n",(0,r.jsxs)(s.p,{children:["Asynchronous tests can take long to execute due to the delays introduced by asynchronous operations. To mitigate this, fake timers can be used. These are particularly useful when delays are mere waits, such as the 130 milliseconds wait introduced by the UserEvent ",(0,r.jsx)(s.code,{children:"press()"})," event due to React Native runtime behavior or simulated 1000 wait in a API call mock. Fake timers allow for precise fast-forwarding through these wait periods."]}),"\n",(0,r.jsxs)(s.p,{children:["Here are the basics of using ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/timer-mocks",rel:"noopener noreferrer",target:"_blank",children:"Jest fake timers"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Enable fake timers with: ",(0,r.jsx)(s.code,{children:"jest.useFakeTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Disable fake timers with: ",(0,r.jsx)(s.code,{children:"jest.useRealTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Advance fake timers forward with: ",(0,r.jsx)(s.code,{children:"jest.advanceTimersByTime(interval)"})]}),"\n",(0,r.jsxs)(s.li,{children:["Run ",(0,r.jsx)(s.strong,{children:"all timers"})," to completion with: ",(0,r.jsx)(s.code,{children:"jest.runAllTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Run ",(0,r.jsx)(s.strong,{children:"currently pending timers"})," to completion with: ",(0,r.jsx)(s.code,{children:"jest.runOnlyPendingTimers()"})]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Be cautious when running all timers to completion as it might create an infinite loop if these timers schedule follow-up timers. In such cases, it's safer to use ",(0,r.jsx)(s.code,{children:"jest.runOnlyPendingTimers()"})," to avoid ending up in an infinite loop of scheduled tasks."]}),"\n",(0,r.jsxs)(s.p,{children:["You can use both built-in Jest fake timers, as well as ",(0,r.jsx)(s.a,{href:"https://sinonjs.org/releases/latest/fake-timers/",rel:"noopener noreferrer",target:"_blank",children:"Sinon.JS fake timers"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"Note: you do not need to advance timers by hand when using User Event API, as it's automatically."})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["14.x%2Fcookbook%2Fbasics%2Fasync-events.md"]={toc:[{id:"summary",text:"Summary",depth:2},{id:"example",text:"Example",depth:3},{id:"async-utilities",text:"Async utilities",depth:2},{id:"findby-queries",text:"`findBy*` queries",depth:3},{id:"example-1",text:"Example",depth:4},{id:"waitfor-function",text:"`waitFor` function",depth:3},{id:"example-2",text:"Example",depth:4},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3},{id:"example-3",text:"Example",depth:4},{id:"fake-timers",text:"Fake Timers",depth:2}],title:"Async Events",headingTitle:"Async Events",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/7340.c8b1cc6572.js b/static/js/async/7340.c8b1cc6572.js new file mode 100644 index 00000000..a670a467 --- /dev/null +++ b/static/js/async/7340.c8b1cc6572.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["7340"],{1511(e,s,n){n.r(s),n.d(s,{default:()=>l});var r=n(4848),i=n(8453);function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"async-events",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-events",children:"#"}),"Async Events"]}),"\n",(0,r.jsxs)(s.h2,{id:"summary",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,r.jsxs)(s.p,{children:["In RNTL v14, all tests are async since ",(0,r.jsx)(s.code,{children:"render()"}),", ",(0,r.jsx)(s.code,{children:"fireEvent()"}),", and other core APIs return Promises. Beyond the basic async APIs, there are additional async utilities for handling events that complete over time:"]}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Waiting for elements to appear"}),": Use ",(0,r.jsx)(s.code,{children:"findBy*"})," queries when elements appear after some delay (e.g., after data fetching)."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Waiting for conditions"}),": Use ",(0,r.jsx)(s.code,{children:"waitFor()"})," to wait for arbitrary conditions to be met."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Waiting for elements to disappear"}),": Use ",(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved()"})," when elements should be removed after some action."]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:"These utilities help you write reliable tests that properly handle timing in your application."}),"\n",(0,r.jsxs)(s.h3,{id:"example",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,r.jsx)(s.p,{children:"Consider a test for a user signing in with correct credentials:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"javascript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'User can sign in with correct credentials'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Typical test setup"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"App"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // No need to use async here, components are already rendered"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign in to Hello World App!'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Using await as User Event requires it"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'admin'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Password'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'admin1'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign In'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Using await as sign in operation is asynchronous"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Welcome admin!'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Follow-up assertions do not need to be async, as we already waited for sign in operation to complete"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign in to Hello World App'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" )."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Password'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"async-utilities",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-utilities",children:"#"}),"Async utilities"]}),"\n",(0,r.jsx)(s.p,{children:"There are several asynchronous utilities you might use in your tests."}),"\n",(0,r.jsxs)(s.h3,{id:"findby-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#findby-queries",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsxs)(s.p,{children:["The most common are the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/queries.html#find-by",children:[(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),". These are useful when waiting for a matching element to appear. They can be understood as a ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/queries.html#get-by",children:[(0,r.jsx)(s.code,{children:"getBy*"})," queries"]})," used in conjunction with a ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/async.html#waitfor",children:[(0,r.jsx)(s.code,{children:"waitFor"})," function"]}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["They accept the same predicates as ",(0,r.jsx)(s.code,{children:"getBy*"})," queries like ",(0,r.jsx)(s.code,{children:"findByRole"}),", ",(0,r.jsx)(s.code,{children:"findByTest"}),", etc. They also have a multiple elements variant called ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#find-all-by",children:(0,r.jsx)(s.code,{children:"findAllBy*"})}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:": ("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" role"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" queryOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Query specific options"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // .."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"TestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Each query has a default ",(0,r.jsx)(s.code,{children:"timeout"})," value of 1000 ms and a default ",(0,r.jsx)(s.code,{children:"interval"})," of 50 ms. Custom timeout and check intervals can be specified if needed, as shown below:"]}),"\n",(0,r.jsxs)(s.h4,{id:"example-1",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-1",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Start'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 50"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Alternatively, a default global ",(0,r.jsx)(s.code,{children:"timeout"})," value can be set using the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/config.html#configure",children:[(0,r.jsx)(s.code,{children:"configure"})," function"]}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"configure"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ asyncUtilTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout });"})]})})})}),"\n",(0,r.jsxs)(s.h3,{id:"waitfor-function",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor-function",children:"#"}),(0,r.jsx)(s.code,{children:"waitFor"})," function"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"waitFor"})," function is another option, serving as a lower-level utility in more advanced cases."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["It accepts an ",(0,r.jsx)(s.code,{children:"expectation"})," to be validated and repeats the check every defined interval until it no longer throws an error. Similarly to ",(0,r.jsx)(s.code,{children:"findBy*"})," queries they accept ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," options and have the same default values of 1000ms for timeout, and a checking interval of 50 ms."]}),"\n",(0,r.jsxs)(s.h4,{id:"example-2",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-2",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockAPI)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledTimes"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["If you want to use it with ",(0,r.jsx)(s.code,{children:"getBy*"})," queries, use the ",(0,r.jsx)(s.code,{children:"findBy*"})," queries instead, as they essentially do the same, but offer better developer experience."]}),"\n",(0,r.jsxs)(s.h3,{id:"waitforelementtoberemoved-function",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitforelementtoberemoved-function",children:"#"}),(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," function"]}),"\n",(0,r.jsxs)(s.p,{children:["A specialized function, ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/misc/async.html#waitforelementtoberemoved",children:(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})}),", is used to verify that a matching element was present but has since been removed."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"> {}"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["This function is, in a way, the negation of ",(0,r.jsx)(s.code,{children:"waitFor"})," 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 ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," parameters as ",(0,r.jsx)(s.code,{children:"findBy*"})," queries and ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"example-3",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-3",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})})})}),"\n",(0,r.jsxs)(s.h2,{id:"fake-timers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fake-timers",children:"#"}),"Fake Timers"]}),"\n",(0,r.jsxs)(s.p,{children:["Asynchronous tests can take long to execute due to the delays introduced by asynchronous operations. To mitigate this, fake timers can be used. These are particularly useful when delays are mere waits, such as the 130 milliseconds wait introduced by the UserEvent ",(0,r.jsx)(s.code,{children:"press()"})," event due to React Native runtime behavior or simulated 1000 wait in a API call mock. Fake timers allow for precise fast-forwarding through these wait periods."]}),"\n",(0,r.jsxs)(s.p,{children:["Here are the basics of using ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/timer-mocks",rel:"noopener noreferrer",target:"_blank",children:"Jest fake timers"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Enable fake timers with: ",(0,r.jsx)(s.code,{children:"jest.useFakeTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Disable fake timers with: ",(0,r.jsx)(s.code,{children:"jest.useRealTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Advance fake timers forward with: ",(0,r.jsx)(s.code,{children:"jest.advanceTimersByTime(interval)"})]}),"\n",(0,r.jsxs)(s.li,{children:["Run ",(0,r.jsx)(s.strong,{children:"all timers"})," to completion with: ",(0,r.jsx)(s.code,{children:"jest.runAllTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Run ",(0,r.jsx)(s.strong,{children:"currently pending timers"})," to completion with: ",(0,r.jsx)(s.code,{children:"jest.runOnlyPendingTimers()"})]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Be cautious when running all timers to completion as it might create an infinite loop if these timers schedule follow-up timers. In such cases, it's safer to use ",(0,r.jsx)(s.code,{children:"jest.runOnlyPendingTimers()"})," to avoid ending up in an infinite loop of scheduled tasks."]}),"\n",(0,r.jsxs)(s.p,{children:["You can use both built-in Jest fake timers, as well as ",(0,r.jsx)(s.a,{href:"https://sinonjs.org/releases/latest/fake-timers/",rel:"noopener noreferrer",target:"_blank",children:"Sinon.JS fake timers"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"Note: you do not need to advance timers by hand when using User Event API, as it's automatically."})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["14.x%2Fcookbook%2Fbasics%2Fasync-events.md"]={toc:[{id:"summary",text:"Summary",depth:2},{id:"example",text:"Example",depth:3},{id:"async-utilities",text:"Async utilities",depth:2},{id:"findby-queries",text:"`findBy*` queries",depth:3},{id:"example-1",text:"Example",depth:4},{id:"waitfor-function",text:"`waitFor` function",depth:3},{id:"example-2",text:"Example",depth:4},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3},{id:"example-3",text:"Example",depth:4},{id:"fake-timers",text:"Fake Timers",depth:2}],title:"Async Events",headingTitle:"Async Events",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/7515.21bfaf1f22.js b/static/js/async/7515.21bfaf1f22.js deleted file mode 100644 index dd43bdcd..00000000 --- a/static/js/async/7515.21bfaf1f22.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["7515"],{3510(e,r,s){s.r(r),s.d(r,{default:()=>l});var n=s(4848),i=s(8453),o=s(7425);function t(e){let r={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(r.h1,{id:"render-api",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render-api",children:"#"}),(0,n.jsx)(r.code,{children:"render"})," API"]}),"\n",(0,n.jsxs)(r.h2,{id:"render",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render",children:"#"}),(0,n.jsx)(r.code,{children:"render"})," function"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" element"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" RenderOptions"})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"RenderResult"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,n.jsxs)(r.p,{children:["The ",(0,n.jsx)(r.code,{children:"render"})," 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 ",(0,n.jsx)(r.code,{children:"act"})," internally, so all pending React updates run before it resolves. This works with async React features like ",(0,n.jsx)(r.code,{children:"Suspense"})," boundaries and the ",(0,n.jsx)(r.code,{children:"use()"})," hook."]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(r.span,{className:"line"}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'basic test'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"MyApp"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByRole"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'start'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:["When using React context providers like Redux Provider, you'll likely want to wrap the rendered component with them. In such cases, create your own custom ",(0,n.jsx)(r.code,{children:"render"})," method. ",(0,n.jsx)(r.a,{href:"https://testing-library.com/docs/react-testing-library/setup#custom-render",rel:"noopener noreferrer",target:"_blank",children:"Follow this guide on how to set it up"}),"."]}),"\n"]}),"\n",(0,n.jsxs)(r.h3,{id:"options",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),"Options"]}),"\n",(0,n.jsxs)(r.p,{children:["You can customize the ",(0,n.jsx)(r.code,{children:"render"})," method by passing options as the second argument:"]}),"\n",(0,n.jsxs)(r.h4,{id:"wrapper",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapper",children:"#"}),(0,n.jsx)(r.code,{children:"wrapper"})]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsx)(r.code,{children:(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"wrapper"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:".ComponentType"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]})})})}),"\n",(0,n.jsx)(r.p,{children:"Wraps the tested component in an additional wrapper component. Use this to create custom render functions for common React Context providers."}),"\n",(0,n.jsxs)(o.Pq,{type:"note",title:"Text string validation",children:[(0,n.jsxs)(r.p,{children:["Test Renderer enforces React Native's requirement that text strings must be rendered within a ",(0,n.jsx)(r.code,{children:""})," component. If you render a ",(0,n.jsx)(r.code,{children:"string"})," value under components other than ",(0,n.jsx)(r.code,{children:""})," (e.g., under ",(0,n.jsx)(r.code,{children:""}),"), it throws an ",(0,n.jsx)(r.code,{children:"Invariant Violation: Text strings must be rendered within a component"})," error. This matches React Native's runtime behavior."]}),(0,n.jsx)(r.p,{children:"This validation is always enabled and cannot be disabled. Your tests will catch the same text rendering errors that would occur in production."})]}),"\n",(0,n.jsxs)(r.h3,{id:"result",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result",children:"#"}),"Result"]}),"\n",(0,n.jsxs)(r.p,{children:["The ",(0,n.jsx)(r.code,{children:"render"})," function returns a promise that resolves to the same queries and utilities as the ",(0,n.jsx)(r.a,{href:"/14.x/docs/api/screen.html",children:(0,n.jsx)(r.code,{children:"screen"})})," object. Use ",(0,n.jsx)(r.code,{children:"screen"})," for queries and the lifecycle methods from the render result when needed."]}),"\n",(0,n.jsxs)(r.p,{children:["See ",(0,n.jsx)(r.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen",rel:"noopener noreferrer",target:"_blank",children:"this article"})," from Kent C. Dodds for more details."]}),"\n",(0,n.jsx)(o.Pq,{type:"note",title:"Type information",children:(0,n.jsxs)(r.p,{children:["Query results and element references use the ",(0,n.jsx)(r.code,{children:"TestInstance"})," type from ",(0,n.jsx)(r.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"}),". If you need to type element variables, import this type directly from ",(0,n.jsx)(r.code,{children:"test-renderer"}),"."]})})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:r}={...(0,i.R)(),...e.components};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(t,{...e})}):t(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fapi%2Frender.mdx"]={toc:[{id:"render",text:"`render` function",depth:2},{id:"options",text:"Options",depth:3},{id:"wrapper",text:"`wrapper`",depth:4},{id:"result",text:"Result",depth:3}],title:"`render` API",headingTitle:"`render` API",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/7515.867e15b578.js b/static/js/async/7515.867e15b578.js new file mode 100644 index 00000000..75660363 --- /dev/null +++ b/static/js/async/7515.867e15b578.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["7515"],{3510(e,r,s){s.r(r),s.d(r,{default:()=>l});var n=s(4848),i=s(8453),o=s(7425);function t(e){let r={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(r.h1,{id:"render-api",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render-api",children:"#"}),(0,n.jsx)(r.code,{children:"render"})," API"]}),"\n",(0,n.jsxs)(r.h2,{id:"render",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render",children:"#"}),(0,n.jsx)(r.code,{children:"render"})," function"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" element"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" RenderOptions"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"RenderResult"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,n.jsxs)(r.p,{children:["The ",(0,n.jsx)(r.code,{children:"render"})," 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 ",(0,n.jsx)(r.code,{children:"act"})," internally, so all pending React updates run before it resolves. This works with async React features like ",(0,n.jsx)(r.code,{children:"Suspense"})," boundaries and the ",(0,n.jsx)(r.code,{children:"use()"})," hook."]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,n.jsxs)(r.code,{children:[(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(r.span,{className:"line"}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'basic test'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"MyApp"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByRole"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'start'"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsx)(r.span,{className:"line",children:(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(r.blockquote,{children:["\n",(0,n.jsxs)(r.p,{children:["When using React context providers like Redux Provider, you'll likely want to wrap the rendered component with them. In such cases, create your own custom ",(0,n.jsx)(r.code,{children:"render"})," method. ",(0,n.jsx)(r.a,{href:"https://testing-library.com/docs/react-testing-library/setup#custom-render",rel:"noopener noreferrer",target:"_blank",children:"Follow this guide on how to set it up"}),"."]}),"\n"]}),"\n",(0,n.jsxs)(r.h3,{id:"options",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),"Options"]}),"\n",(0,n.jsxs)(r.p,{children:["You can customize the ",(0,n.jsx)(r.code,{children:"render"})," method by passing options as the second argument:"]}),"\n",(0,n.jsxs)(r.h4,{id:"wrapper",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapper",children:"#"}),(0,n.jsx)(r.code,{children:"wrapper"})]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsx)(r.code,{children:(0,n.jsxs)(r.span,{className:"line",children:[(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"wrapper"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-constant)"},children:" React"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:".ComponentType"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:"any"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]})})})}),"\n",(0,n.jsx)(r.p,{children:"Wraps the tested component in an additional wrapper component. Use this to create custom render functions for common React Context providers."}),"\n",(0,n.jsxs)(o.Pq,{type:"note",title:"Text string validation",children:[(0,n.jsxs)(r.p,{children:["Test Renderer enforces React Native's requirement that text strings must be rendered within a ",(0,n.jsx)(r.code,{children:""})," component. If you render a ",(0,n.jsx)(r.code,{children:"string"})," value under components other than ",(0,n.jsx)(r.code,{children:""})," (e.g., under ",(0,n.jsx)(r.code,{children:""}),"), it throws an ",(0,n.jsx)(r.code,{children:"Invariant Violation: Text strings must be rendered within a component"})," error. This matches React Native's runtime behavior."]}),(0,n.jsx)(r.p,{children:"This validation is always enabled and cannot be disabled. Your tests will catch the same text rendering errors that would occur in production."})]}),"\n",(0,n.jsxs)(r.h3,{id:"result",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result",children:"#"}),"Result"]}),"\n",(0,n.jsxs)(r.p,{children:["The ",(0,n.jsx)(r.code,{children:"render"})," function returns a promise that resolves to the same queries and utilities as the ",(0,n.jsx)(r.a,{href:"/14.x/docs/api/screen.html",children:(0,n.jsx)(r.code,{children:"screen"})})," object. Use ",(0,n.jsx)(r.code,{children:"screen"})," for queries and the lifecycle methods from the render result when needed."]}),"\n",(0,n.jsxs)(r.p,{children:["See ",(0,n.jsx)(r.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen",rel:"noopener noreferrer",target:"_blank",children:"this article"})," from Kent C. Dodds for more details."]}),"\n",(0,n.jsx)(o.Pq,{type:"note",title:"Type information",children:(0,n.jsxs)(r.p,{children:["Query results and element references use the ",(0,n.jsx)(r.code,{children:"TestInstance"})," type from ",(0,n.jsx)(r.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"}),". If you need to type element variables, import this type directly from ",(0,n.jsx)(r.code,{children:"test-renderer"}),"."]})})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:r}={...(0,i.R)(),...e.components};return r?(0,n.jsx)(r,{...e,children:(0,n.jsx)(t,{...e})}):t(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fapi%2Frender.mdx"]={toc:[{id:"render",text:"`render` function",depth:2},{id:"options",text:"Options",depth:3},{id:"wrapper",text:"`wrapper`",depth:4},{id:"result",text:"Result",depth:3}],title:"`render` API",headingTitle:"`render` API",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/8146.4f162de74c.js b/static/js/async/8146.4f162de74c.js new file mode 100644 index 00000000..172fcf2b --- /dev/null +++ b/static/js/async/8146.4f162de74c.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8146"],{2377(e,s,n){n.r(s),n.d(s,{default:()=>a});var r=n(4848),i=n(8453),o=n(7425);function l(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"async-utilities",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-utilities",children:"#"}),"Async utilities"]}),"\n",(0,r.jsxs)(s.h2,{id:"findby-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#findby-queries",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"findBy*"})," queries are used to find elements that are not instantly available but will be added as a result of some asynchronous action. Learn more details ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#find-by",children:"here"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"waitfor",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor",children:"#"}),(0,r.jsx)(s.code,{children:"waitFor"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"; interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits for a period of time for the ",(0,r.jsx)(s.code,{children:"expectation"})," callback to pass. ",(0,r.jsx)(s.code,{children:"waitFor"})," may run the callback a number of times until timeout is reached, as specified by the ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," 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 ",(0,r.jsx)(s.code,{children:"waitFor"})," function."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," function will be executing ",(0,r.jsx)(s.code,{children:"expectation"})," callback every ",(0,r.jsx)(s.code,{children:"interval"})," (default: every 50 ms) until ",(0,r.jsx)(s.code,{children:"timeout"})," (default: 1000 ms) is reached. The repeated execution of callback is stopped as soon as it does not throw an error, in such case the value returned by the callback is returned to ",(0,r.jsx)(s.code,{children:"waitFor"})," caller. Otherwise, when it reaches the timeout, the final error thrown by ",(0,r.jsx)(s.code,{children:"expectation"})," will be re-thrown by ",(0,r.jsx)(s.code,{children:"waitFor"})," to the calling code."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ `waitFor` will return immediately because callback does not throw"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," is an async function so you need to ",(0,r.jsx)(s.code,{children:"await"})," the result to pause test execution."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ missing `await`: `waitFor` will just return Promise that will be rejected when the timeout is reached"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nYou can enforce awaiting ",(0,r.jsx)(s.code,{children:"waitFor"})," by using the ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/await-async-utils.md",rel:"noopener noreferrer",target:"_blank",children:"await-async-utils"})," rule from ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library",rel:"noopener noreferrer",target:"_blank",children:"eslint-plugin-testing-library"}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["Since ",(0,r.jsx)(s.code,{children:"waitFor"})," is likely to run ",(0,r.jsx)(s.code,{children:"expectation"})," callback multiple times, it is highly recommended for it ",(0,r.jsx)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#performing-side-effects-in-waitfor",rel:"noopener noreferrer",target:"_blank",children:"not to perform any side effects"})," in ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ button will be pressed on each waitFor iteration"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockOnPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nAvoiding side effects in ",(0,r.jsx)(s.code,{children:"expectation"})," callback can be partially enforced with the ",(0,r.jsxs)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-wait-for-side-effects.md",rel:"noopener noreferrer",target:"_blank",children:[(0,r.jsx)(s.code,{children:"no-wait-for-side-effects"})," rule"]}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["It is also recommended to have a ",(0,r.jsxs)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#having-multiple-assertions-in-a-single-waitfor-callback",rel:"noopener noreferrer",target:"_blank",children:["single assertion per each ",(0,r.jsx)(s.code,{children:"waitFor"})]})," for more consistency and faster failing tests. If you want to make several assertions, then they should be in seperate ",(0,r.jsx)(s.code,{children:"waitFor"})," calls. In many cases you won't actually need to wrap the second assertion in ",(0,r.jsx)(s.code,{children:"waitFor"})," since the first one will do the waiting required for asynchronous change to happen."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-a-react-native-version--071-with-jest-fake-timers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-a-react-native-version--071-with-jest-fake-timers",children:"#"}),"Using a React Native version < 0.71 with Jest fake timers"]}),"\n",(0,r.jsx)(o.Pq,{type:"caution",title:"Caution",children:(0,r.jsxs)(s.p,{children:["\nWhen using a version of React Native < 0.71 and modern fake timers (the default for ",(0,r.jsx)(s.code,{children:"Jest"})," >= 27), ",(0,r.jsx)(s.code,{children:"waitFor"})," won't work (it will always timeout even if ",(0,r.jsx)(s.code,{children:"expectation()"})," doesn't throw) unless you use the custom ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library#custom-jest-preset",rel:"noopener noreferrer",target:"_blank",children:"@testing-library/react-native preset"}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," checks whether Jest fake timers are enabled and adapts its behavior in such case. The following snippet is a simplified version of how it behaves when fake timers are enabled:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"while"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 0"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".advanceTimersByTime"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(interval);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" try"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // resolve"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"catch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (error) {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" error;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// reject"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["In the following example we test that a function is called after 10 seconds using fake timers. Since we're using fake timers, the test won't depend on real time passing and thus be much faster and more reliable. Also we don't have to advance fake timers through Jest fake timers API because ",(0,r.jsx)(s.code,{children:"waitFor"})," already does this for us."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in component"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"setTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" someFunction"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in test"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(someFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nIn order to properly use ",(0,r.jsx)(s.code,{children:"waitFor"})," you need at least React >=16.9.0 (featuring async ",(0,r.jsx)(s.code,{children:"act"}),") or React Native >=0.61 (which comes with React >=16.9.0)."]})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/12.x/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})}),"\n",(0,r.jsxs)(s.h2,{id:"waitforelementtoberemoved",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitforelementtoberemoved",children:"#"}),(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"; interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits for non-deterministic periods of time until queried element is removed or times out. ",(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," periodically calls ",(0,r.jsx)(s.code,{children:"expectation"})," every ",(0,r.jsx)(s.code,{children:"interval"})," milliseconds to determine whether the element has been removed or not."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForElementToBeRemoved } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waiting for an Banana to be removed'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Banana"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Banana ready'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"This method expects that the element is initially present in the render tree and then is removed from it. If the element is not present when you call this method it throws an error."}),"\n",(0,r.jsxs)(s.p,{children:["You can use any of ",(0,r.jsx)(s.code,{children:"getBy"}),", ",(0,r.jsx)(s.code,{children:"getAllBy"}),", ",(0,r.jsx)(s.code,{children:"queryBy"})," and ",(0,r.jsx)(s.code,{children:"queryAllBy"})," queries for ",(0,r.jsx)(s.code,{children:"expectation"})," parameter."]}),"\n",(0,r.jsx)(o.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nIn order to properly use ",(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," you need at least React >=16.9.0 (featuring async ",(0,r.jsx)(s.code,{children:"act"}),") or React Native >=0.61 (which comes with React >=16.9.0)."]})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/12.x/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["12.x%2Fdocs%2Fapi%2Fmisc%2Fasync.mdx"]={toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2},{id:"waitfor",text:"`waitFor`",depth:2},{id:"using-a-react-native-version--071-with-jest-fake-timers",text:"Using a React Native version < 0.71 with Jest fake timers",depth:3},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2}],title:"Async utilities",headingTitle:"Async utilities",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/8146.9a723fbe54.js b/static/js/async/8146.9a723fbe54.js deleted file mode 100644 index a2c69a07..00000000 --- a/static/js/async/8146.9a723fbe54.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8146"],{2377(e,s,n){n.r(s),n.d(s,{default:()=>a});var r=n(4848),i=n(8453),o=n(7425);function l(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"async-utilities",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-utilities",children:"#"}),"Async utilities"]}),"\n",(0,r.jsxs)(s.h2,{id:"findby-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#findby-queries",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"findBy*"})," queries are used to find elements that are not instantly available but will be added as a result of some asynchronous action. Learn more details ",(0,r.jsx)(s.a,{href:"/12.x/docs/api/queries.html#find-by",children:"here"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"waitfor",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor",children:"#"}),(0,r.jsx)(s.code,{children:"waitFor"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"; interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits for a period of time for the ",(0,r.jsx)(s.code,{children:"expectation"})," callback to pass. ",(0,r.jsx)(s.code,{children:"waitFor"})," may run the callback a number of times until timeout is reached, as specified by the ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," 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 ",(0,r.jsx)(s.code,{children:"waitFor"})," function."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," function will be executing ",(0,r.jsx)(s.code,{children:"expectation"})," callback every ",(0,r.jsx)(s.code,{children:"interval"})," (default: every 50 ms) until ",(0,r.jsx)(s.code,{children:"timeout"})," (default: 1000 ms) is reached. The repeated execution of callback is stopped as soon as it does not throw an error, in such case the value returned by the callback is returned to ",(0,r.jsx)(s.code,{children:"waitFor"})," caller. Otherwise, when it reaches the timeout, the final error thrown by ",(0,r.jsx)(s.code,{children:"expectation"})," will be re-thrown by ",(0,r.jsx)(s.code,{children:"waitFor"})," to the calling code."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ `waitFor` will return immediately because callback does not throw"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," is an async function so you need to ",(0,r.jsx)(s.code,{children:"await"})," the result to pause test execution."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ missing `await`: `waitFor` will just return Promise that will be rejected when the timeout is reached"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nYou can enforce awaiting ",(0,r.jsx)(s.code,{children:"waitFor"})," by using the ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/await-async-utils.md",rel:"noopener noreferrer",target:"_blank",children:"await-async-utils"})," rule from ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library",rel:"noopener noreferrer",target:"_blank",children:"eslint-plugin-testing-library"}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["Since ",(0,r.jsx)(s.code,{children:"waitFor"})," is likely to run ",(0,r.jsx)(s.code,{children:"expectation"})," callback multiple times, it is highly recommended for it ",(0,r.jsx)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#performing-side-effects-in-waitfor",rel:"noopener noreferrer",target:"_blank",children:"not to perform any side effects"})," in ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ button will be pressed on each waitFor iteration"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockOnPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nAvoiding side effects in ",(0,r.jsx)(s.code,{children:"expectation"})," callback can be partially enforced with the ",(0,r.jsxs)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-wait-for-side-effects.md",rel:"noopener noreferrer",target:"_blank",children:[(0,r.jsx)(s.code,{children:"no-wait-for-side-effects"})," rule"]}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["It is also recommended to have a ",(0,r.jsxs)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#having-multiple-assertions-in-a-single-waitfor-callback",rel:"noopener noreferrer",target:"_blank",children:["single assertion per each ",(0,r.jsx)(s.code,{children:"waitFor"})]})," for more consistency and faster failing tests. If you want to make several assertions, then they should be in seperate ",(0,r.jsx)(s.code,{children:"waitFor"})," calls. In many cases you won't actually need to wrap the second assertion in ",(0,r.jsx)(s.code,{children:"waitFor"})," since the first one will do the waiting required for asynchronous change to happen."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-a-react-native-version--071-with-jest-fake-timers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-a-react-native-version--071-with-jest-fake-timers",children:"#"}),"Using a React Native version < 0.71 with Jest fake timers"]}),"\n",(0,r.jsx)(o.Pq,{type:"caution",title:"Caution",children:(0,r.jsxs)(s.p,{children:["\nWhen using a version of React Native < 0.71 and modern fake timers (the default for ",(0,r.jsx)(s.code,{children:"Jest"})," >= 27), ",(0,r.jsx)(s.code,{children:"waitFor"})," won't work (it will always timeout even if ",(0,r.jsx)(s.code,{children:"expectation()"})," doesn't throw) unless you use the custom ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library#custom-jest-preset",rel:"noopener noreferrer",target:"_blank",children:"@testing-library/react-native preset"}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," checks whether Jest fake timers are enabled and adapts its behavior in such case. The following snippet is a simplified version of how it behaves when fake timers are enabled:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"while"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 0"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".advanceTimersByTime"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(interval);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" try"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // resolve"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"catch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (error) {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" error;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// reject"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["In the following example we test that a function is called after 10 seconds using fake timers. Since we're using fake timers, the test won't depend on real time passing and thus be much faster and more reliable. Also we don't have to advance fake timers through Jest fake timers API because ",(0,r.jsx)(s.code,{children:"waitFor"})," already does this for us."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in component"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"setTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" someFunction"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in test"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(someFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nIn order to properly use ",(0,r.jsx)(s.code,{children:"waitFor"})," you need at least React >=16.9.0 (featuring async ",(0,r.jsx)(s.code,{children:"act"}),") or React Native >=0.61 (which comes with React >=16.9.0)."]})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/12.x/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})}),"\n",(0,r.jsxs)(s.h2,{id:"waitforelementtoberemoved",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitforelementtoberemoved",children:"#"}),(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"; interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits for non-deterministic periods of time until queried element is removed or times out. ",(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," periodically calls ",(0,r.jsx)(s.code,{children:"expectation"})," every ",(0,r.jsx)(s.code,{children:"interval"})," milliseconds to determine whether the element has been removed or not."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForElementToBeRemoved } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waiting for an Banana to be removed'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Banana"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Banana ready'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"This method expects that the element is initially present in the render tree and then is removed from it. If the element is not present when you call this method it throws an error."}),"\n",(0,r.jsxs)(s.p,{children:["You can use any of ",(0,r.jsx)(s.code,{children:"getBy"}),", ",(0,r.jsx)(s.code,{children:"getAllBy"}),", ",(0,r.jsx)(s.code,{children:"queryBy"})," and ",(0,r.jsx)(s.code,{children:"queryAllBy"})," queries for ",(0,r.jsx)(s.code,{children:"expectation"})," parameter."]}),"\n",(0,r.jsx)(o.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nIn order to properly use ",(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," you need at least React >=16.9.0 (featuring async ",(0,r.jsx)(s.code,{children:"act"}),") or React Native >=0.61 (which comes with React >=16.9.0)."]})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/12.x/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["12.x%2Fdocs%2Fapi%2Fmisc%2Fasync.mdx"]={toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2},{id:"waitfor",text:"`waitFor`",depth:2},{id:"using-a-react-native-version--071-with-jest-fake-timers",text:"Using a React Native version < 0.71 with Jest fake timers",depth:3},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2}],title:"Async utilities",headingTitle:"Async utilities",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/8397.3a94532f76.js b/static/js/async/8397.faa3635b29.js similarity index 55% rename from static/js/async/8397.3a94532f76.js rename to static/js/async/8397.faa3635b29.js index fdfc540e..e5988af1 100644 --- a/static/js/async/8397.3a94532f76.js +++ b/static/js/async/8397.faa3635b29.js @@ -1 +1 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8397"],{8220(s,n,e){e.r(n),e.d(n,{default:()=>a});var r=e(4848),o=e(8453),i=e(7425);function l(s){let n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"jotai",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#jotai",children:"#"}),"Jotai"]}),"\n",(0,r.jsxs)(n.h2,{id:"introduction",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#introduction",children:"#"}),"Introduction"]}),"\n",(0,r.jsx)(n.p,{children:"Jotai is a global state management library for React that uses an atomic approach to optimize\nrenders and solve issues like extra re-renders and the need for memoization. It scales from simple\nstate management to complex enterprise applications, offering utilities and extensions to enhance\nthe developer experience."}),"\n",(0,r.jsxs)(n.h2,{id:"task-list-example",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#task-list-example",children:"#"}),"Task List Example"]}),"\n",(0,r.jsx)(n.p,{children:"Let's assume we have a simple task list component that uses Jotai for state management. The\ncomponent has a list of tasks, a text input for typing new task name and a button to add a new task to the list."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/TaskList.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { nanoid } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'nanoid'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(newTaskTitleAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" handleAddTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((tasks) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" nanoid"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ]);"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".map"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((task) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" key"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".id} "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"testID"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"task-item"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".title}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ))}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"length"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ?"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">No tasks, start by adding one... "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityLabel"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task"'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task..."'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{newTaskTitle}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" onChangeText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{(text) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(text)}"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{handleAddTask}>"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">Add Task"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"starting-with-a-simple-test",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#starting-with-a-simple-test",children:"#"}),"Starting with a Simple Test"]}),"\n",(0,r.jsxs)(n.p,{children:["We can test our ",(0,r.jsx)(n.code,{children:"TaskList"})," component using React Native Testing Library's (RNTL) regular ",(0,r.jsx)(n.code,{children:"render"}),"\nfunction. Although it is sufficient to test the empty state of the ",(0,r.jsx)(n.code,{children:"TaskList"})," component, it is not\nenough to test the component with initial tasks present in the list."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" userEvent } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './test-utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { TaskList } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './TaskList'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders an empty task list'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/no tasks, start by adding one/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function-to-populate-jotai-atoms-with-initial-values",children:"#"}),"Custom Render Function to populate Jotai Atoms with Initial Values"]}),"\n",(0,r.jsxs)(n.p,{children:["To test the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks, we need to be able to populate the ",(0,r.jsx)(n.code,{children:"tasksAtom"})," with\ninitial values. We can create a custom render function that uses Jotai's ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook to\nhydrate the atoms with initial values. This function will accept the initial atoms and their\ncorresponding values as an argument."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/test-utils.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useHydrateAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { PrimitiveAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/vanilla/atom'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Jotai types are not well exported, so we will make our life easier by using `any`."})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"> "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PrimitiveAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" interface"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * Renders a React component with Jotai atoms for testing purposes."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" component - The React component to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" options - The render options including the initial atom values."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The render result from `@testing-library/react-native`."})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" component"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".initialValues}>{component}"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PropsWithChildren"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<{"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}>;"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * A wrapper component that hydrates Jotai atoms with initial values."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" initialValues - The initial values for the Jotai atoms."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" children - The child components to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The rendered children."})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"({ initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useHydrateAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(initialValues);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children;"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-the-tasklist-component-with-initial-tasks",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-the-tasklist-component-with-initial-tasks",children:"#"}),"Testing the ",(0,r.jsx)(n.code,{children:"TaskList"})," Component with initial tasks"]}),"\n",(0,r.jsxs)(n.p,{children:["We can now use the ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," function to render the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks. The\n",(0,r.jsx)(n.code,{children:"initialValues"})," property will contain the ",(0,r.jsx)(n.code,{children:"tasksAtom"}),", ",(0,r.jsx)(n.code,{children:"newTaskTitleAtom"})," and their initial values. We can then test the component to ensure that the initial tasks are rendered correctly."]}),"\n",(0,r.jsx)(i.Pq,{type:"info",title:"Info",children:(0,r.jsx)(n.p,{children:"\nIn our test, we populated only one atom and its initial value, but you can add other Jotai atoms and their corresponding values to the initialValues array as needed."})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"======="})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [{ id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '1'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy bread'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders a to do list with 1 items initially, and adds a new item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy bread/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/new task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /add task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy almond milk/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"modifying-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#modifying-atom-outside-of-react-components",children:"#"}),"Modifying atom outside of React components"]}),"\n",(0,r.jsx)(n.p,{children:"In several cases, you might need to change an atom's state outside a React component. In our case,\nwe have a set of functions to get tasks and set tasks, which change the state of the task list atom."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/state.ts",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" createStore } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[]>([]);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Available for use outside React components"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" createStore"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Selectors"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".get"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Actions"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" task]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-atom-outside-of-react-components",children:"#"}),"Testing atom outside of React components"]}),"\n",(0,r.jsxs)(n.p,{children:["You can test the ",(0,r.jsx)(n.code,{children:"getAllTasks"})," and ",(0,r.jsx)(n.code,{children:"addTask"})," functions outside the React component's scope by setting\nthe initial to-do items in the store and then checking if the functions work as expected.\nNo special setup is required to test these functions, as ",(0,r.jsx)(n.code,{children:"store.set"})," is available by default by\nJotai."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"//..."})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'modify store outside of React component'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" // Set the initial to do items in the store"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '2'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"conclusion",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#conclusion",children:"#"}),"Conclusion"]}),"\n",(0,r.jsxs)(n.p,{children:["Testing a component or a function that depends on Jotai atoms is straightforward with the help of\nthe ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook. We've seen how to create a custom render function ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," that\nsets up atoms and their initial values for testing purposes. We've also seen how to test functions\nthat change the state of atoms outside React components. This approach allows us to test components\nin different states and scenarios, ensuring they behave as expected."]})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}={...(0,o.R)(),...s.components};return n?(0,r.jsx)(n,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["12.x%2Fcookbook%2Fstate-management%2Fjotai.md"]={toc:[{id:"introduction",text:"Introduction",depth:2},{id:"task-list-example",text:"Task List Example",depth:2},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2},{id:"conclusion",text:"Conclusion",depth:2}],title:"Jotai",headingTitle:"Jotai",frontmatter:{}}}}]); \ No newline at end of file +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8397"],{8220(s,n,e){e.r(n),e.d(n,{default:()=>a});var r=e(4848),o=e(8453),i=e(7425);function l(s){let n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.h1,{id:"jotai",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#jotai",children:"#"}),"Jotai"]}),"\n",(0,r.jsxs)(n.h2,{id:"introduction",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#introduction",children:"#"}),"Introduction"]}),"\n",(0,r.jsx)(n.p,{children:"Jotai is a global state management library for React that uses an atomic approach to optimize\nrenders and solve issues like extra re-renders and the need for memoization. It scales from simple\nstate management to complex enterprise applications, offering utilities and extensions to enhance\nthe developer experience."}),"\n",(0,r.jsxs)(n.h2,{id:"task-list-example",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#task-list-example",children:"#"}),"Task List Example"]}),"\n",(0,r.jsx)(n.p,{children:"Let's assume we have a simple task list component that uses Jotai for state management. The\ncomponent has a list of tasks, a text input for typing new task name and a button to add a new task to the list."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/TaskList.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { nanoid } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'nanoid'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"() {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(newTaskTitleAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" handleAddTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((tasks) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" nanoid"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" newTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ]);"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" };"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".map"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"((task) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" key"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".id} "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"testID"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"task-item"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".title}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ))}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"!"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"tasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"length"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ?"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">No tasks, start by adding one... "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TextInput"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityLabel"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task"'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" placeholder"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"New Task..."'})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{newTaskTitle}"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" onChangeText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{(text) "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" setNewTaskTitle"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(text)}"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{handleAddTask}>"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">Add Task"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"starting-with-a-simple-test",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#starting-with-a-simple-test",children:"#"}),"Starting with a Simple Test"]}),"\n",(0,r.jsxs)(n.p,{children:["We can test our ",(0,r.jsx)(n.code,{children:"TaskList"})," component using React Native Testing Library's (RNTL) regular ",(0,r.jsx)(n.code,{children:"render"}),"\nfunction. Although it is sufficient to test the empty state of the ",(0,r.jsx)(n.code,{children:"TaskList"})," component, it is not\nenough to test the component with initial tasks present in the list."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" userEvent } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './test-utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { TaskList } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './TaskList'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders an empty task list'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/no tasks, start by adding one/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function-to-populate-jotai-atoms-with-initial-values",children:"#"}),"Custom Render Function to populate Jotai Atoms with Initial Values"]}),"\n",(0,r.jsxs)(n.p,{children:["To test the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks, we need to be able to populate the ",(0,r.jsx)(n.code,{children:"tasksAtom"})," with\ninitial values. We can create a custom render function that uses Jotai's ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook to\nhydrate the atoms with initial values. This function will accept the initial atoms and their\ncorresponding values as an argument."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/test-utils.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" *"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" as"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" React "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { useHydrateAtoms } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/utils'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { PrimitiveAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai/vanilla/atom'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Jotai types are not well exported, so we will make our life easier by using `any`."})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"> "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PrimitiveAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" interface"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"any"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * Renders a React component with Jotai atoms for testing purposes."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" component - The React component to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" options - The render options including the initial atom values."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The render result from `@testing-library/react-native`."})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" component"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithAtomsOptions"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:".initialValues}>{component}"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"PropsWithChildren"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<{"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" AtomInitialValueTuple"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">[];"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}>;"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"/**"})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * A wrapper component that hydrates Jotai atoms with initial values."})}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" *"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" initialValues - The initial values for the Jotai atoms."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@param"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" children - The child components to render."})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" * "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"@returns"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" The rendered children."})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" */"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapper"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"({ initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children }"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" HydrateAtomsWrapperProps"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" useHydrateAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(initialValues);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" children;"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-the-tasklist-component-with-initial-tasks",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-the-tasklist-component-with-initial-tasks",children:"#"}),"Testing the ",(0,r.jsx)(n.code,{children:"TaskList"})," Component with initial tasks"]}),"\n",(0,r.jsxs)(n.p,{children:["We can now use the ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," function to render the ",(0,r.jsx)(n.code,{children:"TaskList"})," component with initial tasks. The\n",(0,r.jsx)(n.code,{children:"initialValues"})," property will contain the ",(0,r.jsx)(n.code,{children:"tasksAtom"}),", ",(0,r.jsx)(n.code,{children:"newTaskTitleAtom"})," and their initial values. We can then test the component to ensure that the initial tasks are rendered correctly."]}),"\n",(0,r.jsx)(i.Pq,{type:"info",title:"Info",children:(0,r.jsx)(n.p,{children:"\nIn our test, we populated only one atom and its initial value, but you can add other Jotai atoms and their corresponding values to the initialValues array as needed."})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"status-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"======="})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [{ id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '1'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy bread'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }];"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders a to do list with 1 items initially, and adds a new item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithAtoms"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"TaskList"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" initialValues"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" [newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy bread/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/new task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" /add task/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/buy almond milk/"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByTestId"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'task-item'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveLength"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"modifying-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#modifying-atom-outside-of-react-components",children:"#"}),"Modifying atom outside of React components"]}),"\n",(0,r.jsx)(n.p,{children:"In several cases, you might need to change an atom's state outside a React component. In our case,\nwe have a set of functions to get tasks and set tasks, which change the state of the task list atom."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/state.ts",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" createStore } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'jotai'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Task } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './types'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[]>([]);"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" newTaskTitleAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" atom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"''"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Available for use outside React components"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" createStore"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Selectors"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"[] {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".get"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"// Actions"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" Task"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" task]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"testing-atom-outside-of-react-components",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#testing-atom-outside-of-react-components",children:"#"}),"Testing atom outside of React components"]}),"\n",(0,r.jsxs)(n.p,{children:["You can test the ",(0,r.jsx)(n.code,{children:"getAllTasks"})," and ",(0,r.jsx)(n.code,{children:"addTask"})," functions outside the React component's scope by setting\nthe initial to-do items in the store and then checking if the functions work as expected.\nNo special setup is required to test these functions, as ",(0,r.jsx)(n.code,{children:"store.set"})," is available by default by\nJotai."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"state-management/jotai/__tests__/TaskList.test.tsx",lang:"tsx",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" tasksAtom } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" './state'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:"//..."})}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'modify store outside of React component'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" // Set the initial to do items in the store"})}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" store"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".set"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(tasksAtom"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(n.span,{className:"line"}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { id"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '2'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" title"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Buy almond milk'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" addTask"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"getAllTasks"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"())"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:".toEqual"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"(["}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"INITIAL_TASKS"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:" NEW_TASK"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]);"})]}),"\n",(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(n.h2,{id:"conclusion",children:[(0,r.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#conclusion",children:"#"}),"Conclusion"]}),"\n",(0,r.jsxs)(n.p,{children:["Testing a component or a function that depends on Jotai atoms is straightforward with the help of\nthe ",(0,r.jsx)(n.code,{children:"useHydrateAtoms"})," hook. We've seen how to create a custom render function ",(0,r.jsx)(n.code,{children:"renderWithAtoms"})," that\nsets up atoms and their initial values for testing purposes. We've also seen how to test functions\nthat change the state of atoms outside React components. This approach allows us to test components\nin different states and scenarios, ensuring they behave as expected."]})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}={...(0,o.R)(),...s.components};return n?(0,r.jsx)(n,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["12.x%2Fcookbook%2Fstate-management%2Fjotai.md"]={toc:[{id:"introduction",text:"Introduction",depth:2},{id:"task-list-example",text:"Task List Example",depth:2},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2},{id:"conclusion",text:"Conclusion",depth:2}],title:"Jotai",headingTitle:"Jotai",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/8481.090b538456.js b/static/js/async/8481.090b538456.js deleted file mode 100644 index 4775edd1..00000000 --- a/static/js/async/8481.090b538456.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8481"],{7608(e,s,n){n.r(s),n.d(s,{default:()=>a});var r=n(4848),i=n(8453),o=n(7425);function l(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"async-utilities",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-utilities",children:"#"}),"Async utilities"]}),"\n",(0,r.jsxs)(s.h2,{id:"findby-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#findby-queries",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"findBy*"})," queries are used to find elements that are not instantly available but will be added as a result of some asynchronous action. Learn more details ",(0,r.jsx)(s.a,{href:"/docs/api/queries.html#find-by",children:"here"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"waitfor",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor",children:"#"}),(0,r.jsx)(s.code,{children:"waitFor"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"; interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits for the ",(0,r.jsx)(s.code,{children:"expectation"})," callback to pass. ",(0,r.jsx)(s.code,{children:"waitFor"})," may run the callback multiple times until the timeout is reached, as specified by the ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," options. The callback must throw an error when the expectation isn't met. Returning any value, including a falsy one, is treated as meeting the expectation, and the callback result is returned to the caller of ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," executes the ",(0,r.jsx)(s.code,{children:"expectation"})," callback every ",(0,r.jsx)(s.code,{children:"interval"})," (default: every 50 ms) until ",(0,r.jsx)(s.code,{children:"timeout"})," (default: 1000 ms) is reached. The repeated execution stops as soon as it doesn't throw an error, and the value returned by the callback is returned to the ",(0,r.jsx)(s.code,{children:"waitFor"})," caller. Otherwise, when it reaches the timeout, the final error thrown by ",(0,r.jsx)(s.code,{children:"expectation"})," is re-thrown by ",(0,r.jsx)(s.code,{children:"waitFor"})," to the calling code."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ `waitFor` will return immediately because callback does not throw"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," is an async function, so you need to ",(0,r.jsx)(s.code,{children:"await"})," the result to pause test execution."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ missing `await`: `waitFor` will just return Promise that will be rejected when the timeout is reached"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nYou can enforce awaiting ",(0,r.jsx)(s.code,{children:"waitFor"})," by using the ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/await-async-utils.md",rel:"noopener noreferrer",target:"_blank",children:"await-async-utils"})," rule from ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library",rel:"noopener noreferrer",target:"_blank",children:"eslint-plugin-testing-library"}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["Since ",(0,r.jsx)(s.code,{children:"waitFor"})," is likely to run the ",(0,r.jsx)(s.code,{children:"expectation"})," callback multiple times, it's highly recommended ",(0,r.jsx)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#performing-side-effects-in-waitfor",rel:"noopener noreferrer",target:"_blank",children:"not to perform any side effects"})," in ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ button will be pressed on each waitFor iteration"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockOnPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nAvoiding side effects in ",(0,r.jsx)(s.code,{children:"expectation"})," callback can be partially enforced with the ",(0,r.jsxs)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-wait-for-side-effects.md",rel:"noopener noreferrer",target:"_blank",children:[(0,r.jsx)(s.code,{children:"no-wait-for-side-effects"})," rule"]}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["It's also recommended to have a ",(0,r.jsxs)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#having-multiple-assertions-in-a-single-waitfor-callback",rel:"noopener noreferrer",target:"_blank",children:["single assertion per each ",(0,r.jsx)(s.code,{children:"waitFor"})]})," for more consistency and faster failing tests. If you want to make several assertions, put them in separate ",(0,r.jsx)(s.code,{children:"waitFor"})," calls. In many cases you won't need to wrap the second assertion in ",(0,r.jsx)(s.code,{children:"waitFor"})," since the first one will do the waiting required for the asynchronous change to happen."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," checks whether Jest fake timers are enabled and adapts its behavior accordingly. The following snippet is a simplified version of how it behaves when fake timers are enabled:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"while"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 0"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".advanceTimersByTime"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(interval);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" try"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // resolve"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"catch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (error) {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" error;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// reject"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["In the following example we test that a function is called after 10 seconds using fake timers. Since we're using fake timers, the test won't depend on real time passing and will be much faster and more reliable. We don't have to advance fake timers through Jest fake timers API because ",(0,r.jsx)(s.code,{children:"waitFor"})," already does this for us."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in component"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"setTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" someFunction"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in test"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(someFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})}),"\n",(0,r.jsxs)(s.h2,{id:"waitforelementtoberemoved",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitforelementtoberemoved",children:"#"}),(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"; interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits until the queried element is removed or times out. ",(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," periodically calls ",(0,r.jsx)(s.code,{children:"expectation"})," every ",(0,r.jsx)(s.code,{children:"interval"})," milliseconds to determine whether the element has been removed or not."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForElementToBeRemoved } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waiting for an Banana to be removed'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Banana"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Banana ready'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"This method expects the element to be initially present in the render tree and then removed from it. If the element isn't present when you call this method, it throws an error."}),"\n",(0,r.jsxs)(s.p,{children:["You can use any of ",(0,r.jsx)(s.code,{children:"getBy"}),", ",(0,r.jsx)(s.code,{children:"getAllBy"}),", ",(0,r.jsx)(s.code,{children:"queryBy"}),", and ",(0,r.jsx)(s.code,{children:"queryAllBy"})," queries for the ",(0,r.jsx)(s.code,{children:"expectation"})," parameter."]}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fapi%2Fmisc%2Fasync.mdx"]={toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2},{id:"waitfor",text:"`waitFor`",depth:2},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2}],title:"Async utilities",headingTitle:"Async utilities",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/8481.dd9a311183.js b/static/js/async/8481.dd9a311183.js new file mode 100644 index 00000000..92e1eb61 --- /dev/null +++ b/static/js/async/8481.dd9a311183.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8481"],{7608(e,s,n){n.r(s),n.d(s,{default:()=>a});var r=n(4848),i=n(8453),o=n(7425);function l(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"async-utilities",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-utilities",children:"#"}),"Async utilities"]}),"\n",(0,r.jsxs)(s.h2,{id:"findby-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#findby-queries",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"findBy*"})," queries are used to find elements that are not instantly available but will be added as a result of some asynchronous action. Learn more details ",(0,r.jsx)(s.a,{href:"/docs/api/queries.html#find-by",children:"here"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"waitfor",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor",children:"#"}),(0,r.jsx)(s.code,{children:"waitFor"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"; interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits for the ",(0,r.jsx)(s.code,{children:"expectation"})," callback to pass. ",(0,r.jsx)(s.code,{children:"waitFor"})," may run the callback multiple times until the timeout is reached, as specified by the ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," options. The callback must throw an error when the expectation isn't met. Returning any value, including a falsy one, is treated as meeting the expectation, and the callback result is returned to the caller of ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," executes the ",(0,r.jsx)(s.code,{children:"expectation"})," callback every ",(0,r.jsx)(s.code,{children:"interval"})," (default: every 50 ms) until ",(0,r.jsx)(s.code,{children:"timeout"})," (default: 1000 ms) is reached. The repeated execution stops as soon as it doesn't throw an error, and the value returned by the callback is returned to the ",(0,r.jsx)(s.code,{children:"waitFor"})," caller. Otherwise, when it reaches the timeout, the final error thrown by ",(0,r.jsx)(s.code,{children:"expectation"})," is re-thrown by ",(0,r.jsx)(s.code,{children:"waitFor"})," to the calling code."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ `waitFor` will return immediately because callback does not throw"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," is an async function, so you need to ",(0,r.jsx)(s.code,{children:"await"})," the result to pause test execution."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ missing `await`: `waitFor` will just return Promise that will be rejected when the timeout is reached"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nYou can enforce awaiting ",(0,r.jsx)(s.code,{children:"waitFor"})," by using the ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/await-async-utils.md",rel:"noopener noreferrer",target:"_blank",children:"await-async-utils"})," rule from ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library",rel:"noopener noreferrer",target:"_blank",children:"eslint-plugin-testing-library"}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["Since ",(0,r.jsx)(s.code,{children:"waitFor"})," is likely to run the ",(0,r.jsx)(s.code,{children:"expectation"})," callback multiple times, it's highly recommended ",(0,r.jsx)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#performing-side-effects-in-waitfor",rel:"noopener noreferrer",target:"_blank",children:"not to perform any side effects"})," in ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ button will be pressed on each waitFor iteration"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockOnPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nAvoiding side effects in ",(0,r.jsx)(s.code,{children:"expectation"})," callback can be partially enforced with the ",(0,r.jsxs)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-wait-for-side-effects.md",rel:"noopener noreferrer",target:"_blank",children:[(0,r.jsx)(s.code,{children:"no-wait-for-side-effects"})," rule"]}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["It's also recommended to have a ",(0,r.jsxs)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#having-multiple-assertions-in-a-single-waitfor-callback",rel:"noopener noreferrer",target:"_blank",children:["single assertion per each ",(0,r.jsx)(s.code,{children:"waitFor"})]})," for more consistency and faster failing tests. If you want to make several assertions, put them in separate ",(0,r.jsx)(s.code,{children:"waitFor"})," calls. In many cases you won't need to wrap the second assertion in ",(0,r.jsx)(s.code,{children:"waitFor"})," since the first one will do the waiting required for the asynchronous change to happen."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," checks whether Jest fake timers are enabled and adapts its behavior accordingly. The following snippet is a simplified version of how it behaves when fake timers are enabled:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"while"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 0"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".advanceTimersByTime"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(interval);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" try"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // resolve"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"catch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (error) {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" error;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// reject"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["In the following example we test that a function is called after 10 seconds using fake timers. Since we're using fake timers, the test won't depend on real time passing and will be much faster and more reliable. We don't have to advance fake timers through Jest fake timers API because ",(0,r.jsx)(s.code,{children:"waitFor"})," already does this for us."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in component"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"setTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" someFunction"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in test"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(someFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})}),"\n",(0,r.jsxs)(s.h2,{id:"waitforelementtoberemoved",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitforelementtoberemoved",children:"#"}),(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"; interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits until the queried element is removed or times out. ",(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," periodically calls ",(0,r.jsx)(s.code,{children:"expectation"})," every ",(0,r.jsx)(s.code,{children:"interval"})," milliseconds to determine whether the element has been removed or not."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForElementToBeRemoved } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waiting for an Banana to be removed'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Banana"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Banana ready'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"This method expects the element to be initially present in the render tree and then removed from it. If the element isn't present when you call this method, it throws an error."}),"\n",(0,r.jsxs)(s.p,{children:["You can use any of ",(0,r.jsx)(s.code,{children:"getBy"}),", ",(0,r.jsx)(s.code,{children:"getAllBy"}),", ",(0,r.jsx)(s.code,{children:"queryBy"}),", and ",(0,r.jsx)(s.code,{children:"queryAllBy"})," queries for the ",(0,r.jsx)(s.code,{children:"expectation"})," parameter."]}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fapi%2Fmisc%2Fasync.mdx"]={toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2},{id:"waitfor",text:"`waitFor`",depth:2},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2}],title:"Async utilities",headingTitle:"Async utilities",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/8617.2bd68393e9.js b/static/js/async/8617.2bd68393e9.js deleted file mode 100644 index b6eb1b3d..00000000 --- a/static/js/async/8617.2bd68393e9.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8617"],{8672(e,s,n){n.r(s),n.d(s,{default:()=>l});var r=n(4848),i=n(8453);function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"async-tests",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-tests",children:"#"}),"Async tests"]}),"\n",(0,r.jsxs)(s.h2,{id:"summary",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,r.jsx)(s.p,{children:"Typically, you would write synchronous tests, as they are simple and get the work done. However, there are cases when using asynchronous (async) tests might be necessary or beneficial. The two most common cases are:"}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Testing Code with asynchronous operations"}),": When your code relies on asynchronous operations, such as network calls or database queries, async tests are essential. Even though you should mock these network calls, the mock should act similarly to the actual behavior and hence by async."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"UserEvent API:"})," Using the ",(0,r.jsx)(s.a,{href:"/docs/api/events/user-event.html",children:"User Event API"})," in your tests creates more realistic event handling. These interactions introduce delays (even though these are typically event-loop ticks with 0 ms delays), requiring async tests to handle the timing correctly."]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:"Using async tests when needed ensures your tests are reliable and simulate real-world conditions accurately."}),"\n",(0,r.jsxs)(s.h3,{id:"example",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,r.jsx)(s.p,{children:"Consider a basic asynchronous test for a user signing in with correct credentials:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"javascript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'User can sign in with correct credentials'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Typical test setup"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"App"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // No need to use async here, components are already rendered"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign in to Hello World App!'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Using await as User Event requires it"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'admin'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Password'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'admin1'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign In'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Using await as sign in operation is asynchronous"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Welcome admin!'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Follow-up assertions do not need to be async, as we already waited for sign in operation to complete"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign in to Hello World App'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" )."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Password'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"async-utilities",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-utilities",children:"#"}),"Async utilities"]}),"\n",(0,r.jsx)(s.p,{children:"There are several asynchronous utilities you might use in your tests."}),"\n",(0,r.jsxs)(s.h3,{id:"findby-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#findby-queries",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsxs)(s.p,{children:["The most common are the ",(0,r.jsxs)(s.a,{href:"/docs/api/queries.html#find-by",children:[(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),". These are useful when waiting for a matching element to appear. They can be understood as a ",(0,r.jsxs)(s.a,{href:"/docs/api/queries.html#get-by",children:[(0,r.jsx)(s.code,{children:"getBy*"})," queries"]})," used in conjunction with a ",(0,r.jsxs)(s.a,{href:"/docs/api/misc/async.html#waitfor",children:[(0,r.jsx)(s.code,{children:"waitFor"})," function"]}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["They accept the same predicates as ",(0,r.jsx)(s.code,{children:"getBy*"})," queries like ",(0,r.jsx)(s.code,{children:"findByRole"}),", ",(0,r.jsx)(s.code,{children:"findByTest"}),", etc. They also have a multiple elements variant called ",(0,r.jsx)(s.a,{href:"/docs/api/queries.html#find-all-by",children:(0,r.jsx)(s.code,{children:"findAllBy*"})}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:": ("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" role"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" queryOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Query specific options"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // .."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Each query has a default ",(0,r.jsx)(s.code,{children:"timeout"})," value of 1000 ms and a default ",(0,r.jsx)(s.code,{children:"interval"})," of 50 ms. Custom timeout and check intervals can be specified if needed, as shown below:"]}),"\n",(0,r.jsxs)(s.h4,{id:"example-1",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-1",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Start'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"50"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Alternatively, a default global ",(0,r.jsx)(s.code,{children:"timeout"})," value can be set using the ",(0,r.jsxs)(s.a,{href:"/docs/api/misc/config.html#configure",children:[(0,r.jsx)(s.code,{children:"configure"})," function"]}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"configure"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ asyncUtilTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout });"})]})})})}),"\n",(0,r.jsxs)(s.h3,{id:"waitfor-function",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor-function",children:"#"}),(0,r.jsx)(s.code,{children:"waitFor"})," function"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"waitFor"})," function is another option, serving as a lower-level utility in more advanced cases."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["It accepts an ",(0,r.jsx)(s.code,{children:"expectation"})," to be validated and repeats the check every defined interval until it no longer throws an error. Similarly to ",(0,r.jsx)(s.code,{children:"findBy*"})," queries they accept ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," options and have the same default values of 1000ms for timeout, and a checking interval of 50 ms."]}),"\n",(0,r.jsxs)(s.h4,{id:"example-2",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-2",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockAPI)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledTimes"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["If you want to use it with ",(0,r.jsx)(s.code,{children:"getBy*"})," queries, use the ",(0,r.jsx)(s.code,{children:"findBy*"})," queries instead, as they essentially do the same, but offer better developer experience."]}),"\n",(0,r.jsxs)(s.h3,{id:"waitforelementtoberemoved-function",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitforelementtoberemoved-function",children:"#"}),(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," function"]}),"\n",(0,r.jsxs)(s.p,{children:["A specialized function, ",(0,r.jsx)(s.a,{href:"/docs/api/misc/async.html#waitforelementtoberemoved",children:(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})}),", is used to verify that a matching element was present but has since been removed."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"> {}"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["This function is, in a way, the negation of ",(0,r.jsx)(s.code,{children:"waitFor"})," 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 ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," parameters as ",(0,r.jsx)(s.code,{children:"findBy*"})," queries and ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"example-3",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-3",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})})})}),"\n",(0,r.jsxs)(s.h2,{id:"fake-timers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fake-timers",children:"#"}),"Fake Timers"]}),"\n",(0,r.jsxs)(s.p,{children:["Asynchronous tests can take long to execute due to the delays introduced by asynchronous operations. To mitigate this, fake timers can be used. These are particularly useful when delays are mere waits, such as the 130 milliseconds wait introduced by the UserEvent ",(0,r.jsx)(s.code,{children:"press()"})," event due to React Native runtime behavior or simulated 1000 wait in a API call mock. Fake timers allow for precise fast-forwarding through these wait periods."]}),"\n",(0,r.jsxs)(s.p,{children:["Here are the basics of using ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/timer-mocks",rel:"noopener noreferrer",target:"_blank",children:"Jest fake timers"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Enable fake timers with: ",(0,r.jsx)(s.code,{children:"jest.useFakeTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Disable fake timers with: ",(0,r.jsx)(s.code,{children:"jest.useRealTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Advance fake timers forward with: ",(0,r.jsx)(s.code,{children:"jest.advanceTimersByTime(interval)"})]}),"\n",(0,r.jsxs)(s.li,{children:["Run ",(0,r.jsx)(s.strong,{children:"all timers"})," to completion with: ",(0,r.jsx)(s.code,{children:"jest.runAllTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Run ",(0,r.jsx)(s.strong,{children:"currently pending timers"})," to completion with: ",(0,r.jsx)(s.code,{children:"jest.runOnlyPendingTimers()"})]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Be cautious when running all timers to completion as it might create an infinite loop if these timers schedule follow-up timers. In such cases, it's safer to use ",(0,r.jsx)(s.code,{children:"jest.runOnlyPendingTimers()"})," to avoid ending up in an infinite loop of scheduled tasks."]}),"\n",(0,r.jsxs)(s.p,{children:["You can use both built-in Jest fake timers, as well as ",(0,r.jsx)(s.a,{href:"https://sinonjs.org/releases/latest/fake-timers/",rel:"noopener noreferrer",target:"_blank",children:"Sinon.JS fake timers"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"Note: you do not need to advance timers by hand when using User Event API, as it's automatically."})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["13.x%2Fcookbook%2Fbasics%2Fasync-tests.md"]={toc:[{id:"summary",text:"Summary",depth:2},{id:"example",text:"Example",depth:3},{id:"async-utilities",text:"Async utilities",depth:2},{id:"findby-queries",text:"`findBy*` queries",depth:3},{id:"example-1",text:"Example",depth:4},{id:"waitfor-function",text:"`waitFor` function",depth:3},{id:"example-2",text:"Example",depth:4},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3},{id:"example-3",text:"Example",depth:4},{id:"fake-timers",text:"Fake Timers",depth:2}],title:"Async tests",headingTitle:"Async tests",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/8617.fa2aa60b4d.js b/static/js/async/8617.fa2aa60b4d.js new file mode 100644 index 00000000..9131a1a7 --- /dev/null +++ b/static/js/async/8617.fa2aa60b4d.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8617"],{8672(e,s,n){n.r(s),n.d(s,{default:()=>l});var r=n(4848),i=n(8453);function o(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"async-tests",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-tests",children:"#"}),"Async tests"]}),"\n",(0,r.jsxs)(s.h2,{id:"summary",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,r.jsx)(s.p,{children:"Typically, you would write synchronous tests, as they are simple and get the work done. However, there are cases when using asynchronous (async) tests might be necessary or beneficial. The two most common cases are:"}),"\n",(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Testing Code with asynchronous operations"}),": When your code relies on asynchronous operations, such as network calls or database queries, async tests are essential. Even though you should mock these network calls, the mock should act similarly to the actual behavior and hence by async."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"UserEvent API:"})," Using the ",(0,r.jsx)(s.a,{href:"/docs/api/events/user-event.html",children:"User Event API"})," in your tests creates more realistic event handling. These interactions introduce delays (even though these are typically event-loop ticks with 0 ms delays), requiring async tests to handle the timing correctly."]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:"Using async tests when needed ensures your tests are reliable and simulate real-world conditions accurately."}),"\n",(0,r.jsxs)(s.h3,{id:"example",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,r.jsx)(s.p,{children:"Consider a basic asynchronous test for a user signing in with correct credentials:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"javascript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'User can sign in with correct credentials'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Typical test setup"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" userEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".setup"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"App"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // No need to use async here, components are already rendered"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign in to Hello World App!'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Using await as User Event requires it"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'admin'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Password'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'admin1'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" user"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign In'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }));"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Using await as sign in operation is asynchronous"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Welcome admin!'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Follow-up assertions do not need to be async, as we already waited for sign in operation to complete"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'header'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Sign in to Hello World App'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" )."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Password'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"async-utilities",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-utilities",children:"#"}),"Async utilities"]}),"\n",(0,r.jsx)(s.p,{children:"There are several asynchronous utilities you might use in your tests."}),"\n",(0,r.jsxs)(s.h3,{id:"findby-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#findby-queries",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsxs)(s.p,{children:["The most common are the ",(0,r.jsxs)(s.a,{href:"/docs/api/queries.html#find-by",children:[(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),". These are useful when waiting for a matching element to appear. They can be understood as a ",(0,r.jsxs)(s.a,{href:"/docs/api/queries.html#get-by",children:[(0,r.jsx)(s.code,{children:"getBy*"})," queries"]})," used in conjunction with a ",(0,r.jsxs)(s.a,{href:"/docs/api/misc/async.html#waitfor",children:[(0,r.jsx)(s.code,{children:"waitFor"})," function"]}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["They accept the same predicates as ",(0,r.jsx)(s.code,{children:"getBy*"})," queries like ",(0,r.jsx)(s.code,{children:"findByRole"}),", ",(0,r.jsx)(s.code,{children:"findByTest"}),", etc. They also have a multiple elements variant called ",(0,r.jsx)(s.a,{href:"/docs/api/queries.html#find-all-by",children:(0,r.jsx)(s.code,{children:"findAllBy*"})}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:": ("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" role"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" queryOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Query specific options"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // .."})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Each query has a default ",(0,r.jsx)(s.code,{children:"timeout"})," value of 1000 ms and a default ",(0,r.jsx)(s.code,{children:"interval"})," of 50 ms. Custom timeout and check intervals can be specified if needed, as shown below:"]}),"\n",(0,r.jsxs)(s.h4,{id:"example-1",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-1",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" button"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".findByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Start'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval: "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"50"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Alternatively, a default global ",(0,r.jsx)(s.code,{children:"timeout"})," value can be set using the ",(0,r.jsxs)(s.a,{href:"/docs/api/misc/config.html#configure",children:[(0,r.jsx)(s.code,{children:"configure"})," function"]}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"configure"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ asyncUtilTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout });"})]})})})}),"\n",(0,r.jsxs)(s.h3,{id:"waitfor-function",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor-function",children:"#"}),(0,r.jsx)(s.code,{children:"waitFor"})," function"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"waitFor"})," function is another option, serving as a lower-level utility in more advanced cases."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["It accepts an ",(0,r.jsx)(s.code,{children:"expectation"})," to be validated and repeats the check every defined interval until it no longer throws an error. Similarly to ",(0,r.jsx)(s.code,{children:"findBy*"})," queries they accept ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," options and have the same default values of 1000ms for timeout, and a checking interval of 50 ms."]}),"\n",(0,r.jsxs)(s.h4,{id:"example-2",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-2",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockAPI)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledTimes"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["If you want to use it with ",(0,r.jsx)(s.code,{children:"getBy*"})," queries, use the ",(0,r.jsx)(s.code,{children:"findBy*"})," queries instead, as they essentially do the same, but offer better developer experience."]}),"\n",(0,r.jsxs)(s.h3,{id:"waitforelementtoberemoved-function",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitforelementtoberemoved-function",children:"#"}),(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," function"]}),"\n",(0,r.jsxs)(s.p,{children:["A specialized function, ",(0,r.jsx)(s.a,{href:"/docs/api/misc/async.html#waitforelementtoberemoved",children:(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})}),", is used to verify that a matching element was present but has since been removed."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"> {}"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["This function is, in a way, the negation of ",(0,r.jsx)(s.code,{children:"waitFor"})," 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 ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," parameters as ",(0,r.jsx)(s.code,{children:"findBy*"})," queries and ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"example-3",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-3",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})})})}),"\n",(0,r.jsxs)(s.h2,{id:"fake-timers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fake-timers",children:"#"}),"Fake Timers"]}),"\n",(0,r.jsxs)(s.p,{children:["Asynchronous tests can take long to execute due to the delays introduced by asynchronous operations. To mitigate this, fake timers can be used. These are particularly useful when delays are mere waits, such as the 130 milliseconds wait introduced by the UserEvent ",(0,r.jsx)(s.code,{children:"press()"})," event due to React Native runtime behavior or simulated 1000 wait in a API call mock. Fake timers allow for precise fast-forwarding through these wait periods."]}),"\n",(0,r.jsxs)(s.p,{children:["Here are the basics of using ",(0,r.jsx)(s.a,{href:"https://jestjs.io/docs/timer-mocks",rel:"noopener noreferrer",target:"_blank",children:"Jest fake timers"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Enable fake timers with: ",(0,r.jsx)(s.code,{children:"jest.useFakeTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Disable fake timers with: ",(0,r.jsx)(s.code,{children:"jest.useRealTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Advance fake timers forward with: ",(0,r.jsx)(s.code,{children:"jest.advanceTimersByTime(interval)"})]}),"\n",(0,r.jsxs)(s.li,{children:["Run ",(0,r.jsx)(s.strong,{children:"all timers"})," to completion with: ",(0,r.jsx)(s.code,{children:"jest.runAllTimers()"})]}),"\n",(0,r.jsxs)(s.li,{children:["Run ",(0,r.jsx)(s.strong,{children:"currently pending timers"})," to completion with: ",(0,r.jsx)(s.code,{children:"jest.runOnlyPendingTimers()"})]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Be cautious when running all timers to completion as it might create an infinite loop if these timers schedule follow-up timers. In such cases, it's safer to use ",(0,r.jsx)(s.code,{children:"jest.runOnlyPendingTimers()"})," to avoid ending up in an infinite loop of scheduled tasks."]}),"\n",(0,r.jsxs)(s.p,{children:["You can use both built-in Jest fake timers, as well as ",(0,r.jsx)(s.a,{href:"https://sinonjs.org/releases/latest/fake-timers/",rel:"noopener noreferrer",target:"_blank",children:"Sinon.JS fake timers"}),"."]}),"\n",(0,r.jsx)(s.p,{children:"Note: you do not need to advance timers by hand when using User Event API, as it's automatically."})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["13.x%2Fcookbook%2Fbasics%2Fasync-tests.md"]={toc:[{id:"summary",text:"Summary",depth:2},{id:"example",text:"Example",depth:3},{id:"async-utilities",text:"Async utilities",depth:2},{id:"findby-queries",text:"`findBy*` queries",depth:3},{id:"example-1",text:"Example",depth:4},{id:"waitfor-function",text:"`waitFor` function",depth:3},{id:"example-2",text:"Example",depth:4},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3},{id:"example-3",text:"Example",depth:4},{id:"fake-timers",text:"Fake Timers",depth:2}],title:"Async tests",headingTitle:"Async tests",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/8748.bef8c201cf.js b/static/js/async/8748.309406a692.js similarity index 60% rename from static/js/async/8748.bef8c201cf.js rename to static/js/async/8748.309406a692.js index 10ed3542..98f6f43d 100644 --- a/static/js/async/8748.bef8c201cf.js +++ b/static/js/async/8748.309406a692.js @@ -1 +1 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8748"],{3127(e,s,r){r.r(s),r.d(s,{default:()=>a});var n=r(4848),i=r(8453),o=r(7425);function t(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.h1,{id:"migration-to-9x",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-to-9x",children:"#"}),"Migration to 9.x"]}),"\n",(0,n.jsxs)(s.p,{children:["Version 7.0 brought React Native Testing Library into the ",(0,n.jsx)(s.code,{children:"@testing-library"})," family. Since it has been implemented independently from its web counterpart – the React Testing Library – there are some differences in the API and behavior. Version 9.0 solves several of these problems."]}),"\n",(0,n.jsxs)(s.h2,{id:"support-for-text-match-options-aka-string-precision-api",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#support-for-text-match-options-aka-string-precision-api",children:"#"}),"Support for text match options a.k.a string precision API"]}),"\n",(0,n.jsx)(s.p,{children:"This is a backward compatible change."}),"\n",(0,n.jsxs)(s.p,{children:["When querying text, it is now possible to pass a ",(0,n.jsx)(s.a,{href:"/12.x/docs/api/queries.html#textmatch",children:(0,n.jsx)(s.code,{children:"TextMatch"})})," to most text based queries, which lets you configure how ",(0,n.jsx)(s.code,{children:"@testing-library/react-native"})," should match your text. For instance, passing ",(0,n.jsx)(s.code,{children:"exact: false"})," will allow matching substrings and will ignore case:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,n.jsxs)(s.code,{children:[(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World);"})]}),"\n",(0,n.jsx)(s.span,{className:"line"}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matches"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Doesn't match"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'hello'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ignore case-sensitivity and does partial matching"})]})]})})}),"\n",(0,n.jsxs)(s.p,{children:["Please note that the ",(0,n.jsx)(s.code,{children:"findBy*"})," queries used to take a ",(0,n.jsx)(s.code,{children:"waitForOptions"})," parameter as a second argument, which has now been moved to the third argument:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"diff",children:(0,n.jsxs)(s.code,{children:[(0,n.jsx)(s.span,{className:"line",children:(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-deleted)"},children:"-findByText('Hello world', { timeout: 3000 }); // old findBy* API"})}),"\n",(0,n.jsx)(s.span,{className:"line",children:(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-inserted)"},children:"+findByText('Hello world', {}, { timeout: 3000 }); // new findBy* API"})})]})})}),"\n",(0,n.jsxs)(s.p,{children:["For backward compatibility RNTL v9 can still read ",(0,n.jsx)(s.code,{children:"waitForOptions"})," from the second argument but will print a deprecation warning."]}),"\n",(0,n.jsxs)(s.h2,{id:"reverted-matching-text-across-several-nodes",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#reverted-matching-text-across-several-nodes",children:"#"}),"Reverted matching text across several nodes"]}),"\n",(0,n.jsx)(o.Pq,{type:"caution",title:"Caution",children:(0,n.jsx)(s.p,{children:"\nThis is a breaking change."})}),"\n",(0,n.jsx)(s.p,{children:"In v1.14 we've introduced a feature allowing to match text when it's spread across several nodes:"}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,n.jsxs)(s.code,{children:[(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" Hello <"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">world"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,n.jsx)(s.span,{className:"line",children:(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello world'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// matches"})]})]})})}),"\n",(0,n.jsx)(s.p,{children:"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."}),"\n",(0,n.jsxs)(s.p,{children:["A work around is to use ",(0,n.jsx)(s.code,{children:"within"}),":"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,n.jsxs)(s.code,{children:[(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { Text } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" within } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"})]}),"\n",(0,n.jsx)(s.span,{className:"line"}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello <"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">world)"})]}),"\n",(0,n.jsx)(s.span,{className:"line"}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"within(getByText('Hello', {exact: "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})).getByText('world')"})]})]})})}),"\n",(0,n.jsxs)(s.h2,{id:"future-plans",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#future-plans",children:"#"}),"Future plans"]}),"\n",(0,n.jsx)(s.p,{children:"This release changes a lot of internal logic in the library, paving the way for more improvements to bring us closer to our web counterpart, with a possibly better story for accessibility queries."}),"\n",(0,n.jsxs)(s.p,{children:["We're also ",(0,n.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/issues/877",rel:"noopener noreferrer",target:"_blank",children:"migrating the codebase to TypeScript"}),". Please let us know if you're interested in helping us with this effort."]}),"\n",(0,n.jsx)(s.p,{children:"Stay safe!"})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(t,{...e})}):t(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["12.x%2Fdocs%2Fmigration%2Fprevious%2Fv9.mdx"]={toc:[{id:"support-for-text-match-options-aka-string-precision-api",text:"Support for text match options a.k.a string precision API",depth:2},{id:"reverted-matching-text-across-several-nodes",text:"Reverted matching text across several nodes",depth:2},{id:"future-plans",text:"Future plans",depth:2}],title:"Migration to 9.x",headingTitle:"Migration to 9.x",frontmatter:{}}}}]); \ No newline at end of file +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8748"],{3127(e,s,r){r.r(s),r.d(s,{default:()=>a});var n=r(4848),i=r(8453),o=r(7425);function t(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(s.h1,{id:"migration-to-9x",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-to-9x",children:"#"}),"Migration to 9.x"]}),"\n",(0,n.jsxs)(s.p,{children:["Version 7.0 brought React Native Testing Library into the ",(0,n.jsx)(s.code,{children:"@testing-library"})," family. Since it has been implemented independently from its web counterpart – the React Testing Library – there are some differences in the API and behavior. Version 9.0 solves several of these problems."]}),"\n",(0,n.jsxs)(s.h2,{id:"support-for-text-match-options-aka-string-precision-api",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#support-for-text-match-options-aka-string-precision-api",children:"#"}),"Support for text match options a.k.a string precision API"]}),"\n",(0,n.jsx)(s.p,{children:"This is a backward compatible change."}),"\n",(0,n.jsxs)(s.p,{children:["When querying text, it is now possible to pass a ",(0,n.jsx)(s.a,{href:"/12.x/docs/api/queries.html#textmatch",children:(0,n.jsx)(s.code,{children:"TextMatch"})})," to most text based queries, which lets you configure how ",(0,n.jsx)(s.code,{children:"@testing-library/react-native"})," should match your text. For instance, passing ",(0,n.jsx)(s.code,{children:"exact: false"})," will allow matching substrings and will ignore case:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,n.jsxs)(s.code,{children:[(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World);"})]}),"\n",(0,n.jsx)(s.span,{className:"line"}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matches"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Doesn't match"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'hello'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ignore case-sensitivity and does partial matching"})]})]})})}),"\n",(0,n.jsxs)(s.p,{children:["Please note that the ",(0,n.jsx)(s.code,{children:"findBy*"})," queries used to take a ",(0,n.jsx)(s.code,{children:"waitForOptions"})," parameter as a second argument, which has now been moved to the third argument:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"diff",children:(0,n.jsxs)(s.code,{children:[(0,n.jsx)(s.span,{className:"line",children:(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-deleted)"},children:"-findByText('Hello world', { timeout: 3000 }); // old findBy* API"})}),"\n",(0,n.jsx)(s.span,{className:"line",children:(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-inserted)"},children:"+findByText('Hello world', {}, { timeout: 3000 }); // new findBy* API"})})]})})}),"\n",(0,n.jsxs)(s.p,{children:["For backward compatibility RNTL v9 can still read ",(0,n.jsx)(s.code,{children:"waitForOptions"})," from the second argument but will print a deprecation warning."]}),"\n",(0,n.jsxs)(s.h2,{id:"reverted-matching-text-across-several-nodes",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#reverted-matching-text-across-several-nodes",children:"#"}),"Reverted matching text across several nodes"]}),"\n",(0,n.jsx)(o.Pq,{type:"caution",title:"Caution",children:(0,n.jsx)(s.p,{children:"\nThis is a breaking change."})}),"\n",(0,n.jsx)(s.p,{children:"In v1.14 we've introduced a feature allowing to match text when it's spread across several nodes:"}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,n.jsxs)(s.code,{children:[(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" Hello <"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">world"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(s.span,{className:"line",children:(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello world'"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// matches"})]})]})})}),"\n",(0,n.jsx)(s.p,{children:"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."}),"\n",(0,n.jsxs)(s.p,{children:["A work around is to use ",(0,n.jsx)(s.code,{children:"within"}),":"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,n.jsxs)(s.code,{children:[(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { Text } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"})]}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" within } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"})]}),"\n",(0,n.jsx)(s.span,{className:"line"}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByText"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello <"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">world)"})]}),"\n",(0,n.jsx)(s.span,{className:"line"}),"\n",(0,n.jsxs)(s.span,{className:"line",children:[(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"within(getByText('Hello', {exact: "}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"false"}),(0,n.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})).getByText('world')"})]})]})})}),"\n",(0,n.jsxs)(s.h2,{id:"future-plans",children:[(0,n.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#future-plans",children:"#"}),"Future plans"]}),"\n",(0,n.jsx)(s.p,{children:"This release changes a lot of internal logic in the library, paving the way for more improvements to bring us closer to our web counterpart, with a possibly better story for accessibility queries."}),"\n",(0,n.jsxs)(s.p,{children:["We're also ",(0,n.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/issues/877",rel:"noopener noreferrer",target:"_blank",children:"migrating the codebase to TypeScript"}),". Please let us know if you're interested in helping us with this effort."]}),"\n",(0,n.jsx)(s.p,{children:"Stay safe!"})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,n.jsx)(s,{...e,children:(0,n.jsx)(t,{...e})}):t(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["12.x%2Fdocs%2Fmigration%2Fprevious%2Fv9.mdx"]={toc:[{id:"support-for-text-match-options-aka-string-precision-api",text:"Support for text match options a.k.a string precision API",depth:2},{id:"reverted-matching-text-across-several-nodes",text:"Reverted matching text across several nodes",depth:2},{id:"future-plans",text:"Future plans",depth:2}],title:"Migration to 9.x",headingTitle:"Migration to 9.x",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/8750.3a76bcc032.js b/static/js/async/8750.3a76bcc032.js new file mode 100644 index 00000000..7385eb07 --- /dev/null +++ b/static/js/async/8750.3a76bcc032.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8750"],{9645(s,e,n){n.r(e),n.d(e,{default:()=>l});var r=n(4848),o=n(8453);function i(s){let e={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"custom-render-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function",children:"#"}),"Custom ",(0,r.jsx)(e.code,{children:"render"})," function"]}),"\n",(0,r.jsxs)(e.h3,{id:"summary",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,r.jsxs)(e.p,{children:["RNTL exposes the ",(0,r.jsx)(e.code,{children:"render"})," function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests."]}),"\n",(0,r.jsxs)(e.h3,{id:"example",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.ts",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" User"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" theme"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Theme"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ui"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") {"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"UserProvider.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.user "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ThemeProvider.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.theme "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'light'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>{ui}"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"custom-render/index.test.tsx",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithProviders } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../test-utils'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen with user'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Jar-Jar'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } });"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello Jar-Jar/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen without user'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello stranger/"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Example ",(0,r.jsx)(e.a,{href:"https://github.com/callstack/react-native-testing-library/tree/main/examples/cookbook/custom-render",rel:"noopener noreferrer",target:"_blank",children:"full source code"}),"."]}),"\n",(0,r.jsxs)(e.h3,{id:"more-info",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#more-info",children:"#"}),"More info"]}),"\n",(0,r.jsxs)(e.h4,{id:"additional-params",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#additional-params",children:"#"}),"Additional params"]}),"\n",(0,r.jsx)(e.p,{children:"A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen for logged in user'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { state"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" loggedInState });"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"multiple-functions",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#multiple-functions",children:"#"}),"Multiple functions"]}),"\n",(0,r.jsx)(e.p,{children:"Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.tsx",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderNavigator"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"async-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-function",children:"#"}),"Async function"]}),"\n",(0,r.jsx)(e.p,{children:"Make it async if you want to put some async setup in your custom render function."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithAsync"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(i,{...s})}):i(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["12.x%2Fcookbook%2Fbasics%2Fcustom-render.md"]={toc:[{id:"summary",text:"Summary",depth:3},{id:"example",text:"Example",depth:3},{id:"more-info",text:"More info",depth:3},{id:"additional-params",text:"Additional params",depth:4},{id:"multiple-functions",text:"Multiple functions",depth:4},{id:"async-function",text:"Async function",depth:4}],title:"Custom `render` function",headingTitle:"Custom `render` function",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/8750.f5a8cb4fad.js b/static/js/async/8750.f5a8cb4fad.js deleted file mode 100644 index 91e582f0..00000000 --- a/static/js/async/8750.f5a8cb4fad.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["8750"],{9645(s,e,r){r.r(e),r.d(e,{default:()=>l});var n=r(4848),o=r(8453);function i(s){let e={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h1,{id:"custom-render-function",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function",children:"#"}),"Custom ",(0,n.jsx)(e.code,{children:"render"})," function"]}),"\n",(0,n.jsxs)(e.h3,{id:"summary",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,n.jsxs)(e.p,{children:["RNTL exposes the ",(0,n.jsx)(e.code,{children:"render"})," function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests."]}),"\n",(0,n.jsxs)(e.h3,{id:"example",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.ts",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" User"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" theme"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Theme"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"UserProvider.Provider"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.user "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ThemeProvider.Provider"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.theme "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'light'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>{ui}"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"custom-render/index.test.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { screen } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithProviders } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../test-utils'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen with user'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Jar-Jar'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } });"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello Jar-Jar/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen without user'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello stranger/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["Example ",(0,n.jsx)(e.a,{href:"https://github.com/callstack/react-native-testing-library/tree/main/examples/cookbook/custom-render",rel:"noopener noreferrer",target:"_blank",children:"full source code"}),"."]}),"\n",(0,n.jsxs)(e.h3,{id:"more-info",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#more-info",children:"#"}),"More info"]}),"\n",(0,n.jsxs)(e.h4,{id:"additional-params",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#additional-params",children:"#"}),"Additional params"]}),"\n",(0,n.jsx)(e.p,{children:"A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management."}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen for logged in user'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { state"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" loggedInState });"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.h4,{id:"multiple-functions",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#multiple-functions",children:"#"}),"Multiple functions"]}),"\n",(0,n.jsx)(e.p,{children:"Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens."}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderNavigator"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]})]})})}),"\n",(0,n.jsxs)(e.h4,{id:"async-function",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-function",children:"#"}),"Async function"]}),"\n",(0,n.jsx)(e.p,{children:"Make it async if you want to put some async setup in your custom render function."}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithAsync"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(i,{...s})}):i(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["12.x%2Fcookbook%2Fbasics%2Fcustom-render.md"]={toc:[{id:"summary",text:"Summary",depth:3},{id:"example",text:"Example",depth:3},{id:"more-info",text:"More info",depth:3},{id:"additional-params",text:"Additional params",depth:4},{id:"multiple-functions",text:"Multiple functions",depth:4},{id:"async-function",text:"Async function",depth:4}],title:"Custom `render` function",headingTitle:"Custom `render` function",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/9150.5adb49dcde.js b/static/js/async/9150.5adb49dcde.js deleted file mode 100644 index 72ad80e3..00000000 --- a/static/js/async/9150.5adb49dcde.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["9150"],{8285(e,s,n){n.r(s),n.d(s,{default:()=>a});var r=n(4848),i=n(8453),l=n(7425);function o(e){let s={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#queries",children:"#"}),"Queries"]}),"\n",(0,r.jsx)(s.p,{children:"Queries are one of the main building blocks of React Native Testing Library. They let you find elements in the element tree, which represents your application's user interface when running under tests."}),"\n",(0,r.jsxs)(s.h2,{id:"accessing-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#accessing-queries",children:"#"}),"Accessing queries"]}),"\n",(0,r.jsxs)(s.p,{children:["All queries described below are accessible in two main ways: through the ",(0,r.jsx)(s.code,{children:"screen"})," object or by capturing the result of the ",(0,r.jsx)(s.code,{children:"render"})," function call."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-screen-object",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-screen-object",children:"#"}),"Using ",(0,r.jsx)(s.code,{children:"screen"})," object"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'accessing queries using \"screen\" object'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "Start"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["The recommended way to access queries is to use the ",(0,r.jsx)(s.code,{children:"screen"})," object exported by ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"}),". It contains methods for all available queries bound to the most recently rendered UI."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-render-result",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-render-result",children:"#"}),"Using ",(0,r.jsx)(s.code,{children:"render"})," result"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'accessing queries using \"render\" result'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "Start"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["The classic way is to capture query functions returned from the ",(0,r.jsx)(s.code,{children:"render"})," function call. This provides access to the same functions as the ",(0,r.jsx)(s.code,{children:"screen"})," object."]}),"\n",(0,r.jsxs)(s.h2,{id:"query-parts",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-parts",children:"#"}),"Query parts"]}),"\n",(0,r.jsxs)(s.p,{children:["Each query is composed of two parts: variant and predicate, separated by the word ",(0,r.jsx)(s.code,{children:"by"})," in the middle."]}),"\n",(0,r.jsxs)(s.p,{children:["Consider the query ",(0,r.jsx)(s.code,{children:"getByRole()"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"getBy*"})," is the query variant"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"*ByRole"})," is the predicate"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"query-variant",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-variant",children:"#"}),"Query variant"]}),"\n",(0,r.jsx)(s.p,{children:"The query variants describe the expected number (and timing) of matching elements, so they differ in return type."}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Variant"}),(0,r.jsx)(s.th,{children:"Assertion"}),(0,r.jsx)(s.th,{children:"Return type"}),(0,r.jsx)(s.th,{children:"Is Async?"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/docs/api/queries.html#get-by",children:(0,r.jsx)(s.code,{children:"getBy*"})})}),(0,r.jsx)(s.td,{children:"Exactly one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"ReactTestInstance"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/docs/api/queries.html#get-all-by",children:(0,r.jsx)(s.code,{children:"getAllBy*"})})}),(0,r.jsx)(s.td,{children:"At least one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Array"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/docs/api/queries.html#query-by",children:(0,r.jsx)(s.code,{children:"queryBy*"})})}),(0,r.jsx)(s.td,{children:"Zero or one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)("code",{children:"ReactTestInstance | null"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/docs/api/queries.html#query-all-by",children:(0,r.jsx)(s.code,{children:"queryAllBy*"})})}),(0,r.jsx)(s.td,{children:"No assertion"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Array"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/docs/api/queries.html#find-by",children:(0,r.jsx)(s.code,{children:"findBy*"})})}),(0,r.jsx)(s.td,{children:"Exactly one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Promise"})}),(0,r.jsx)(s.td,{children:"Yes"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/docs/api/queries.html#find-all-by",children:(0,r.jsx)(s.code,{children:"findAllBy*"})})}),(0,r.jsx)(s.td,{children:"At least one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Promise>"})}),(0,r.jsx)(s.td,{children:"Yes"})]})]})]}),"\n",(0,r.jsx)(s.p,{children:"Queries work as implicit assertions on the number of matching elements and throw an error when the assertion fails."}),"\n",(0,r.jsxs)(s.h3,{id:"get-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#get-by",children:"#"}),(0,r.jsx)(s.code,{children:"getBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getBy*"})," queries return the single matching element for a query and throw an error if no elements match or if more than one match is found. If you need to find more than one element, use ",(0,r.jsx)(s.code,{children:"getAllBy"}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"get-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#get-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"getAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance[]"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getAllBy*"})," queries return an array of all matching elements for a query and throw an error if no elements match."]}),"\n",(0,r.jsxs)(s.h3,{id:"query-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-by",children:"#"}),(0,r.jsx)(s.code,{children:"queryBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"queryByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" null"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"queryBy*"})," queries return the first matching node for a query and return ",(0,r.jsx)(s.code,{children:"null"})," if no elements match. This is useful for asserting that an element is not present. This throws if more than one match is found (use ",(0,r.jsx)(s.code,{children:"queryAllBy"})," instead)."]}),"\n",(0,r.jsxs)(s.h3,{id:"query-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"queryAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"queryAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance[]"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"queryAllBy*"})," queries return an array of all matching nodes for a query and return an empty array (",(0,r.jsx)(s.code,{children:"[]"}),") when no elements match."]}),"\n",(0,r.jsxs)(s.h3,{id:"find-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#find-by",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"findBy*"})," queries return a promise that resolves when a matching element is found. The promise is rejected if no elements match or if more than one match is found after a default timeout of 1000 ms. If you need to find more than one element, use ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries."]}),"\n",(0,r.jsxs)(s.h3,{id:"find-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#find-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"findAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"ReactTestInstance[]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"findAllBy*"})," queries return a promise that resolves to an array of matching elements. The promise is rejected if no elements match after a default timeout of 1000 ms."]}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\n",(0,r.jsx)(s.code,{children:"findBy*"})," and ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries accept optional ",(0,r.jsx)(s.code,{children:"waitForOptions"})," object arguments, which can contain ",(0,r.jsx)(s.code,{children:"timeout"}),", ",(0,r.jsx)(s.code,{children:"interval"})," and ",(0,r.jsx)(s.code,{children:"onTimeout"})," properties which have the same meaning as respective options for ",(0,r.jsx)(s.a,{href:"/docs/api/misc/async.html#waitfor",children:(0,r.jsx)(s.code,{children:"waitFor"})})," function."]})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nWhen your ",(0,r.jsx)(s.code,{children:"findBy*"})," and ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries throw because they can't find matching elements, it's helpful to pass ",(0,r.jsx)(s.code,{children:"onTimeout: () => { screen.debug(); }"})," callback using the ",(0,r.jsx)(s.code,{children:"waitForOptions"})," parameter."]})}),"\n",(0,r.jsxs)(s.h2,{id:"query-predicates",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-predicates",children:"#"}),"Query predicates"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsxs)(s.em,{children:["Note: most methods like this one return a ",(0,r.jsx)(s.a,{href:"https://reactjs.org/docs/test-renderer.html#testinstance",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"ReactTestInstance"})})," with the following properties that you may be interested in:"]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { [propName"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" any"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" parent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" children"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Array"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-role",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-role",children:"#"}),(0,r.jsx)(s.code,{children:"*ByRole"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByRole, getAllByRole, queryByRole, queryAllByRole, findByRole, findAllByRole"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" role: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" name?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextMatch"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" selected?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" checked?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'mixed'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" busy?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" expanded?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" min?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" max"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" now"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextMatch;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"role"})," or ",(0,r.jsx)(s.code,{children:"accessibilityRole"})," prop."]}),"\n",(0,r.jsxs)(l.Pq,{type:"info",title:"Info",children:[(0,r.jsxs)(s.p,{children:["\nFor ",(0,r.jsx)(s.code,{children:"*ByRole"})," queries to match an element, it needs to be considered an accessibility element:"]}),(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"Text"}),", ",(0,r.jsx)(s.code,{children:"TextInput"})," and ",(0,r.jsx)(s.code,{children:"Switch"})," host elements are these by default."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"View"})," host elements need an explicit ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessible",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessible"})})," prop set to ",(0,r.jsx)(s.code,{children:"true"})]}),"\n",(0,r.jsxs)(s.li,{children:["Some React Native composite components like ",(0,r.jsx)(s.code,{children:"Pressable"})," & ",(0,r.jsx)(s.code,{children:"TouchableOpacity"})," render host ",(0,r.jsx)(s.code,{children:"View"})," element with ",(0,r.jsx)(s.code,{children:"accessible"})," prop already set."]}),"\n"]})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element3"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"by-role-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-role-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"name"}),": Finds an element with the given ",(0,r.jsx)(s.code,{children:"role"}),"/",(0,r.jsx)(s.code,{children:"accessibilityRole"})," and an accessible name (= accessibility label or text content)."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"disabled"}),": You can filter elements by their disabled state (coming either from ",(0,r.jsx)(s.code,{children:"aria-disabled"})," prop or ",(0,r.jsx)(s.code,{children:"accessibilityState.disabled"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"disabled: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"disabled: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"disabled"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/docs/api/jest-matchers.html#tobeenabled",children:[(0,r.jsx)(s.code,{children:"toBeEnabled()"})," / ",(0,r.jsx)(s.code,{children:"toBeDisabled()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"selected"}),": You can filter elements by their selected state (coming either from ",(0,r.jsx)(s.code,{children:"aria-selected"})," prop or ",(0,r.jsx)(s.code,{children:"accessibilityState.selected"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"selected: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"selected: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"selected"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/docs/api/jest-matchers.html#tobeselected",children:(0,r.jsx)(s.code,{children:"toBeSelected()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"checked"}),": You can filter elements by their checked state (coming either from ",(0,r.jsx)(s.code,{children:"aria-checked"})," prop or ",(0,r.jsx)(s.code,{children:"accessibilityState.checked"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"}),", ",(0,r.jsx)(s.code,{children:"false"}),", or ",(0,r.jsx)(s.code,{children:'"mixed"'}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"checked"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/docs/api/jest-matchers.html#tobechecked",children:[(0,r.jsx)(s.code,{children:"toBeChecked()"})," / ",(0,r.jsx)(s.code,{children:"toBePartiallyChecked()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"busy"}),": You can filter elements by their busy state (coming either from ",(0,r.jsx)(s.code,{children:"aria-busy"})," prop or ",(0,r.jsx)(s.code,{children:"accessibilityState.busy"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"busy: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"busy: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"busy"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/docs/api/jest-matchers.html#tobebusy",children:(0,r.jsx)(s.code,{children:"toBeBusy()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"expanded"}),": You can filter elements by their expanded state (coming either from ",(0,r.jsx)(s.code,{children:"aria-expanded"})," prop or ",(0,r.jsx)(s.code,{children:"accessibilityState.expanded"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"expanded"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/docs/api/jest-matchers.html#tobeexpanded",children:[(0,r.jsx)(s.code,{children:"toBeExpanded()"})," / ",(0,r.jsx)(s.code,{children:"toBeCollapsed()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"value"}),": Filter elements by their accessibility value, based on either ",(0,r.jsx)(s.code,{children:"aria-valuemin"}),", ",(0,r.jsx)(s.code,{children:"aria-valuemax"}),", ",(0,r.jsx)(s.code,{children:"aria-valuenow"}),", ",(0,r.jsx)(s.code,{children:"aria-valuetext"}),", or ",(0,r.jsx)(s.code,{children:"accessibilityValue"})," props. Accessibility value conceptually consists of numeric ",(0,r.jsx)(s.code,{children:"min"}),", ",(0,r.jsx)(s.code,{children:"max"}),", and ",(0,r.jsx)(s.code,{children:"now"})," entries, as well as string ",(0,r.jsx)(s.code,{children:"text"})," entry."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See React Native ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilityvalue",rel:"noopener noreferrer",target:"_blank",children:"accessibilityValue"})," docs to learn more about the accessibility value concept."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/docs/api/jest-matchers.html#tohaveaccessibilityvalue",children:(0,r.jsx)(s.code,{children:"toHaveAccessibilityValue()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.h3,{id:"by-label-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-label-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByLabelText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByLabelText, getAllByLabelText, queryByLabelText, queryAllByLabelText, findByLabelText, findAllByLabelText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching label:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["either by matching ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#aria-label",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"aria-label"})}),"/",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitylabel",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessibilityLabel"})})," prop"]}),"\n",(0,r.jsxs)(s.li,{children:["or by matching the text content of the view referenced by ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#aria-labelledby-android",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"aria-labelledby"})}),"/",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitylabelledby-android",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessibilityLabelledBy"})})," prop"]}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'my-label'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-placeholder-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-placeholder-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByPlaceholderText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByPlaceholderText, getAllByPlaceholderText, queryByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," for a ",(0,r.jsx)(s.code,{children:"TextInput"})," with a matching placeholder—may be a string or regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-display-value",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-display-value",children:"#"}),(0,r.jsx)(s.code,{children:"*ByDisplayValue"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByDisplayValue, getAllByDisplayValue, queryByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByDisplayValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" value: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," for a ",(0,r.jsx)(s.code,{children:"TextInput"})," with a matching display value. The value can be a string or regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByDisplayValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByText, getAllByText, queryByText, queryAllByText, findByText, findAllByText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching text. The text can be a string or regular expression."]}),"\n",(0,r.jsxs)(s.p,{children:["This method joins ",(0,r.jsx)(s.code,{children:""})," siblings to find matches, similarly to ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/text#containers",rel:"noopener noreferrer",target:"_blank",children:"how React Native handles these components"}),". This allows querying for strings that will be visually rendered together but may be semantically separate React components."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'banana'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-hint-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-hint-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByHintText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByA11yHint, getAllByA11yHint, queryByA11yHint, queryAllByA11yHint, findByA11yHint, findAllByA11yHint\ngetByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint, findByAccessibilityHint, findAllByAccessibilityHint\ngetByHintText, getAllByHintText, queryByHintText, queryAllByHintText, findByHintText, findAllByHintText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByHintText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" hint: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"accessibilityHint"})," prop."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByHintText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Plays a song'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nPlease consult ",(0,r.jsxs)(s.a,{href:"https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint",rel:"noopener noreferrer",target:"_blank",children:["Apple guidelines on how ",(0,r.jsx)(s.code,{children:"accessibilityHint"})," should be used"]}),"."]})}),"\n",(0,r.jsxs)(s.h3,{id:"by-test-id",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-test-id",children:"#"}),(0,r.jsx)(s.code,{children:"*ByTestId"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByTestId, getAllByTestId, queryByTestId, queryAllByTestId, findByTestId, findAllByTestId"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByTestId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" testId: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with a matching ",(0,r.jsx)(s.code,{children:"testID"})," prop. ",(0,r.jsx)(s.code,{children:"testID"})," may be a string or a regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'unique-id'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nIn the spirit of ",(0,r.jsx)(s.a,{href:"https://testing-library.com/docs/guiding-principles",rel:"noopener noreferrer",target:"_blank",children:"the guiding principles"}),", use this only after the other queries don't work for your use case. Using ",(0,r.jsx)(s.code,{children:"testID"})," attributes doesn't resemble how your software is used and should be avoided if possible. However, they're particularly useful for end-to-end testing on real devices, e.g. using Detox, and it's an encouraged technique to use there. Learn more from the blog post ",(0,r.jsx)(s.a,{href:"https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change",rel:"noopener noreferrer",target:"_blank",children:'"Making your UI tests resilient to change"'}),"."]})}),"\n",(0,r.jsxs)(s.h3,{id:"common-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#common-options",children:"#"}),"Common options"]}),"\n",(0,r.jsxs)(s.p,{children:["Usually the query's first argument can be a ",(0,r.jsx)(s.strong,{children:"string"})," or a ",(0,r.jsx)(s.strong,{children:"regex"}),". All queries take at least the ",(0,r.jsx)(s.a,{href:"#hidden-option",children:(0,r.jsx)(s.code,{children:"hidden"})})," option as an optional second argument, and some queries accept more options that change string matching behavior. See ",(0,r.jsx)(s.a,{href:"#textmatch",children:"TextMatch"})," for more info."]}),"\n",(0,r.jsxs)(s.h4,{id:"includehiddenelements-option",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#includehiddenelements-option",children:"#"}),(0,r.jsx)(s.code,{children:"includeHiddenElements"})," option"]}),"\n",(0,r.jsxs)(s.p,{children:["All queries have the ",(0,r.jsx)(s.code,{children:"includeHiddenElements"})," option which affects whether ",(0,r.jsx)(s.a,{href:"/docs/api/misc/accessibility.html#ishiddenfromaccessibility",children:"elements hidden from accessibility"})," are matched by the query. By default, queries won't match hidden elements because users of the app wouldn't be able to see such elements."]}),"\n",(0,r.jsxs)(s.p,{children:["You can configure the default value with the ",(0,r.jsxs)(s.a,{href:"/docs/api/misc/config.html#configure",children:[(0,r.jsx)(s.code,{children:"configure"})," function"]}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["This option is also available as ",(0,r.jsx)(s.code,{children:"hidden"})," alias for compatibility with ",(0,r.jsx)(s.a,{href:"https://testing-library.com/docs/queries/byrole#hidden",rel:"noopener noreferrer",target:"_blank",children:"React Testing Library"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Examples"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" style"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{{ display"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'none'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }}>Hidden from accessibility);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Exclude hidden elements"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Include hidden elements"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"textmatch-type",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#textmatch-type",children:"#"}),"TextMatch type"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" RegExp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Most query APIs take a ",(0,r.jsx)(s.code,{children:"TextMatch"})," as an argument, which means the argument can be either a ",(0,r.jsx)(s.em,{children:"string"})," or ",(0,r.jsx)(s.em,{children:"regex"}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"examples",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#examples",children:"#"}),"Examples"]}),"\n",(0,r.jsx)(s.p,{children:"Given the following render:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World);"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Will ",(0,r.jsx)(s.strong,{children:"find a match"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matching a string:"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'llo Worl'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'hello world'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ignore case-sensitivity"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matching a regex:"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/World/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/world/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match, ignore case"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"^"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"hello world"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string match, ignore case-sensitivity"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Hello W"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"oRlD/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// advanced regex"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Will ",(0,r.jsx)(s.strong,{children:"NOT find a match"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring does not match"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'llo Worl'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string does not match"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Goodbye World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// case-sensitive regex with different case"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello world/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"text-match-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#text-match-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.h4,{id:"precision",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#precision",children:"#"}),"Precision"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Queries that take a ",(0,r.jsx)(s.code,{children:"TextMatch"})," also accept an object as the second argument that contains options affecting the precision of string matching:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"exact"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),"; matches full strings, case-sensitive. When false, matches substrings and is not case-sensitive.","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"exact"})," has no effect on regex argument."]}),"\n",(0,r.jsxs)(s.li,{children:["In most cases using a ",(0,r.jsx)(s.code,{children:"regex"})," instead of a string gives you more control over fuzzy matching and should be preferred over ",(0,r.jsx)(s.code,{children:"{ exact: false }"}),"."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"normalizer"}),": An optional function which overrides normalization behavior. See ",(0,r.jsx)(s.a,{href:"#normalization",children:"Normalization"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"exact"})," option defaults to ",(0,r.jsx)(s.code,{children:"true"}),", but if you want to search for a text slice or make text matching case-insensitive, you can override it. That said, we advise you to use regex in more complex scenarios."]}),"\n",(0,r.jsxs)(s.h4,{id:"normalization",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#normalization",children:"#"}),"Normalization"]}),"\n",(0,r.jsx)(s.p,{children:"Before running any matching logic against text, it's automatically normalized. By default, normalization consists of trimming whitespace from the start and end of text and collapsing multiple adjacent whitespace characters into a single space."}),"\n",(0,r.jsxs)(s.p,{children:["If you want to prevent that normalization or provide alternative normalization (e.g., to remove Unicode control characters), you can provide a ",(0,r.jsx)(s.code,{children:"normalizer"})," function in the options object. This function is given a string and is expected to return a normalized version of that string."]}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nSpecifying a value for ",(0,r.jsx)(s.code,{children:"normalizer"})," replaces the built-in normalization, but you can call ",(0,r.jsx)(s.code,{children:"getDefaultNormalizer"})," to obtain a built-in normalizer, either to adjust that normalization or to call it from your own normalizer."]})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getDefaultNormalizer"})," takes an options object that allows selection of behavior:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"trim"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),". Trims leading and trailing whitespace."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"collapseWhitespace"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),". Collapses inner whitespace (newlines, tabs repeated spaces) into a single space."]}),"\n"]}),"\n",(0,r.jsxs)(s.h5,{id:"normalization-examples",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#normalization-examples",children:"#"}),"Normalization Examples"]}),"\n",(0,r.jsx)(s.p,{children:"To perform a match against text without trimming:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(node"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getDefaultNormalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ trim"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"To override normalization to remove some Unicode characters whilst keeping some (but not all) of the built-in normalization behavior:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(node"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (str) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getDefaultNormalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ trim"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })(str)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".replace"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/[\\u200E-\\u200F]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"*"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"g"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ''"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"legacy-unit-testing-helpers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#legacy-unit-testing-helpers",children:"#"}),"Legacy unit testing helpers"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"render"})," from ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"})," exposes additional queries that ",(0,r.jsx)(s.strong,{children:"should not be used in integration or component testing"}),", but some users (like component library creators) interested in unit testing some components may find helpful."]}),"\n",(0,r.jsx)(s.p,{children:"The interface is the same as for other queries, but we won't provide full names so they're harder to find via search engines."}),"\n",(0,r.jsxs)(s.h3,{id:"unsafe_bytype",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unsafe_bytype",children:"#"}),(0,r.jsx)(s.code,{children:"UNSAFE_ByType"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"UNSAFE_getByType, UNSAFE_getAllByType, UNSAFE_queryByType, UNSAFE_queryAllByType"}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with a matching React component type."]}),"\n",(0,r.jsx)(l.Pq,{type:"caution",title:"Caution",children:(0,r.jsx)(s.p,{children:"\nThis query has been marked unsafe because it requires knowledge about implementation details of the component. Use responsibly."})}),"\n",(0,r.jsxs)(s.h3,{id:"unsafe_byprops",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unsafe_byprops",children:"#"}),(0,r.jsx)(s.code,{children:"UNSAFE_ByProps"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"UNSAFE_getByProps, UNSAFE_getAllByProps, UNSAFE_queryByProps, UNSAFE_queryAllByProps"}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching props."]}),"\n",(0,r.jsx)(l.Pq,{type:"caution",title:"Caution",children:(0,r.jsx)(s.p,{children:"\nThis query has been marked unsafe because it requires knowledge about implementation details of the component. Use responsibly."})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fapi%2Fqueries.mdx"]={toc:[{id:"accessing-queries",text:"Accessing queries",depth:2},{id:"using-screen-object",text:"Using `screen` object",depth:3},{id:"using-render-result",text:"Using `render` result",depth:3},{id:"query-parts",text:"Query parts",depth:2},{id:"query-variant",text:"Query variant",depth:2},{id:"get-by",text:"`getBy*` queries",depth:3},{id:"get-all-by",text:"`getAllBy*` queries",depth:3},{id:"query-by",text:"`queryBy*` queries",depth:3},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3},{id:"find-by",text:"`findBy*` queries",depth:3},{id:"find-all-by",text:"`findAllBy*` queries",depth:3},{id:"query-predicates",text:"Query predicates",depth:2},{id:"by-role",text:"`*ByRole`",depth:3},{id:"by-role-options",text:"Options",depth:4},{id:"by-label-text",text:"`*ByLabelText`",depth:3},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3},{id:"by-text",text:"`*ByText`",depth:3},{id:"by-hint-text",text:"`*ByHintText`",depth:3},{id:"by-test-id",text:"`*ByTestId`",depth:3},{id:"common-options",text:"Common options",depth:3},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4},{id:"textmatch-type",text:"TextMatch type",depth:2},{id:"examples",text:"Examples",depth:3},{id:"text-match-options",text:"Options",depth:3},{id:"precision",text:"Precision",depth:4},{id:"normalization",text:"Normalization",depth:4},{id:"legacy-unit-testing-helpers",text:"Legacy unit testing helpers",depth:2},{id:"unsafe_bytype",text:"`UNSAFE_ByType`",depth:3},{id:"unsafe_byprops",text:"`UNSAFE_ByProps`",depth:3}],title:"Queries",headingTitle:"Queries",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/9150.ffe0823137.js b/static/js/async/9150.ffe0823137.js new file mode 100644 index 00000000..9191dc46 --- /dev/null +++ b/static/js/async/9150.ffe0823137.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["9150"],{8285(e,s,n){n.r(s),n.d(s,{default:()=>a});var r=n(4848),i=n(8453),l=n(7425);function o(e){let s={a:"a",blockquote:"blockquote",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#queries",children:"#"}),"Queries"]}),"\n",(0,r.jsx)(s.p,{children:"Queries are one of the main building blocks of React Native Testing Library. They let you find elements in the element tree, which represents your application's user interface when running under tests."}),"\n",(0,r.jsxs)(s.h2,{id:"accessing-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#accessing-queries",children:"#"}),"Accessing queries"]}),"\n",(0,r.jsxs)(s.p,{children:["All queries described below are accessible in two main ways: through the ",(0,r.jsx)(s.code,{children:"screen"})," object or by capturing the result of the ",(0,r.jsx)(s.code,{children:"render"})," function call."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-screen-object",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-screen-object",children:"#"}),"Using ",(0,r.jsx)(s.code,{children:"screen"})," object"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'accessing queries using \"screen\" object'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "Start"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["The recommended way to access queries is to use the ",(0,r.jsx)(s.code,{children:"screen"})," object exported by ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"}),". It contains methods for all available queries bound to the most recently rendered UI."]}),"\n",(0,r.jsxs)(s.h3,{id:"using-render-result",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#using-render-result",children:"#"}),"Using ",(0,r.jsx)(s.code,{children:"render"})," result"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'accessing queries using \"render\" result'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:' "Start"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"})"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["The classic way is to capture query functions returned from the ",(0,r.jsx)(s.code,{children:"render"})," function call. This provides access to the same functions as the ",(0,r.jsx)(s.code,{children:"screen"})," object."]}),"\n",(0,r.jsxs)(s.h2,{id:"query-parts",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-parts",children:"#"}),"Query parts"]}),"\n",(0,r.jsxs)(s.p,{children:["Each query is composed of two parts: variant and predicate, separated by the word ",(0,r.jsx)(s.code,{children:"by"})," in the middle."]}),"\n",(0,r.jsxs)(s.p,{children:["Consider the query ",(0,r.jsx)(s.code,{children:"getByRole()"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"getBy*"})," is the query variant"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"*ByRole"})," is the predicate"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"query-variant",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-variant",children:"#"}),"Query variant"]}),"\n",(0,r.jsx)(s.p,{children:"The query variants describe the expected number (and timing) of matching elements, so they differ in return type."}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Variant"}),(0,r.jsx)(s.th,{children:"Assertion"}),(0,r.jsx)(s.th,{children:"Return type"}),(0,r.jsx)(s.th,{children:"Is Async?"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/docs/api/queries.html#get-by",children:(0,r.jsx)(s.code,{children:"getBy*"})})}),(0,r.jsx)(s.td,{children:"Exactly one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"ReactTestInstance"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/docs/api/queries.html#get-all-by",children:(0,r.jsx)(s.code,{children:"getAllBy*"})})}),(0,r.jsx)(s.td,{children:"At least one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Array"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/docs/api/queries.html#query-by",children:(0,r.jsx)(s.code,{children:"queryBy*"})})}),(0,r.jsx)(s.td,{children:"Zero or one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)("code",{children:"ReactTestInstance | null"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/docs/api/queries.html#query-all-by",children:(0,r.jsx)(s.code,{children:"queryAllBy*"})})}),(0,r.jsx)(s.td,{children:"No assertion"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Array"})}),(0,r.jsx)(s.td,{children:"No"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/docs/api/queries.html#find-by",children:(0,r.jsx)(s.code,{children:"findBy*"})})}),(0,r.jsx)(s.td,{children:"Exactly one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Promise"})}),(0,r.jsx)(s.td,{children:"Yes"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.a,{href:"/docs/api/queries.html#find-all-by",children:(0,r.jsx)(s.code,{children:"findAllBy*"})})}),(0,r.jsx)(s.td,{children:"At least one matching element"}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"Promise>"})}),(0,r.jsx)(s.td,{children:"Yes"})]})]})]}),"\n",(0,r.jsx)(s.p,{children:"Queries work as implicit assertions on the number of matching elements and throw an error when the assertion fails."}),"\n",(0,r.jsxs)(s.h3,{id:"get-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#get-by",children:"#"}),(0,r.jsx)(s.code,{children:"getBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getBy*"})," queries return the single matching element for a query and throw an error if no elements match or if more than one match is found. If you need to find more than one element, use ",(0,r.jsx)(s.code,{children:"getAllBy"}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"get-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#get-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"getAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance[]"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getAllBy*"})," queries return an array of all matching elements for a query and throw an error if no elements match."]}),"\n",(0,r.jsxs)(s.h3,{id:"query-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-by",children:"#"}),(0,r.jsx)(s.code,{children:"queryBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"queryByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" null"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"queryBy*"})," queries return the first matching node for a query and return ",(0,r.jsx)(s.code,{children:"null"})," if no elements match. This is useful for asserting that an element is not present. This throws if more than one match is found (use ",(0,r.jsx)(s.code,{children:"queryAllBy"})," instead)."]}),"\n",(0,r.jsxs)(s.h3,{id:"query-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"queryAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"queryAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance[]"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"queryAllBy*"})," queries return an array of all matching nodes for a query and return an empty array (",(0,r.jsx)(s.code,{children:"[]"}),") when no elements match."]}),"\n",(0,r.jsxs)(s.h3,{id:"find-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#find-by",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"findBy*"})," queries return a promise that resolves when a matching element is found. The promise is rejected if no elements match or if more than one match is found after a default timeout of 1000 ms. If you need to find more than one element, use ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries."]}),"\n",(0,r.jsxs)(s.h3,{id:"find-all-by",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#find-all-by",children:"#"}),(0,r.jsx)(s.code,{children:"findAllBy*"})," queries"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"findAllByX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"ReactTestInstance[]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"findAllBy*"})," queries return a promise that resolves to an array of matching elements. The promise is rejected if no elements match after a default timeout of 1000 ms."]}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\n",(0,r.jsx)(s.code,{children:"findBy*"})," and ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries accept optional ",(0,r.jsx)(s.code,{children:"waitForOptions"})," object arguments, which can contain ",(0,r.jsx)(s.code,{children:"timeout"}),", ",(0,r.jsx)(s.code,{children:"interval"})," and ",(0,r.jsx)(s.code,{children:"onTimeout"})," properties which have the same meaning as respective options for ",(0,r.jsx)(s.a,{href:"/docs/api/misc/async.html#waitfor",children:(0,r.jsx)(s.code,{children:"waitFor"})})," function."]})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nWhen your ",(0,r.jsx)(s.code,{children:"findBy*"})," and ",(0,r.jsx)(s.code,{children:"findAllBy*"})," queries throw because they can't find matching elements, it's helpful to pass ",(0,r.jsx)(s.code,{children:"onTimeout: () => { screen.debug(); }"})," callback using the ",(0,r.jsx)(s.code,{children:"waitForOptions"})," parameter."]})}),"\n",(0,r.jsxs)(s.h2,{id:"query-predicates",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-predicates",children:"#"}),"Query predicates"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsxs)(s.em,{children:["Note: most methods like this one return a ",(0,r.jsx)(s.a,{href:"https://reactjs.org/docs/test-renderer.html#testinstance",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"ReactTestInstance"})})," with the following properties that you may be interested in:"]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" props"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { [propName"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" any"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" parent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" children"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Array"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"ReactTestInstance"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-role",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-role",children:"#"}),(0,r.jsx)(s.code,{children:"*ByRole"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByRole, getAllByRole, queryByRole, queryAllByRole, findByRole, findAllByRole"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" role: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" name?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextMatch"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" selected?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" checked?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"|"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'mixed'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" busy?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" expanded?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" value"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" min?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" max"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" now"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" number;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextMatch;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"role"})," or ",(0,r.jsx)(s.code,{children:"accessibilityRole"})," prop."]}),"\n",(0,r.jsxs)(l.Pq,{type:"info",title:"Info",children:[(0,r.jsxs)(s.p,{children:["\nFor ",(0,r.jsx)(s.code,{children:"*ByRole"})," queries to match an element, it needs to be considered an accessibility element:"]}),(0,r.jsxs)(s.ol,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"Text"}),", ",(0,r.jsx)(s.code,{children:"TextInput"})," and ",(0,r.jsx)(s.code,{children:"Switch"})," host elements are these by default."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"View"})," host elements need an explicit ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessible",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessible"})})," prop set to ",(0,r.jsx)(s.code,{children:"true"})]}),"\n",(0,r.jsxs)(s.li,{children:["Some React Native composite components like ",(0,r.jsx)(s.code,{children:"Pressable"})," & ",(0,r.jsx)(s.code,{children:"TouchableOpacity"})," render host ",(0,r.jsx)(s.code,{children:"View"})," element with ",(0,r.jsx)(s.code,{children:"accessible"})," prop already set."]}),"\n"]})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Pressable"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" accessibilityRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"button"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element3"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" disabled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"by-role-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-role-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"name"}),": Finds an element with the given ",(0,r.jsx)(s.code,{children:"role"}),"/",(0,r.jsx)(s.code,{children:"accessibilityRole"})," and an accessible name (= accessibility label or text content)."]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"disabled"}),": You can filter elements by their disabled state (coming either from ",(0,r.jsx)(s.code,{children:"aria-disabled"})," prop or ",(0,r.jsx)(s.code,{children:"accessibilityState.disabled"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"disabled: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"disabled: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"disabled"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/docs/api/jest-matchers.html#tobeenabled",children:[(0,r.jsx)(s.code,{children:"toBeEnabled()"})," / ",(0,r.jsx)(s.code,{children:"toBeDisabled()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"selected"}),": You can filter elements by their selected state (coming either from ",(0,r.jsx)(s.code,{children:"aria-selected"})," prop or ",(0,r.jsx)(s.code,{children:"accessibilityState.selected"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"selected: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"selected: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"selected"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/docs/api/jest-matchers.html#tobeselected",children:(0,r.jsx)(s.code,{children:"toBeSelected()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"checked"}),": You can filter elements by their checked state (coming either from ",(0,r.jsx)(s.code,{children:"aria-checked"})," prop or ",(0,r.jsx)(s.code,{children:"accessibilityState.checked"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"}),", ",(0,r.jsx)(s.code,{children:"false"}),", or ",(0,r.jsx)(s.code,{children:'"mixed"'}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"checked"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/docs/api/jest-matchers.html#tobechecked",children:[(0,r.jsx)(s.code,{children:"toBeChecked()"})," / ",(0,r.jsx)(s.code,{children:"toBePartiallyChecked()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"busy"}),": You can filter elements by their busy state (coming either from ",(0,r.jsx)(s.code,{children:"aria-busy"})," prop or ",(0,r.jsx)(s.code,{children:"accessibilityState.busy"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),". Querying ",(0,r.jsx)(s.code,{children:"busy: false"})," will also match elements with ",(0,r.jsx)(s.code,{children:"busy: undefined"})," (see the ",(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State",rel:"noopener noreferrer",target:"_blank",children:"wiki"})," for more details)."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"busy"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/docs/api/jest-matchers.html#tobebusy",children:(0,r.jsx)(s.code,{children:"toBeBusy()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"expanded"}),": You can filter elements by their expanded state (coming either from ",(0,r.jsx)(s.code,{children:"aria-expanded"})," prop or ",(0,r.jsx)(s.code,{children:"accessibilityState.expanded"})," prop). The possible values are ",(0,r.jsx)(s.code,{children:"true"})," or ",(0,r.jsx)(s.code,{children:"false"}),"."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitystate",rel:"noopener noreferrer",target:"_blank",children:"React Native's accessibilityState"})," docs to learn more about the ",(0,r.jsx)(s.code,{children:"expanded"})," state."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsxs)(s.a,{href:"/docs/api/jest-matchers.html#tobeexpanded",children:[(0,r.jsx)(s.code,{children:"toBeExpanded()"})," / ",(0,r.jsx)(s.code,{children:"toBeCollapsed()"})]})," Jest matchers."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:["\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"value"}),": Filter elements by their accessibility value, based on either ",(0,r.jsx)(s.code,{children:"aria-valuemin"}),", ",(0,r.jsx)(s.code,{children:"aria-valuemax"}),", ",(0,r.jsx)(s.code,{children:"aria-valuenow"}),", ",(0,r.jsx)(s.code,{children:"aria-valuetext"}),", or ",(0,r.jsx)(s.code,{children:"accessibilityValue"})," props. Accessibility value conceptually consists of numeric ",(0,r.jsx)(s.code,{children:"min"}),", ",(0,r.jsx)(s.code,{children:"max"}),", and ",(0,r.jsx)(s.code,{children:"now"})," entries, as well as string ",(0,r.jsx)(s.code,{children:"text"})," entry."]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["See React Native ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilityvalue",rel:"noopener noreferrer",target:"_blank",children:"accessibilityValue"})," docs to learn more about the accessibility value concept."]}),"\n",(0,r.jsxs)(s.li,{children:["This option can alternatively be expressed using the ",(0,r.jsx)(s.a,{href:"/docs/api/jest-matchers.html#tohaveaccessibilityvalue",children:(0,r.jsx)(s.code,{children:"toHaveAccessibilityValue()"})})," Jest matcher."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.h3,{id:"by-label-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-label-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByLabelText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByLabelText, getAllByLabelText, queryByLabelText, queryAllByLabelText, findByLabelText, findAllByLabelText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching label:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["either by matching ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#aria-label",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"aria-label"})}),"/",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitylabel",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessibilityLabel"})})," prop"]}),"\n",(0,r.jsxs)(s.li,{children:["or by matching the text content of the view referenced by ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#aria-labelledby-android",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"aria-labelledby"})}),"/",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/accessibility#accessibilitylabelledby-android",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"accessibilityLabelledBy"})})," prop"]}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByLabelText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'my-label'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-placeholder-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-placeholder-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByPlaceholderText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByPlaceholderText, getAllByPlaceholderText, queryByPlaceholderText, queryAllByPlaceholderText, findByPlaceholderText, findAllByPlaceholderText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," for a ",(0,r.jsx)(s.code,{children:"TextInput"})," with a matching placeholder—may be a string or regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-display-value",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-display-value",children:"#"}),(0,r.jsx)(s.code,{children:"*ByDisplayValue"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByDisplayValue, getAllByDisplayValue, queryByDisplayValue, queryAllByDisplayValue, findByDisplayValue, findAllByDisplayValue"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByDisplayValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" value: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," for a ",(0,r.jsx)(s.code,{children:"TextInput"})," with a matching display value. The value can be a string or regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByDisplayValue"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'username'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByText, getAllByText, queryByText, queryAllByText, findByText, findAllByText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" text: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching text. The text can be a string or regular expression."]}),"\n",(0,r.jsxs)(s.p,{children:["This method joins ",(0,r.jsx)(s.code,{children:""})," siblings to find matches, similarly to ",(0,r.jsx)(s.a,{href:"https://reactnative.dev/docs/text#containers",rel:"noopener noreferrer",target:"_blank",children:"how React Native handles these components"}),". This allows querying for strings that will be visually rendered together but may be semantically separate React components."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'banana'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"by-hint-text",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-hint-text",children:"#"}),(0,r.jsx)(s.code,{children:"*ByHintText"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByA11yHint, getAllByA11yHint, queryByA11yHint, queryAllByA11yHint, findByA11yHint, findAllByA11yHint\ngetByAccessibilityHint, getAllByAccessibilityHint, queryByAccessibilityHint, queryAllByAccessibilityHint, findByAccessibilityHint, findAllByAccessibilityHint\ngetByHintText, getAllByHintText, queryByHintText, queryAllByHintText, findByHintText, findAllByHintText"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByHintText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" hint: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching ",(0,r.jsx)(s.code,{children:"accessibilityHint"})," prop."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByHintText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Plays a song'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nPlease consult ",(0,r.jsxs)(s.a,{href:"https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint",rel:"noopener noreferrer",target:"_blank",children:["Apple guidelines on how ",(0,r.jsx)(s.code,{children:"accessibilityHint"})," should be used"]}),"."]})}),"\n",(0,r.jsxs)(s.h3,{id:"by-test-id",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#by-test-id",children:"#"}),(0,r.jsx)(s.code,{children:"*ByTestId"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"getByTestId, getAllByTestId, queryByTestId, queryAllByTestId, findByTestId, findAllByTestId"}),"\n"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"getByTestId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" testId: TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" string;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" boolean;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"): ReactTestInstance;"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with a matching ",(0,r.jsx)(s.code,{children:"testID"})," prop. ",(0,r.jsx)(s.code,{children:"testID"})," may be a string or a regular expression."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByTestId"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'unique-id'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nIn the spirit of ",(0,r.jsx)(s.a,{href:"https://testing-library.com/docs/guiding-principles",rel:"noopener noreferrer",target:"_blank",children:"the guiding principles"}),", use this only after the other queries don't work for your use case. Using ",(0,r.jsx)(s.code,{children:"testID"})," attributes doesn't resemble how your software is used and should be avoided if possible. However, they're particularly useful for end-to-end testing on real devices, e.g. using Detox, and it's an encouraged technique to use there. Learn more from the blog post ",(0,r.jsx)(s.a,{href:"https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change",rel:"noopener noreferrer",target:"_blank",children:'"Making your UI tests resilient to change"'}),"."]})}),"\n",(0,r.jsxs)(s.h3,{id:"common-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#common-options",children:"#"}),"Common options"]}),"\n",(0,r.jsxs)(s.p,{children:["Usually the query's first argument can be a ",(0,r.jsx)(s.strong,{children:"string"})," or a ",(0,r.jsx)(s.strong,{children:"regex"}),". All queries take at least the ",(0,r.jsx)(s.a,{href:"#hidden-option",children:(0,r.jsx)(s.code,{children:"hidden"})})," option as an optional second argument, and some queries accept more options that change string matching behavior. See ",(0,r.jsx)(s.a,{href:"#textmatch",children:"TextMatch"})," for more info."]}),"\n",(0,r.jsxs)(s.h4,{id:"includehiddenelements-option",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#includehiddenelements-option",children:"#"}),(0,r.jsx)(s.code,{children:"includeHiddenElements"})," option"]}),"\n",(0,r.jsxs)(s.p,{children:["All queries have the ",(0,r.jsx)(s.code,{children:"includeHiddenElements"})," option which affects whether ",(0,r.jsx)(s.a,{href:"/docs/api/misc/accessibility.html#ishiddenfromaccessibility",children:"elements hidden from accessibility"})," are matched by the query. By default, queries won't match hidden elements because users of the app wouldn't be able to see such elements."]}),"\n",(0,r.jsxs)(s.p,{children:["You can configure the default value with the ",(0,r.jsxs)(s.a,{href:"/docs/api/misc/config.html#configure",children:[(0,r.jsx)(s.code,{children:"configure"})," function"]}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["This option is also available as ",(0,r.jsx)(s.code,{children:"hidden"})," alias for compatibility with ",(0,r.jsx)(s.a,{href:"https://testing-library.com/docs/queries/byrole#hidden",rel:"noopener noreferrer",target:"_blank",children:"React Testing Library"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Examples"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" style"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{{ display"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'none'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }}>Hidden from accessibility);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Exclude hidden elements"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".queryByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"not"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Include hidden elements"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hidden from accessibility'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" includeHiddenElements"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"textmatch-type",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#textmatch-type",children:"#"}),"TextMatch type"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" RegExp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Most query APIs take a ",(0,r.jsx)(s.code,{children:"TextMatch"})," as an argument, which means the argument can be either a ",(0,r.jsx)(s.em,{children:"string"})," or ",(0,r.jsx)(s.em,{children:"regex"}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"examples",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#examples",children:"#"}),"Examples"]}),"\n",(0,r.jsx)(s.p,{children:"Given the following render:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Hello World);"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:["Will ",(0,r.jsx)(s.strong,{children:"find a match"}),":"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matching a string:"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'llo Worl'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'hello world'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ignore case-sensitivity"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Matching a regex:"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/World/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/world/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring match, ignore case"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"^"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"hello world"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"$"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string match, ignore case-sensitivity"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/Hello W"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"oRlD/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// advanced regex"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Will ",(0,r.jsx)(s.strong,{children:"NOT find a match"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"js",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// substring does not match"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'llo Worl'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// full string does not match"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Goodbye World'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// case-sensitive regex with different case"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello world/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"text-match-options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#text-match-options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.h4,{id:"precision",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#precision",children:"#"}),"Precision"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" TextMatchOptions"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" exact"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" boolean"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Queries that take a ",(0,r.jsx)(s.code,{children:"TextMatch"})," also accept an object as the second argument that contains options affecting the precision of string matching:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"exact"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),"; matches full strings, case-sensitive. When false, matches substrings and is not case-sensitive.","\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"exact"})," has no effect on regex argument."]}),"\n",(0,r.jsxs)(s.li,{children:["In most cases using a ",(0,r.jsx)(s.code,{children:"regex"})," instead of a string gives you more control over fuzzy matching and should be preferred over ",(0,r.jsx)(s.code,{children:"{ exact: false }"}),"."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"normalizer"}),": An optional function which overrides normalization behavior. See ",(0,r.jsx)(s.a,{href:"#normalization",children:"Normalization"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"exact"})," option defaults to ",(0,r.jsx)(s.code,{children:"true"}),", but if you want to search for a text slice or make text matching case-insensitive, you can override it. That said, we advise you to use regex in more complex scenarios."]}),"\n",(0,r.jsxs)(s.h4,{id:"normalization",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#normalization",children:"#"}),"Normalization"]}),"\n",(0,r.jsx)(s.p,{children:"Before running any matching logic against text, it's automatically normalized. By default, normalization consists of trimming whitespace from the start and end of text and collapsing multiple adjacent whitespace characters into a single space."}),"\n",(0,r.jsxs)(s.p,{children:["If you want to prevent that normalization or provide alternative normalization (e.g., to remove Unicode control characters), you can provide a ",(0,r.jsx)(s.code,{children:"normalizer"})," function in the options object. This function is given a string and is expected to return a normalized version of that string."]}),"\n",(0,r.jsx)(l.Pq,{type:"info",title:"Info",children:(0,r.jsxs)(s.p,{children:["\nSpecifying a value for ",(0,r.jsx)(s.code,{children:"normalizer"})," replaces the built-in normalization, but you can call ",(0,r.jsx)(s.code,{children:"getDefaultNormalizer"})," to obtain a built-in normalizer, either to adjust that normalization or to call it from your own normalizer."]})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"getDefaultNormalizer"})," takes an options object that allows selection of behavior:"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"trim"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),". Trims leading and trailing whitespace."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"collapseWhitespace"}),": Defaults to ",(0,r.jsx)(s.code,{children:"true"}),". Collapses inner whitespace (newlines, tabs repeated spaces) into a single space."]}),"\n"]}),"\n",(0,r.jsxs)(s.h5,{id:"normalization-examples",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#normalization-examples",children:"#"}),"Normalization Examples"]}),"\n",(0,r.jsx)(s.p,{children:"To perform a match against text without trimming:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(node"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getDefaultNormalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ trim"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"To override normalization to remove some Unicode characters whilst keeping some (but not all) of the built-in normalization behavior:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"typescript",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(node"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" normalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (str) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getDefaultNormalizer"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ trim"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })(str)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".replace"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/[\\u200E-\\u200F]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"*"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"g"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" ''"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.h2,{id:"legacy-unit-testing-helpers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#legacy-unit-testing-helpers",children:"#"}),"Legacy unit testing helpers"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"render"})," from ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"})," exposes additional queries that ",(0,r.jsx)(s.strong,{children:"should not be used in integration or component testing"}),", but some users (like component library creators) interested in unit testing some components may find helpful."]}),"\n",(0,r.jsx)(s.p,{children:"The interface is the same as for other queries, but we won't provide full names so they're harder to find via search engines."}),"\n",(0,r.jsxs)(s.h3,{id:"unsafe_bytype",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unsafe_bytype",children:"#"}),(0,r.jsx)(s.code,{children:"UNSAFE_ByType"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"UNSAFE_getByType, UNSAFE_getAllByType, UNSAFE_queryByType, UNSAFE_queryAllByType"}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with a matching React component type."]}),"\n",(0,r.jsx)(l.Pq,{type:"caution",title:"Caution",children:(0,r.jsx)(s.p,{children:"\nThis query has been marked unsafe because it requires knowledge about implementation details of the component. Use responsibly."})}),"\n",(0,r.jsxs)(s.h3,{id:"unsafe_byprops",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unsafe_byprops",children:"#"}),(0,r.jsx)(s.code,{children:"UNSAFE_ByProps"})]}),"\n",(0,r.jsxs)(s.blockquote,{children:["\n",(0,r.jsx)(s.p,{children:"UNSAFE_getByProps, UNSAFE_getAllByProps, UNSAFE_queryByProps, UNSAFE_queryAllByProps"}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["Returns a ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})," with matching props."]}),"\n",(0,r.jsx)(l.Pq,{type:"caution",title:"Caution",children:(0,r.jsx)(s.p,{children:"\nThis query has been marked unsafe because it requires knowledge about implementation details of the component. Use responsibly."})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["13.x%2Fdocs%2Fapi%2Fqueries.mdx"]={toc:[{id:"accessing-queries",text:"Accessing queries",depth:2},{id:"using-screen-object",text:"Using `screen` object",depth:3},{id:"using-render-result",text:"Using `render` result",depth:3},{id:"query-parts",text:"Query parts",depth:2},{id:"query-variant",text:"Query variant",depth:2},{id:"get-by",text:"`getBy*` queries",depth:3},{id:"get-all-by",text:"`getAllBy*` queries",depth:3},{id:"query-by",text:"`queryBy*` queries",depth:3},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3},{id:"find-by",text:"`findBy*` queries",depth:3},{id:"find-all-by",text:"`findAllBy*` queries",depth:3},{id:"query-predicates",text:"Query predicates",depth:2},{id:"by-role",text:"`*ByRole`",depth:3},{id:"by-role-options",text:"Options",depth:4},{id:"by-label-text",text:"`*ByLabelText`",depth:3},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3},{id:"by-text",text:"`*ByText`",depth:3},{id:"by-hint-text",text:"`*ByHintText`",depth:3},{id:"by-test-id",text:"`*ByTestId`",depth:3},{id:"common-options",text:"Common options",depth:3},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4},{id:"textmatch-type",text:"TextMatch type",depth:2},{id:"examples",text:"Examples",depth:3},{id:"text-match-options",text:"Options",depth:3},{id:"precision",text:"Precision",depth:4},{id:"normalization",text:"Normalization",depth:4},{id:"legacy-unit-testing-helpers",text:"Legacy unit testing helpers",depth:2},{id:"unsafe_bytype",text:"`UNSAFE_ByType`",depth:3},{id:"unsafe_byprops",text:"`UNSAFE_ByProps`",depth:3}],title:"Queries",headingTitle:"Queries",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/92.5cb099690f.js b/static/js/async/92.5cb099690f.js new file mode 100644 index 00000000..8e715ccf --- /dev/null +++ b/static/js/async/92.5cb099690f.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["92"],{6087(s,e,r){r.r(e),r.d(e,{default:()=>l});var n=r(4848),o=r(8453);function i(s){let e={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h1,{id:"custom-render-function",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function",children:"#"}),"Custom ",(0,n.jsx)(e.code,{children:"render"})," function"]}),"\n",(0,n.jsxs)(e.h3,{id:"summary",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,n.jsxs)(e.p,{children:["RNTL exposes the ",(0,n.jsx)(e.code,{children:"render"})," function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests."]}),"\n",(0,n.jsxs)(e.h3,{id:"example",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.ts",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" User"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" theme"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Theme"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"UserProvider.Provider"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.user "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ThemeProvider.Provider"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.theme "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'light'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>{ui}"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"custom-render/index.test.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { screen } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithProviders } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../test-utils'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen with user'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Jar-Jar'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } });"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello Jar-Jar/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen without user'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello stranger/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["Example ",(0,n.jsx)(e.a,{href:"https://github.com/callstack/react-native-testing-library/tree/main/examples/cookbook/custom-render",rel:"noopener noreferrer",target:"_blank",children:"full source code"}),"."]}),"\n",(0,n.jsxs)(e.h3,{id:"more-info",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#more-info",children:"#"}),"More info"]}),"\n",(0,n.jsxs)(e.h4,{id:"additional-params",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#additional-params",children:"#"}),"Additional params"]}),"\n",(0,n.jsx)(e.p,{children:"A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management."}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen for logged in user'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { state"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" loggedInState });"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.h4,{id:"multiple-functions",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#multiple-functions",children:"#"}),"Multiple functions"]}),"\n",(0,n.jsx)(e.p,{children:"Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens."}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderNavigator"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]})]})})}),"\n",(0,n.jsxs)(e.h4,{id:"async-setup",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-setup",children:"#"}),"Async setup"]}),"\n",(0,n.jsxs)(e.p,{children:["Since ",(0,n.jsx)(e.code,{children:"render"})," is async, your custom render function should be marked as ",(0,n.jsx)(e.code,{children:"async"})," and use ",(0,n.jsx)(e.code,{children:"await render()"}),". This pattern also makes it easy to add additional async setup if needed:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithData"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">(ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">) {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" data"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fetchTestData"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"DataProvider"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{data}>{ui});"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithData"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(i,{...s})}):i(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["14.x%2Fcookbook%2Fbasics%2Fcustom-render.md"]={toc:[{id:"summary",text:"Summary",depth:3},{id:"example",text:"Example",depth:3},{id:"more-info",text:"More info",depth:3},{id:"additional-params",text:"Additional params",depth:4},{id:"multiple-functions",text:"Multiple functions",depth:4},{id:"async-setup",text:"Async setup",depth:4}],title:"Custom `render` function",headingTitle:"Custom `render` function",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/92.e67edfef80.js b/static/js/async/92.e67edfef80.js deleted file mode 100644 index 81f60f37..00000000 --- a/static/js/async/92.e67edfef80.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["92"],{6087(s,e,r){r.r(e),r.d(e,{default:()=>l});var n=r(4848),o=r(8453);function i(s){let e={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h1,{id:"custom-render-function",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-function",children:"#"}),"Custom ",(0,n.jsx)(e.code,{children:"render"})," function"]}),"\n",(0,n.jsxs)(e.h3,{id:"summary",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#summary",children:"#"}),"Summary"]}),"\n",(0,n.jsxs)(e.p,{children:["RNTL exposes the ",(0,n.jsx)(e.code,{children:"render"})," function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests."]}),"\n",(0,n.jsxs)(e.h3,{id:"example",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.ts",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" User"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" theme"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Theme"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderWithProvidersProps"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") {"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"UserProvider.Provider"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.user "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"ThemeProvider.Provider"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"?.theme "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"??"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'light'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}>{ui}"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"custom-render/index.test.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { screen } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderWithProviders } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../test-utils'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// ..."})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen with user'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Jar-Jar'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } });"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello Jar-Jar/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders WelcomeScreen without user'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithProviders"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"WelcomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { user"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"/hello stranger/"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"i"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["Example ",(0,n.jsx)(e.a,{href:"https://github.com/callstack/react-native-testing-library/tree/main/examples/cookbook/custom-render",rel:"noopener noreferrer",target:"_blank",children:"full source code"}),"."]}),"\n",(0,n.jsxs)(e.h3,{id:"more-info",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#more-info",children:"#"}),"More info"]}),"\n",(0,n.jsxs)(e.h4,{id:"additional-params",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#additional-params",children:"#"}),"Additional params"]}),"\n",(0,n.jsx)(e.p,{children:"A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management."}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen for logged in user'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { state"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" loggedInState });"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.h4,{id:"multiple-functions",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#multiple-functions",children:"#"}),"Multiple functions"]}),"\n",(0,n.jsx)(e.p,{children:"Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens."}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"test-utils.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderNavigator"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options);"})]})]})})}),"\n",(0,n.jsxs)(e.h4,{id:"async-setup",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-setup",children:"#"}),"Async setup"]}),"\n",(0,n.jsxs)(e.p,{children:["Since ",(0,n.jsx)(e.code,{children:"render"})," is async, your custom render function should be marked as ",(0,n.jsx)(e.code,{children:"async"})," and use ",(0,n.jsx)(e.code,{children:"await render()"}),". This pattern also makes it easy to add additional async setup if needed:"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:"SomeScreen.test.tsx",lang:"tsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithData"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">(ui"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"ReactElement"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">) {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" data"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" fetchTestData"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"DataProvider"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{data}>{ui});"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'renders SomeScreen'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderWithData"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"SomeScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(i,{...s})}):i(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["14.x%2Fcookbook%2Fbasics%2Fcustom-render.md"]={toc:[{id:"summary",text:"Summary",depth:3},{id:"example",text:"Example",depth:3},{id:"more-info",text:"More info",depth:3},{id:"additional-params",text:"Additional params",depth:4},{id:"multiple-functions",text:"Multiple functions",depth:4},{id:"async-setup",text:"Async setup",depth:4}],title:"Custom `render` function",headingTitle:"Custom `render` function",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/9419.4a0828e91a.js b/static/js/async/9419.4a0828e91a.js deleted file mode 100644 index 5d9c3e53..00000000 --- a/static/js/async/9419.4a0828e91a.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["9419"],{3078(s,e,r){r.r(e),r.d(e,{default:()=>a});var n=r(4848),o=r(8453),i=r(7425);function l(s){let e={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h1,{id:"screen-object",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#screen-object",children:"#"}),(0,n.jsx)(e.code,{children:"screen"})," object"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"queries"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" debug"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" DebugOptions"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" toJSON"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" JsonElement"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" container"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" root"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"screen"})," object provides access to queries and utilities for the currently rendered UI."]}),"\n",(0,n.jsxs)(e.p,{children:["This object is assigned after the ",(0,n.jsx)(e.code,{children:"render"})," call and cleared after each test by calling ",(0,n.jsx)(e.a,{href:"/14.x/docs/api/misc/other.html#cleanup",children:(0,n.jsx)(e.code,{children:"cleanup"})}),". If no ",(0,n.jsx)(e.code,{children:"render"})," call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access."]}),"\n",(0,n.jsxs)(e.h3,{id:"queries",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#queries",children:"#"}),(0,n.jsx)(e.code,{children:"...queries"})]}),"\n",(0,n.jsxs)(e.p,{children:["The main feature of ",(0,n.jsx)(e.code,{children:"screen"})," is its queries for finding elements in the view hierarchy."]}),"\n",(0,n.jsxs)(e.p,{children:["See ",(0,n.jsx)(e.a,{href:"/14.x/docs/api/queries.html",children:"Queries"})," for a complete list."]}),"\n",(0,n.jsxs)(e.h4,{id:"example",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'example'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" buttonStart"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'start'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.h3,{id:"rerender",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rerender",children:"#"}),(0,n.jsx)(e.code,{children:"rerender"})]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})})})}),"\n",(0,n.jsxs)(e.p,{children:["Re-render the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and ",(0,n.jsx)(e.code,{children:"key"}),") as the previous element, the tree will be updated; otherwise, it will re-mount a new tree, in both cases triggering the appropriate lifecycle events."]}),"\n",(0,n.jsxs)(e.p,{children:["This method is async and uses async ",(0,n.jsx)(e.code,{children:"act"})," internally to execute all pending React updates during updating. This works with async React features like ",(0,n.jsx)(e.code,{children:"Suspense"})," boundaries and the ",(0,n.jsx)(e.code,{children:"use()"})," hook."]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'async rerender test'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" initialData"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"first"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".rerender"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" initialData"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"updated"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'updated'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.h3,{id:"unmount",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unmount",children:"#"}),(0,n.jsx)(e.code,{children:"unmount"})]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})})})}),"\n",(0,n.jsx)(e.p,{children:"Unmount the in-memory tree, triggering the appropriate lifecycle events."}),"\n",(0,n.jsxs)(e.p,{children:["This method is async and uses async ",(0,n.jsx)(e.code,{children:"act"})," internally to execute all pending React updates during unmounting. This works with async React features like ",(0,n.jsx)(e.code,{children:"Suspense"})," boundaries and the ",(0,n.jsx)(e.code,{children:"use()"})," hook."]}),"\n",(0,n.jsx)(i.Pq,{type:"note",title:"Note",children:(0,n.jsxs)(e.p,{children:["Usually you should not need to call ",(0,n.jsx)(e.code,{children:"unmount"})," as it is done automatically if your test runner supports ",(0,n.jsx)(e.code,{children:"afterEach"})," hook (like Jest, mocha, Jasmine)."]})}),"\n",(0,n.jsxs)(e.h3,{id:"debug",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#debug",children:"#"}),(0,n.jsx)(e.code,{children:"debug"})]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" debug"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(options"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { message"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"; mapProps"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" MapPropsFunction"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,n.jsxs)(e.p,{children:["Pretty prints deeply rendered component passed to ",(0,n.jsx)(e.code,{children:"render"}),"."]}),"\n",(0,n.jsxs)(e.h4,{id:"debug-message-option",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#debug-message-option",children:"#"}),(0,n.jsx)(e.code,{children:"message"})," option"]}),"\n",(0,n.jsx)(e.p,{children:"You can provide a message that will be printed on top."}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".debug"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ message"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'optional message'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})]})})}),"\n",(0,n.jsx)(e.p,{children:"logs optional message and colored JSX:"}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"optional message"})}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{[Function bound fn]}"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Press me"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:""})]})]})})}),"\n",(0,n.jsxs)(e.h4,{id:"debug-map-props-option",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#debug-map-props-option",children:"#"}),(0,n.jsx)(e.code,{children:"mapProps"})," option"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" debug"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ mapProps: (props) "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({}) });"})]})})})}),"\n",(0,n.jsxs)(e.p,{children:["You can use the ",(0,n.jsx)(e.code,{children:"mapProps"})," option to transform the props that will be printed :"]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{{ backgroundColor"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'red'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }} />);"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".debug"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"mapProps"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props }) "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ props }) });"})]})]})})}),"\n",(0,n.jsxs)(e.p,{children:["This will log the rendered JSX without the ",(0,n.jsx)(e.code,{children:"style"})," props."]}),"\n",(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"children"})," prop cannot be filtered out so the following will print all rendered components with all props but ",(0,n.jsx)(e.code,{children:"children"})," filtered out."]}),"\n",(0,n.jsxs)(e.p,{children:["This option can be used to target specific props when debugging a query (for instance, keeping only the ",(0,n.jsx)(e.code,{children:"children"})," prop when debugging a ",(0,n.jsx)(e.code,{children:"getByText"})," query)."]}),"\n",(0,n.jsx)(e.p,{children:"You can also transform prop values so that they are more readable (e.g., flatten styles)."}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { StyleSheet } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".debug"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" mapProps"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props }) "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ style"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" StyleSheet"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".flatten"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(style)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props })"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsx)(e.p,{children:"Or remove props that have little value when debugging tests, e.g. path prop for svgs"}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".debug"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"mapProps"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ path"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props }) "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props }) });"})]})})})}),"\n",(0,n.jsxs)(e.h3,{id:"tojson",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#tojson",children:"#"}),(0,n.jsx)(e.code,{children:"toJSON"})]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" toJSON"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" JsonElement"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,n.jsx)(e.p,{children:"Get the rendered component JSON representation, e.g. for snapshot testing."}),"\n",(0,n.jsxs)(e.h3,{id:"container",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#container",children:"#"}),(0,n.jsx)(e.code,{children:"container"})]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,n.jsxs)(e.p,{children:["Returns a pseudo-element container whose children are the elements you asked to render. This is the root container element from ",(0,n.jsx)(e.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"}),"."]}),"\n",(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"container"})," provides access to the entire rendered tree. Use it to query or manipulate the rendered output, similar to how ",(0,n.jsx)(e.code,{children:"container"})," works in ",(0,n.jsx)(e.a,{href:"https://testing-library.com/docs/react-testing-library/other#container-1",rel:"noopener noreferrer",target:"_blank",children:"React Testing Library"}),"."]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'example'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // container contains the entire rendered tree"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".container;"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(container)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeTruthy"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,n.jsxs)(e.h3,{id:"root",children:[(0,n.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#root",children:"#"}),(0,n.jsx)(e.code,{children:"root"})]}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,n.jsxs)(e.p,{children:["Returns the rendered root ",(0,n.jsx)(e.a,{href:"/14.x/docs/advanced/testing-env.html#host-and-composite-components",children:"host element"}),", or ",(0,n.jsx)(e.code,{children:"null"})," if nothing was rendered. This is the first child of the ",(0,n.jsx)(e.code,{children:"container"}),", which represents the actual root element you rendered."]}),"\n",(0,n.jsxs)(e.p,{children:["This API is useful for component tests where you need to access the root host view without using ",(0,n.jsx)(e.code,{children:"*ByTestId"})," queries or similar methods."]}),"\n",(0,n.jsx)(i.Pq,{type:"note",title:"Note",children:(0,n.jsxs)(e.p,{children:["In rare cases where your root element is a ",(0,n.jsx)(e.code,{children:"React.Fragment"})," with multiple children, the ",(0,n.jsx)(e.code,{children:"container"})," will have more than one child, and ",(0,n.jsx)(e.code,{children:"root"})," will return only the first one. In such cases, use ",(0,n.jsx)(e.code,{children:"container.children"})," to access all rendered elements."]})}),"\n",(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,n.jsx)(e.span,{className:"line"}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'example'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"root-view"'}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // root is the View element you rendered"})}),"\n",(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"root"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".testID)"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'root-view'"}),(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,n.jsx)(e,{...s,children:(0,n.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fapi%2Fscreen.mdx"]={toc:[{id:"queries",text:"`...queries`",depth:3},{id:"example",text:"Example",depth:4},{id:"rerender",text:"`rerender`",depth:3},{id:"unmount",text:"`unmount`",depth:3},{id:"debug",text:"`debug`",depth:3},{id:"debug-message-option",text:"`message` option",depth:4},{id:"debug-map-props-option",text:"`mapProps` option",depth:4},{id:"tojson",text:"`toJSON`",depth:3},{id:"container",text:"`container`",depth:3},{id:"root",text:"`root`",depth:3}],title:"`screen` object",headingTitle:"`screen` object",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/9419.8f891425ca.js b/static/js/async/9419.8f891425ca.js new file mode 100644 index 00000000..c1383407 --- /dev/null +++ b/static/js/async/9419.8f891425ca.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["9419"],{3078(s,e,n){n.r(e),n.d(e,{default:()=>a});var r=n(4848),o=n(8453),i=n(7425);function l(s){let e={a:"a",code:"code",h1:"h1",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"screen-object",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#screen-object",children:"#"}),(0,r.jsx)(e.code,{children:"screen"})," object"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"queries"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" DebugOptions"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" toJSON"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" JsonElement"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" container"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" root"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"screen"})," object provides access to queries and utilities for the currently rendered UI."]}),"\n",(0,r.jsxs)(e.p,{children:["This object is assigned after the ",(0,r.jsx)(e.code,{children:"render"})," call and cleared after each test by calling ",(0,r.jsx)(e.a,{href:"/14.x/docs/api/misc/other.html#cleanup",children:(0,r.jsx)(e.code,{children:"cleanup"})}),". If no ",(0,r.jsx)(e.code,{children:"render"})," call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access."]}),"\n",(0,r.jsxs)(e.h3,{id:"queries",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#queries",children:"#"}),(0,r.jsx)(e.code,{children:"...queries"})]}),"\n",(0,r.jsxs)(e.p,{children:["The main feature of ",(0,r.jsx)(e.code,{children:"screen"})," is its queries for finding elements in the view hierarchy."]}),"\n",(0,r.jsxs)(e.p,{children:["See ",(0,r.jsx)(e.a,{href:"/14.x/docs/api/queries.html",children:"Queries"})," for a complete list."]}),"\n",(0,r.jsxs)(e.h4,{id:"example",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example",children:"#"}),"Example"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'example'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" buttonStart"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByRole"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { name"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'start'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"rerender",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rerender",children:"#"}),(0,r.jsx)(e.code,{children:"rerender"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" React"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Element"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"unknown"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["Re-render the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and ",(0,r.jsx)(e.code,{children:"key"}),") as the previous element, the tree will be updated; otherwise, it will re-mount a new tree, in both cases triggering the appropriate lifecycle events."]}),"\n",(0,r.jsxs)(e.p,{children:["This method is async and uses async ",(0,r.jsx)(e.code,{children:"act"})," internally to execute all pending React updates during updating. This works with async React features like ",(0,r.jsx)(e.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(e.code,{children:"use()"})," hook."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'async rerender test'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" initialData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"first"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" initialData"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"updated"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'updated'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"unmount",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unmount",children:"#"}),(0,r.jsx)(e.code,{children:"unmount"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})})})}),"\n",(0,r.jsx)(e.p,{children:"Unmount the in-memory tree, triggering the appropriate lifecycle events."}),"\n",(0,r.jsxs)(e.p,{children:["This method is async and uses async ",(0,r.jsx)(e.code,{children:"act"})," internally to execute all pending React updates during unmounting. This works with async React features like ",(0,r.jsx)(e.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(e.code,{children:"use()"})," hook."]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["Usually you should not need to call ",(0,r.jsx)(e.code,{children:"unmount"})," as it is done automatically if your test runner supports ",(0,r.jsx)(e.code,{children:"afterEach"})," hook (like Jest, mocha, Jasmine)."]})}),"\n",(0,r.jsxs)(e.h3,{id:"debug",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#debug",children:"#"}),(0,r.jsx)(e.code,{children:"debug"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { message"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" string"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"; mapProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" MapPropsFunction"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["Pretty prints deeply rendered component passed to ",(0,r.jsx)(e.code,{children:"render"}),"."]}),"\n",(0,r.jsxs)(e.h4,{id:"debug-message-option",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#debug-message-option",children:"#"}),(0,r.jsx)(e.code,{children:"message"})," option"]}),"\n",(0,r.jsx)(e.p,{children:"You can provide a message that will be printed on top."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Component"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ message"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'optional message'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]})]})})}),"\n",(0,r.jsx)(e.p,{children:"logs optional message and colored JSX:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"optional message"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{[Function bound fn]}"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Press me"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:""})]})]})})}),"\n",(0,r.jsxs)(e.h4,{id:"debug-map-props-option",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#debug-map-props-option",children:"#"}),(0,r.jsx)(e.code,{children:"mapProps"})," option"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ mapProps: (props) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({}) });"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["You can use the ",(0,r.jsx)(e.code,{children:"mapProps"})," option to transform the props that will be printed :"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" style"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"{{ backgroundColor"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'red'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }} />);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"mapProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ style"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props }) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ props }) });"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["This will log the rendered JSX without the ",(0,r.jsx)(e.code,{children:"style"})," props."]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"children"})," prop cannot be filtered out so the following will print all rendered components with all props but ",(0,r.jsx)(e.code,{children:"children"})," filtered out."]}),"\n",(0,r.jsxs)(e.p,{children:["This option can be used to target specific props when debugging a query (for instance, keeping only the ",(0,r.jsx)(e.code,{children:"children"})," prop when debugging a ",(0,r.jsx)(e.code,{children:"getByText"})," query)."]}),"\n",(0,r.jsx)(e.p,{children:"You can also transform prop values so that they are more readable (e.g., flatten styles)."}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { StyleSheet } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" mapProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ style"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props }) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" style"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" StyleSheet"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".flatten"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(style)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(e.p,{children:"Or remove props that have little value when debugging tests, e.g. path prop for svgs"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".debug"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"mapProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ path"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props }) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ({ "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"..."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"props }) });"})]})})})}),"\n",(0,r.jsxs)(e.h3,{id:"tojson",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#tojson",children:"#"}),(0,r.jsx)(e.code,{children:"toJSON"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" toJSON"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" JsonElement"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsx)(e.p,{children:"Get the rendered component JSON representation, e.g. for snapshot testing."}),"\n",(0,r.jsxs)(e.h3,{id:"container",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#container",children:"#"}),(0,r.jsx)(e.code,{children:"container"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["Returns a pseudo-element container whose children are the elements you asked to render. This is the root container element from ",(0,r.jsx)(e.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"}),"."]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"container"})," provides access to the entire rendered tree. Use it to query or manipulate the rendered output, similar to how ",(0,r.jsx)(e.code,{children:"container"})," works in ",(0,r.jsx)(e.a,{href:"https://testing-library.com/docs/react-testing-library/other#container-1",rel:"noopener noreferrer",target:"_blank",children:"React Testing Library"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'example'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"MyComponent"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // container contains the entire rendered tree"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".container;"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(container)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBeTruthy"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"root",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#root",children:"#"}),(0,r.jsx)(e.code,{children:"root"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsx)(e.code,{children:(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" TestInstance"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" |"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" null"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})})})}),"\n",(0,r.jsxs)(e.p,{children:["Returns the rendered root ",(0,r.jsx)(e.a,{href:"/14.x/docs/advanced/testing-env.html#host-and-composite-components",children:"host element"}),", or ",(0,r.jsx)(e.code,{children:"null"})," if nothing was rendered. This is the first child of the ",(0,r.jsx)(e.code,{children:"container"}),", which represents the actual root element you rendered."]}),"\n",(0,r.jsxs)(e.p,{children:["This API is useful for component tests where you need to access the root host view without using ",(0,r.jsx)(e.code,{children:"*ByTestId"})," queries or similar methods."]}),"\n",(0,r.jsx)(i.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(e.p,{children:["In rare cases where your root element is a ",(0,r.jsx)(e.code,{children:"React.Fragment"})," with multiple children, the ",(0,r.jsx)(e.code,{children:"container"})," will have more than one child, and ",(0,r.jsx)(e.code,{children:"root"})," will return only the first one. In such cases, use ",(0,r.jsx)(e.code,{children:"container.children"})," to access all rendered elements."]})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'example'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"View"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" testID"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"root-view"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Text"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">Hello"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // root is the View element you rendered"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"root"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".testID)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'root-view'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function a(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(l,{...s})}):l(s)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fapi%2Fscreen.mdx"]={toc:[{id:"queries",text:"`...queries`",depth:3},{id:"example",text:"Example",depth:4},{id:"rerender",text:"`rerender`",depth:3},{id:"unmount",text:"`unmount`",depth:3},{id:"debug",text:"`debug`",depth:3},{id:"debug-message-option",text:"`message` option",depth:4},{id:"debug-map-props-option",text:"`mapProps` option",depth:4},{id:"tojson",text:"`toJSON`",depth:3},{id:"container",text:"`container`",depth:3},{id:"root",text:"`root`",depth:3}],title:"`screen` object",headingTitle:"`screen` object",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/9808.f8a777a222.js b/static/js/async/9808.f8a777a222.js new file mode 100644 index 00000000..54023cd4 --- /dev/null +++ b/static/js/async/9808.f8a777a222.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["9808"],{9795(e,s,n){n.r(s),n.d(s,{default:()=>a});var r=n(4848),i=n(8453),o=n(7425);function l(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"async-utilities",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-utilities",children:"#"}),"Async utilities"]}),"\n",(0,r.jsxs)(s.h2,{id:"findby-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#findby-queries",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"findBy*"})," queries are used to find elements that are not instantly available but will be added as a result of some asynchronous action. Learn more details ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#find-by",children:"here"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"waitfor",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor",children:"#"}),(0,r.jsx)(s.code,{children:"waitFor"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" onTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (error"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Error"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Error"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits for the ",(0,r.jsx)(s.code,{children:"expectation"})," callback to pass. ",(0,r.jsx)(s.code,{children:"waitFor"})," runs the callback multiple times until timeout is reached, as specified by the ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," 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."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," executes the ",(0,r.jsx)(s.code,{children:"expectation"})," callback every ",(0,r.jsx)(s.code,{children:"interval"})," (default: 50 ms) until ",(0,r.jsx)(s.code,{children:"timeout"})," (default: 1000 ms) is reached. Execution stops as soon as the callback doesn't throw an error, and the callback's return value is returned to the caller. If timeout is reached, ",(0,r.jsx)(s.code,{children:"waitFor"})," re-throws the final error thrown by ",(0,r.jsx)(s.code,{children:"expectation"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ `waitFor` will return immediately because callback does not throw"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," is an async function so you need to ",(0,r.jsx)(s.code,{children:"await"})," the result to pause test execution."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ missing `await`: `waitFor` will just return Promise that will be rejected when the timeout is reached"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nYou can enforce awaiting ",(0,r.jsx)(s.code,{children:"waitFor"})," by using the ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/await-async-utils.md",rel:"noopener noreferrer",target:"_blank",children:"await-async-utils"})," rule from ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library",rel:"noopener noreferrer",target:"_blank",children:"eslint-plugin-testing-library"}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["Since ",(0,r.jsx)(s.code,{children:"waitFor"})," runs the ",(0,r.jsx)(s.code,{children:"expectation"})," callback multiple times, ",(0,r.jsx)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#performing-side-effects-in-waitfor",rel:"noopener noreferrer",target:"_blank",children:"avoid performing side effects"})," in ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ button will be pressed on each waitFor iteration"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockOnPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nAvoiding side effects in ",(0,r.jsx)(s.code,{children:"expectation"})," callback can be partially enforced with the ",(0,r.jsxs)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-wait-for-side-effects.md",rel:"noopener noreferrer",target:"_blank",children:[(0,r.jsx)(s.code,{children:"no-wait-for-side-effects"})," rule"]}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["Use a ",(0,r.jsxs)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#having-multiple-assertions-in-a-single-waitfor-callback",rel:"noopener noreferrer",target:"_blank",children:["single assertion per ",(0,r.jsx)(s.code,{children:"waitFor"})]})," for consistency and faster failing tests. For multiple assertions, use separate ",(0,r.jsx)(s.code,{children:"waitFor"})," calls. Often you won't need to wrap the second assertion in ",(0,r.jsx)(s.code,{children:"waitFor"})," since the first one waits for the asynchronous change."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," checks whether Jest fake timers are enabled and adapts its behavior in such case. The following snippet is a simplified version of how it behaves when fake timers are enabled:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"while"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 0"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".advanceTimersByTime"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(interval);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" try"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // resolve"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"catch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (error) {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" error;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// reject"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["In the following example we test that a function is called after 10 seconds using fake timers. With fake timers, the test doesn't depend on real time passing, making it faster and more reliable. We don't need to advance fake timers through Jest's API because ",(0,r.jsx)(s.code,{children:"waitFor"})," handles this."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in component"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"setTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" someFunction"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in test"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(someFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/14.x/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})}),"\n",(0,r.jsxs)(s.h3,{id:"options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"timeout"}),": How long to wait for, in ms. Defaults to 1000 ms (configured by ",(0,r.jsx)(s.code,{children:"asyncUtilTimeout"})," option)."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"interval"}),": How often to check, in ms. Defaults to 50 ms."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"onTimeout"}),": Callback to transform the error before it's thrown. Useful for debugging, e.g., ",(0,r.jsx)(s.code,{children:"onTimeout: () => { screen.debug(); }"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"waitforelementtoberemoved",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitforelementtoberemoved",children:"#"}),(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" onTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (error"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Error"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Error"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits for non-deterministic periods of time until queried element is removed or times out. ",(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," periodically calls ",(0,r.jsx)(s.code,{children:"expectation"})," every ",(0,r.jsx)(s.code,{children:"interval"})," milliseconds to determine whether the element has been removed or not."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForElementToBeRemoved } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waiting for an Banana to be removed'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Banana"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Banana ready'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"This method expects that the element is initially present in the render tree and then is removed from it. If the element is not present when you call this method it throws an error."}),"\n",(0,r.jsxs)(s.p,{children:["You can use any of ",(0,r.jsx)(s.code,{children:"getBy"}),", ",(0,r.jsx)(s.code,{children:"getAllBy"}),", ",(0,r.jsx)(s.code,{children:"queryBy"})," and ",(0,r.jsx)(s.code,{children:"queryAllBy"})," queries for ",(0,r.jsx)(s.code,{children:"expectation"})," parameter."]}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/14.x/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fapi%2Fmisc%2Fasync.mdx"]={toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2},{id:"waitfor",text:"`waitFor`",depth:2},{id:"options",text:"Options",depth:3},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2}],title:"Async utilities",headingTitle:"Async utilities",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/9808.fd6f06399e.js b/static/js/async/9808.fd6f06399e.js deleted file mode 100644 index 5fa7fc63..00000000 --- a/static/js/async/9808.fd6f06399e.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["9808"],{9795(e,s,n){n.r(s),n.d(s,{default:()=>a});var r=n(4848),i=n(8453),o=n(7425);function l(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"async-utilities",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-utilities",children:"#"}),"Async utilities"]}),"\n",(0,r.jsxs)(s.h2,{id:"findby-queries",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#findby-queries",children:"#"}),(0,r.jsx)(s.code,{children:"findBy*"})," queries"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"findBy*"})," queries are used to find elements that are not instantly available but will be added as a result of some asynchronous action. Learn more details ",(0,r.jsx)(s.a,{href:"/14.x/docs/api/queries.html#find-by",children:"here"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"waitfor",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor",children:"#"}),(0,r.jsx)(s.code,{children:"waitFor"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" onTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (error"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Error"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Error"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits for the ",(0,r.jsx)(s.code,{children:"expectation"})," callback to pass. ",(0,r.jsx)(s.code,{children:"waitFor"})," runs the callback multiple times until timeout is reached, as specified by the ",(0,r.jsx)(s.code,{children:"timeout"})," and ",(0,r.jsx)(s.code,{children:"interval"})," 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."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsx)(s.code,{children:(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]})})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," executes the ",(0,r.jsx)(s.code,{children:"expectation"})," callback every ",(0,r.jsx)(s.code,{children:"interval"})," (default: 50 ms) until ",(0,r.jsx)(s.code,{children:"timeout"})," (default: 1000 ms) is reached. Execution stops as soon as the callback doesn't throw an error, and the callback's return value is returned to the caller. If timeout is reached, ",(0,r.jsx)(s.code,{children:"waitFor"})," re-throws the final error thrown by ",(0,r.jsx)(s.code,{children:"expectation"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ `waitFor` will return immediately because callback does not throw"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," is an async function so you need to ",(0,r.jsx)(s.code,{children:"await"})," the result to pause test execution."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ missing `await`: `waitFor` will just return Promise that will be rejected when the timeout is reached"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nYou can enforce awaiting ",(0,r.jsx)(s.code,{children:"waitFor"})," by using the ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/await-async-utils.md",rel:"noopener noreferrer",target:"_blank",children:"await-async-utils"})," rule from ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library",rel:"noopener noreferrer",target:"_blank",children:"eslint-plugin-testing-library"}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["Since ",(0,r.jsx)(s.code,{children:"waitFor"})," runs the ",(0,r.jsx)(s.code,{children:"expectation"})," callback multiple times, ",(0,r.jsx)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#performing-side-effects-in-waitfor",rel:"noopener noreferrer",target:"_blank",children:"avoid performing side effects"})," in ",(0,r.jsx)(s.code,{children:"waitFor"}),"."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // ❌ button will be pressed on each waitFor iteration"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(mockOnPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nAvoiding side effects in ",(0,r.jsx)(s.code,{children:"expectation"})," callback can be partially enforced with the ",(0,r.jsxs)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-wait-for-side-effects.md",rel:"noopener noreferrer",target:"_blank",children:[(0,r.jsx)(s.code,{children:"no-wait-for-side-effects"})," rule"]}),"."]})}),"\n",(0,r.jsxs)(s.p,{children:["Use a ",(0,r.jsxs)(s.a,{href:"https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#having-multiple-assertions-in-a-single-waitfor-callback",rel:"noopener noreferrer",target:"_blank",children:["single assertion per ",(0,r.jsx)(s.code,{children:"waitFor"})]})," for consistency and faster failing tests. For multiple assertions, use separate ",(0,r.jsx)(s.code,{children:"waitFor"})," calls. Often you won't need to wrap the second assertion in ",(0,r.jsx)(s.code,{children:"waitFor"})," since the first one waits for the asynchronous change."]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"waitFor"})," checks whether Jest fake timers are enabled and adapts its behavior in such case. The following snippet is a simplified version of how it behaves when fake timers are enabled:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"let"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"while"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:">"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 0"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" fakeTimeRemaining "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"-"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval;"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".advanceTimersByTime"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(interval);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" try"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // resolve"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"catch"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (error) {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" error;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// reject"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"throw"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" lastError;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["In the following example we test that a function is called after 10 seconds using fake timers. With fake timers, the test doesn't depend on real time passing, making it faster and more reliable. We don't need to advance fake timers through Jest's API because ",(0,r.jsx)(s.code,{children:"waitFor"})," handles this."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in component"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"setTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" someFunction"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"}"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// in test"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".useFakeTimers"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitFor"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(someFunction)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 10000"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/14.x/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})}),"\n",(0,r.jsxs)(s.h3,{id:"options",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),"Options"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"timeout"}),": How long to wait for, in ms. Defaults to 1000 ms (configured by ",(0,r.jsx)(s.code,{children:"asyncUtilTimeout"})," option)."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"interval"}),": How often to check, in ms. Defaults to 50 ms."]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"onTimeout"}),": Callback to transform the error before it's thrown. Useful for debugging, e.g., ",(0,r.jsx)(s.code,{children:"onTimeout: () => { screen.debug(); }"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"waitforelementtoberemoved",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitforelementtoberemoved",children:"#"}),(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expectation"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" timeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" interval"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" onTimeout"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (error"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Error"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Error"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" Promise"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"T"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["Waits for non-deterministic periods of time until queried element is removed or times out. ",(0,r.jsx)(s.code,{children:"waitForElementToBeRemoved"})," periodically calls ",(0,r.jsx)(s.code,{children:"expectation"})," every ",(0,r.jsx)(s.code,{children:"interval"})," milliseconds to determine whether the element has been removed or not."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"jsx",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" waitForElementToBeRemoved } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"test"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'waiting for an Banana to be removed'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"Banana"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" waitForElementToBeRemoved"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Banana ready'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:"This method expects that the element is initially present in the render tree and then is removed from it. If the element is not present when you call this method it throws an error."}),"\n",(0,r.jsxs)(s.p,{children:["You can use any of ",(0,r.jsx)(s.code,{children:"getBy"}),", ",(0,r.jsx)(s.code,{children:"getAllBy"}),", ",(0,r.jsx)(s.code,{children:"queryBy"})," and ",(0,r.jsx)(s.code,{children:"queryAllBy"})," queries for ",(0,r.jsx)(s.code,{children:"expectation"})," parameter."]}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["\nIf you receive warnings related to ",(0,r.jsx)(s.code,{children:"act()"})," function consult our ",(0,r.jsx)(s.a,{href:"/14.x/docs/advanced/understanding-act.html",children:"Understanding Act"})," function document."]})})]})}function a(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}a.__RSPRESS_PAGE_META={},a.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fapi%2Fmisc%2Fasync.mdx"]={toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2},{id:"waitfor",text:"`waitFor`",depth:2},{id:"options",text:"Options",depth:3},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2}],title:"Async utilities",headingTitle:"Async utilities",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/9826.3cfceae583.js b/static/js/async/9826.3cfceae583.js new file mode 100644 index 00000000..255de805 --- /dev/null +++ b/static/js/async/9826.3cfceae583.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["9826"],{3689(s,e,n){n.r(e),n.d(e,{default:()=>l});var r=n(4848),o=n(8453);function i(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"renderhook-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook-function",children:"#"}),(0,r.jsx)(e.code,{children:"renderHook"})," function"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" callback"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookOptions"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Renders a test component that will call the provided ",(0,r.jsx)(e.code,{children:"callback"}),", including any hooks it calls, every time it renders. Returns ",(0,r.jsx)(e.a,{href:"#renderhookresult",children:(0,r.jsx)(e.code,{children:"RenderHookResult"})})," object, which you can interact with."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { useCount } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../useCount'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should increment count'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Note that you should wrap the calls to functions your hook returns with `act` if they trigger an update of your hook's state to ensure pending useEffects are run before your next assertion."})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// useCount.js"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((previousCount) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" previousCount "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" increment };"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"renderHook"})," function accepts the following arguments:"]}),"\n",(0,r.jsxs)(e.p,{children:["Callback is a function that is called each ",(0,r.jsx)(e.code,{children:"render"})," of the test component. This function should call one or more hooks for testing."]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"props"})," passed into the callback will be the ",(0,r.jsx)(e.code,{children:"initialProps"})," provided in the ",(0,r.jsx)(e.code,{children:"options"})," to ",(0,r.jsx)(e.code,{children:"renderHook"}),", unless new props are provided by a subsequent ",(0,r.jsx)(e.code,{children:"rerender"})," call."]}),"\n",(0,r.jsxs)(e.h2,{id:"options",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),(0,r.jsx)(e.code,{children:"options"})]}),"\n",(0,r.jsxs)(e.p,{children:["A ",(0,r.jsx)(e.code,{children:"RenderHookOptions"})," object to modify the execution of the ",(0,r.jsx)(e.code,{children:"callback"})," function, containing the following properties:"]}),"\n",(0,r.jsxs)(e.h3,{id:"initialprops",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#initialprops",children:"#"}),(0,r.jsx)(e.code,{children:"initialProps"})]}),"\n",(0,r.jsxs)(e.p,{children:["The initial values to pass as ",(0,r.jsx)(e.code,{children:"props"})," to the ",(0,r.jsx)(e.code,{children:"callback"})," function of ",(0,r.jsx)(e.code,{children:"renderHook"}),". The ",(0,r.jsx)(e.code,{children:"Props"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h3,{id:"wrapper",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapper",children:"#"}),(0,r.jsx)(e.code,{children:"wrapper"})]}),"\n",(0,r.jsxs)(e.p,{children:["A React component to wrap the test component in when rendering. This is usually used to add context providers from ",(0,r.jsx)(e.code,{children:"React.createContext"})," for the hook to access with ",(0,r.jsx)(e.code,{children:"useContext"}),"."]}),"\n",(0,r.jsxs)(e.h2,{id:"renderhookresult",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhookresult",children:"#"}),(0,r.jsx)(e.code,{children:"RenderHookResult"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"> {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"renderHook"})," function returns an object that has the following properties:"]}),"\n",(0,r.jsxs)(e.h3,{id:"result",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result",children:"#"}),(0,r.jsx)(e.code,{children:"result"})]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"current"})," value of the ",(0,r.jsx)(e.code,{children:"result"})," will reflect the latest of whatever is returned from the ",(0,r.jsx)(e.code,{children:"callback"})," passed to ",(0,r.jsx)(e.code,{children:"renderHook"}),". The ",(0,r.jsx)(e.code,{children:"Result"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h3,{id:"rerender",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rerender",children:"#"}),(0,r.jsx)(e.code,{children:"rerender"})]}),"\n",(0,r.jsxs)(e.p,{children:["A function to rerender the test component, causing any hooks to be recalculated. If ",(0,r.jsx)(e.code,{children:"newProps"})," are passed, they will replace the ",(0,r.jsx)(e.code,{children:"callback"})," function's ",(0,r.jsx)(e.code,{children:"initialProps"})," for subsequent rerenders. The ",(0,r.jsx)(e.code,{children:"Props"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h3,{id:"unmount",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unmount",children:"#"}),(0,r.jsx)(e.code,{children:"unmount"})]}),"\n",(0,r.jsxs)(e.p,{children:["A function to unmount the test component. This is commonly used to trigger cleanup effects for ",(0,r.jsx)(e.code,{children:"useEffect"})," hooks."]}),"\n",(0,r.jsxs)(e.h2,{id:"examples",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#examples",children:"#"}),"Examples"]}),"\n",(0,r.jsxs)(e.p,{children:["Here we present some extra examples of using ",(0,r.jsx)(e.code,{children:"renderHook"})," API."]}),"\n",(0,r.jsxs)(e.h3,{id:"with-initialprops",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-initialprops",children:"#"}),"With ",(0,r.jsx)(e.code,{children:"initialProps"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (initialCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((previousCount) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" previousCount "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" [initialCount]);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" increment };"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should increment count'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((initialCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" initialProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"with-wrapper",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-wrapper",children:"#"}),"With ",(0,r.jsx)(e.code,{children:"wrapper"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should use context value'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ children }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { children"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactNode"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }) {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Context.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"provided"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{children};"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Wrapper });"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(i,{...s})}):i(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["12.x%2Fdocs%2Fapi%2Fmisc%2Frender-hook.mdx"]={toc:[{id:"options",text:"`options`",depth:2},{id:"initialprops",text:"`initialProps`",depth:3},{id:"wrapper",text:"`wrapper`",depth:3},{id:"renderhookresult",text:"`RenderHookResult`",depth:2},{id:"result",text:"`result`",depth:3},{id:"rerender",text:"`rerender`",depth:3},{id:"unmount",text:"`unmount`",depth:3},{id:"examples",text:"Examples",depth:2},{id:"with-initialprops",text:"With `initialProps`",depth:3},{id:"with-wrapper",text:"With `wrapper`",depth:3}],title:"`renderHook` function",headingTitle:"`renderHook` function",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/9826.7537a1ed35.js b/static/js/async/9826.7537a1ed35.js deleted file mode 100644 index e602a9a6..00000000 --- a/static/js/async/9826.7537a1ed35.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["9826"],{3689(s,e,n){n.r(e),n.d(e,{default:()=>l});var r=n(4848),o=n(8453);function i(s){let e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...(0,o.R)(),...s.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(e.h1,{id:"renderhook-function",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook-function",children:"#"}),(0,r.jsx)(e.code,{children:"renderHook"})," function"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">("})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" callback"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" options"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"?:"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookOptions"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">;"})]})]})})}),"\n",(0,r.jsxs)(e.p,{children:["Renders a test component that will call the provided ",(0,r.jsx)(e.code,{children:"callback"}),", including any hooks it calls, every time it renders. Returns ",(0,r.jsx)(e.a,{href:"#renderhookresult",children:(0,r.jsx)(e.code,{children:"RenderHookResult"})})," object, which you can interact with."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { useCount } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '../useCount'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should increment count'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // Note that you should wrap the calls to functions your hook returns with `act` if they trigger an update of your hook's state to ensure pending useEffects are run before your next assertion."})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"// useCount.js"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"0"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((previousCount) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" previousCount "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" increment };"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"renderHook"})," function accepts the following arguments:"]}),"\n",(0,r.jsxs)(e.p,{children:["Callback is a function that is called each ",(0,r.jsx)(e.code,{children:"render"})," of the test component. This function should call one or more hooks for testing."]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"props"})," passed into the callback will be the ",(0,r.jsx)(e.code,{children:"initialProps"})," provided in the ",(0,r.jsx)(e.code,{children:"options"})," to ",(0,r.jsx)(e.code,{children:"renderHook"}),", unless new props are provided by a subsequent ",(0,r.jsx)(e.code,{children:"rerender"})," call."]}),"\n",(0,r.jsxs)(e.h2,{id:"options",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#options",children:"#"}),(0,r.jsx)(e.code,{children:"options"})]}),"\n",(0,r.jsxs)(e.p,{children:["A ",(0,r.jsx)(e.code,{children:"RenderHookOptions"})," object to modify the execution of the ",(0,r.jsx)(e.code,{children:"callback"})," function, containing the following properties:"]}),"\n",(0,r.jsxs)(e.h3,{id:"initialprops",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#initialprops",children:"#"}),(0,r.jsx)(e.code,{children:"initialProps"})]}),"\n",(0,r.jsxs)(e.p,{children:["The initial values to pass as ",(0,r.jsx)(e.code,{children:"props"})," to the ",(0,r.jsx)(e.code,{children:"callback"})," function of ",(0,r.jsx)(e.code,{children:"renderHook"}),". The ",(0,r.jsx)(e.code,{children:"Props"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h3,{id:"wrapper",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#wrapper",children:"#"}),(0,r.jsx)(e.code,{children:"wrapper"})]}),"\n",(0,r.jsxs)(e.p,{children:["A React component to wrap the test component in when rendering. This is usually used to add context providers from ",(0,r.jsx)(e.code,{children:"React.createContext"})," for the hook to access with ",(0,r.jsx)(e.code,{children:"useContext"}),"."]}),"\n",(0,r.jsxs)(e.h2,{id:"renderhookresult",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhookresult",children:"#"}),(0,r.jsx)(e.code,{children:"RenderHookResult"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"interface"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" RenderHookResult"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"> {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" };"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Props"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" void"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"}"})})]})})}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"renderHook"})," function returns an object that has the following properties:"]}),"\n",(0,r.jsxs)(e.h3,{id:"result",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#result",children:"#"}),(0,r.jsx)(e.code,{children:"result"})]}),"\n",(0,r.jsxs)(e.p,{children:["The ",(0,r.jsx)(e.code,{children:"current"})," value of the ",(0,r.jsx)(e.code,{children:"result"})," will reflect the latest of whatever is returned from the ",(0,r.jsx)(e.code,{children:"callback"})," passed to ",(0,r.jsx)(e.code,{children:"renderHook"}),". The ",(0,r.jsx)(e.code,{children:"Result"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h3,{id:"rerender",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rerender",children:"#"}),(0,r.jsx)(e.code,{children:"rerender"})]}),"\n",(0,r.jsxs)(e.p,{children:["A function to rerender the test component, causing any hooks to be recalculated. If ",(0,r.jsx)(e.code,{children:"newProps"})," are passed, they will replace the ",(0,r.jsx)(e.code,{children:"callback"})," function's ",(0,r.jsx)(e.code,{children:"initialProps"})," for subsequent rerenders. The ",(0,r.jsx)(e.code,{children:"Props"})," type is determined by the type passed to or inferred by the ",(0,r.jsx)(e.code,{children:"renderHook"})," call."]}),"\n",(0,r.jsxs)(e.h3,{id:"unmount",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unmount",children:"#"}),(0,r.jsx)(e.code,{children:"unmount"})]}),"\n",(0,r.jsxs)(e.p,{children:["A function to unmount the test component. This is commonly used to trigger cleanup effects for ",(0,r.jsx)(e.code,{children:"useEffect"})," hooks."]}),"\n",(0,r.jsxs)(e.h2,{id:"examples",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#examples",children:"#"}),"Examples"]}),"\n",(0,r.jsxs)(e.p,{children:["Here we present some extra examples of using ",(0,r.jsx)(e.code,{children:"renderHook"})," API."]}),"\n",(0,r.jsxs)(e.h3,{id:"with-initialprops",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-initialprops",children:"#"}),"With ",(0,r.jsx)(e.code,{children:"initialProps"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" (initialCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"] "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useState"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((previousCount) "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" previousCount "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"+"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useEffect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" setCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount);"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" [initialCount]);"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { count"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" increment };"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should increment count'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"((initialCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" number"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:") "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useCount"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(initialCount)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" initialProps"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" 1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"1"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".increment"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"2"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"current"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:".count)"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"5"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(e.h3,{id:"with-wrapper",children:[(0,r.jsx)(e.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#with-wrapper",children:"#"}),"With ",(0,r.jsx)(e.code,{children:"wrapper"})]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(e.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"tsx",children:(0,r.jsxs)(e.code,{children:[(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should use context value'"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" function"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" Wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"({ children }"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { children"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" ReactNode"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }) {"})]}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"Context.Provider"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" value"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"provided"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:">{children};"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsx)(e.span,{className:"line"}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:" useHook"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"()"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" { wrapper"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:" Wrapper });"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:" // ..."})}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})})]})}function l(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}={...(0,o.R)(),...s.components};return e?(0,r.jsx)(e,{...s,children:(0,r.jsx)(i,{...s})}):i(s)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["12.x%2Fdocs%2Fapi%2Fmisc%2Frender-hook.mdx"]={toc:[{id:"options",text:"`options`",depth:2},{id:"initialprops",text:"`initialProps`",depth:3},{id:"wrapper",text:"`wrapper`",depth:3},{id:"renderhookresult",text:"`RenderHookResult`",depth:2},{id:"result",text:"`result`",depth:3},{id:"rerender",text:"`rerender`",depth:3},{id:"unmount",text:"`unmount`",depth:3},{id:"examples",text:"Examples",depth:2},{id:"with-initialprops",text:"With `initialProps`",depth:3},{id:"with-wrapper",text:"With `wrapper`",depth:3}],title:"`renderHook` function",headingTitle:"`renderHook` function",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/index.5d61bfb5d3.js b/static/js/index.57322732e5.js similarity index 89% rename from static/js/index.5d61bfb5d3.js rename to static/js/index.57322732e5.js index 45f7007b..6733ccc2 100644 --- a/static/js/index.5d61bfb5d3.js +++ b/static/js/index.57322732e5.js @@ -1 +1 @@ -(()=>{"use strict";var e,t,n,i,a,r,o,d={3853(e,t,n){n.d(t,{Y:()=>i,z:()=>a});let i={pages:[{title:"Network Requests",routePath:"/12.x/cookbook/advanced/network-requests",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"phonebook-example",text:"Phonebook Example",depth:2,charIndex:569},{id:"start-testing-with-a-simple-test",text:"Start testing with a simple test",depth:2,charIndex:4791},{id:"testing-error-handling",text:"Testing error handling",depth:2,charIndex:7885},{id:"global-guarding-against-unwanted-api-requests",text:"Global guarding against unwanted API requests",depth:2,charIndex:9718},{id:"conclusion",text:"Conclusion",depth:2,charIndex:10736},{id:"further-reading-and-alternatives",text:"Further Reading and Alternatives",depth:2,charIndex:11356}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/advanced/network-requests.md"},{title:"Async tests",routePath:"/12.x/cookbook/basics/async-tests",lang:"en",toc:[{id:"summary",text:"Summary",depth:2,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:875},{id:"async-utilities",text:"Async utilities",depth:2,charIndex:2017},{id:"findby-queries",text:"`findBy*` queries",depth:3,charIndex:2105},{id:"example-1",text:"Example",depth:4,charIndex:2833},{id:"waitfor-function",text:"`waitFor` function",depth:3,charIndex:3077},{id:"example-2",text:"Example",depth:4,charIndex:3599},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3,charIndex:3821},{id:"example-3",text:"Example",depth:4,charIndex:4413},{id:"fake-timers",text:"Fake Timers",depth:2,charIndex:4488}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/basics/async-tests.md"},{title:"Custom `render` function",routePath:"/12.x/cookbook/basics/custom-render",lang:"en",toc:[{id:"summary",text:"Summary",depth:3,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:291},{id:"more-info",text:"More info",depth:3,charIndex:1107},{id:"additional-params",text:"Additional params",depth:4,charIndex:1118},{id:"multiple-functions",text:"Multiple functions",depth:4,charIndex:1440},{id:"async-function",text:"Async function",depth:4,charIndex:1729}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/basics/custom-render.md",description:"Summary RNTL exposes the render function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests. Example Example full source code. More info Additional params A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management. Multiple functions Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens. Async function Make it async if you want to put some async setup in your custom render function."},{title:"Introduction",routePath:"/12.x/cookbook/",lang:"en",toc:[{id:"whats-inside-the-cookbook",text:"What's Inside the Cookbook?",depth:2,charIndex:431},{id:"whats-next",text:"What's Next?",depth:2,charIndex:1024}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/index.md",description:"Welcome to the React Native Testing Library (RNTL) Cookbook! This app is your go-to resource for learning how to effectively test React Native applications. It provides a collection of best practices, ready-made recipes, and tips & tricks to simplify and improve your testing workflow. Whether you’re a beginner just getting started or a seasoned developer looking to sharpen your skills, the Cookbook has something for everyone."},{title:"Jotai",routePath:"/12.x/cookbook/state-management/jotai",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"task-list-example",text:"Task List Example",depth:2,charIndex:332},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2,charIndex:1433},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2,charIndex:1898},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2,charIndex:3543},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2,charIndex:4793},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2,charIndex:5396},{id:"conclusion",text:"Conclusion",depth:2,charIndex:6072}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/state-management/jotai.md"},{title:"Testing environment",routePath:"/12.x/docs/advanced/testing-env",lang:"en",toc:[{id:"react-renderers",text:"React renderers",depth:2,charIndex:664},{id:"react-test-renderer",text:"React Test Renderer",depth:2,charIndex:1375},{id:"element-tree",text:"Element tree",depth:2,charIndex:2752},{id:"host-and-composite-components",text:"Host and composite components",depth:2,charIndex:3558},{id:"differentiating-between-host-and-composite-elements",text:"Differentiating between host and composite elements",depth:3,charIndex:5480},{id:"tree-nodes",text:"Tree nodes",depth:2,charIndex:5989},{id:"asserting-props",text:"Asserting props",depth:3,charIndex:6303},{id:"tree-navigation",text:"Tree navigation",depth:2,charIndex:7143},{id:"queries",text:"Queries",depth:2,charIndex:7880}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/advanced/testing-env.mdx",description:"React Native Testing Library allows you to write integration and component tests for your React Native app or library. While the JSX code used in tests closely resembles your React Native app, things are not as simple as they might appear. This document will describe the key elements of our testing environment and highlight things to be aware of when writing more advanced tests or diagnosing issues."},{title:"Understanding `act` function",routePath:"/12.x/docs/advanced/understanding-act",lang:"en",toc:[{id:"act-warnings",text:"`act` warnings",depth:2,charIndex:273},{id:"synchronous-act",text:"Synchronous `act`",depth:2,charIndex:968},{id:"responsibility",text:"Responsibility",depth:3,charIndex:985},{id:"when-to-use-act",text:"When to use act",depth:3,charIndex:2771},{id:"implementation",text:"Implementation",depth:3,charIndex:3854},{id:"asynchronous-act",text:"Asynchronous `act`",depth:2,charIndex:4315},{id:"asynchronous-code",text:"Asynchronous code",depth:3,charIndex:4841},{id:"solution-with-fake-timers",text:"Solution with fake timers",depth:3,charIndex:6146},{id:"solution-with-real-timers",text:"Solution with real timers",depth:3,charIndex:6658},{id:"async-act-warning",text:"Async act warning",depth:3,charIndex:8079},{id:"references",text:"References",depth:2,charIndex:8714}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/advanced/understanding-act.mdx",description:"When writing RNTL tests one of the things that confuses developers the most are cryptic act() function errors logged into console. In this article I will try to build an understanding of the purpose and behaviour of act() so you can build your tests with more confidence."},{title:"API Overview",routePath:"/12.x/docs/api",lang:"en",toc:[],frontmatter:{uri:"/api"},version:"12.x",_relativePath:"12.x/docs/api.md",description:"React Native Testing Library consists of following APIs: render function - render your UI components for testing purposesscreen object - access rendered UI:Queries - find relevant components by various predicates: role, text, test ids, etcLifecycle methods: rerender, unmountHelpers: debug, toJSON, rootJest matchers - validate assumptions about your UIUser Event - simulate common user interactions like press or type in a realistic wayFire Event - simulate any component event in a simplified way purposesMisc APIs:renderHook function - render hooks for testingAsync utils: findBy* queries, wait, waitForElementToBeRemovedConfiguration: configure, resetToDefaultsAccessibility: isHiddenFromAccessibilityOther: within, act, cleanup"},{title:"Fire Event API",routePath:"/12.x/docs/api/events/fire-event",lang:"en",toc:[{id:"press",text:"`fireEvent.press`",depth:3,charIndex:1844},{id:"change-text",text:"`fireEvent.changeText`",depth:3,charIndex:2534},{id:"scroll",text:"`fireEvent.scroll`",depth:3,charIndex:3197},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4,charIndex:3378}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/events/fire-event.mdx",description:"The fireEvent API allows you to trigger all kinds of event handlers on both host and composite components. It will try to invoke a single event handler traversing the component tree bottom-up from passed element and trying to find enabled event handler named onXxx when xxx is the name of the event passed. Unlike User Event, this API does not automatically pass event object to event handler, this is responsibility of the user to construct such object. An example using fireEvent with native events that aren't already aliased by the fireEvent api. FireEvent exposes convenience methods for common events like: press, changeText, scroll. fireEvent.press {#press} Invokes press event handler on the element or parent element in the tree. fireEvent.changeText {#change-text} Invokes changeText event handler on the element or parent element in the tree. fireEvent.scroll {#scroll} Invokes scroll event handler on the element or parent element in the tree. On a ScrollView"},{title:"User Event interactions",routePath:"/12.x/docs/api/events/user-event",lang:"en",toc:[{id:"comparison-with-fire-event-api",text:"Comparison with Fire Event API",depth:2,charIndex:91},{id:"setup",text:"`setup()`",depth:2,charIndex:1294},{id:"setup-options",text:"Options",depth:3,charIndex:1528},{id:"press",text:"`press()`",depth:2,charIndex:1789},{id:"longpress",text:"`longPress()`",depth:2,charIndex:2537},{id:"longpress-options",text:"Options",depth:3,charIndex:3402},{id:"type",text:"`type()`",depth:2,charIndex:3512},{id:"type-options",text:"Options",depth:3,charIndex:4184},{id:"type-sequence",text:"Sequence of events",depth:3,charIndex:4464},{id:"clear",text:"`clear()`",depth:2,charIndex:5193},{id:"clear-sequence",text:"Sequence of events",depth:3,charIndex:5506},{id:"paste",text:"`paste()`",depth:2,charIndex:5789},{id:"paste-sequence",text:"Sequence of events",depth:3,charIndex:6133},{id:"scroll-to",text:"`scrollTo()`",depth:2,charIndex:6404},{id:"scroll-to-options",text:"Options",depth:3,charIndex:7875},{id:"scroll-sequence",text:"Sequence of events",depth:3,charIndex:8865}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/events/user-event.mdx"},{title:"Jest matchers",routePath:"/12.x/docs/api/jest-matchers",lang:"en",toc:[{id:"setup",text:"Setup",depth:2,charIndex:260},{id:"migration-from-legacy-jest-native-matchers",text:"Migration from legacy Jest Native matchers.",depth:2,charIndex:727},{id:"checking-element-existence",text:"Checking element existence",depth:2,charIndex:889},{id:"tobeonthescreen",text:"`toBeOnTheScreen()`",depth:3,charIndex:917},{id:"element-content",text:"Element Content",depth:2,charIndex:1173},{id:"tohavetextcontent",text:"`toHaveTextContent()`",depth:3,charIndex:1190},{id:"tocontainelement",text:"`toContainElement()`",depth:3,charIndex:1545},{id:"tobeemptyelement",text:"`toBeEmptyElement()`",depth:3,charIndex:1739},{id:"checking-element-state",text:"Checking element state",depth:2,charIndex:1904},{id:"tohavedisplayvalue",text:"`toHaveDisplayValue()`",depth:3,charIndex:1928},{id:"tohaveaccessibilityvalue",text:"`toHaveAccessibilityValue()`",depth:3,charIndex:2292},{id:"tobeenabled",text:"`toBeEnabled()` / `toBeDisabled`",depth:3,charIndex:2900},{id:"tobeselected",text:"`toBeSelected()`",depth:3,charIndex:3437},{id:"tobechecked",text:"`toBeChecked()` / `toBePartiallyChecked()`",depth:3,charIndex:3688},{id:"tobeexpanded",text:"`toBeExpanded()` / `toBeCollapsed()`",depth:3,charIndex:4245},{id:"tobebusy",text:"`toBeBusy()`",depth:3,charIndex:4866},{id:"checking-element-style",text:"Checking element style",depth:2,charIndex:5097},{id:"tobevisible",text:"`toBeVisible()`",depth:3,charIndex:5121},{id:"tohavestyle",text:"`toHaveStyle()`",depth:3,charIndex:5422},{id:"other-matchers",text:"Other matchers",depth:2,charIndex:5567},{id:"tohaveaccessiblename",text:"`toHaveAccessibleName()`",depth:3,charIndex:5583},{id:"tohaveprop",text:"`toHaveProp()`",depth:3,charIndex:6241}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/jest-matchers.mdx",description:"This guide describes built-in Jest matchers, we recommend using these matchers as they provide readable tests, accessibility support, and a better developer experience."},{title:"Accessibility",routePath:"/12.x/docs/api/misc/accessibility",lang:"en",toc:[{id:"ishiddenfromaccessibility",text:"`isHiddenFromAccessibility`",depth:2,charIndex:0}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/accessibility.mdx"},{title:"Async utilities",routePath:"/12.x/docs/api/misc/async",lang:"en",toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2,charIndex:0},{id:"waitfor",text:"`waitFor`",depth:2,charIndex:181},{id:"using-a-react-native-version--071-with-jest-fake-timers",text:"Using a React Native version < 0.71 with Jest fake timers",depth:3,charIndex:2474},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2,charIndex:4050}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/async.mdx"},{title:"Configuration",routePath:"/12.x/docs/api/misc/config",lang:"en",toc:[{id:"configure",text:"`configure`",depth:2,charIndex:0},{id:"asyncutiltimeout-option",text:"`asyncUtilTimeout` option",depth:3,charIndex:207},{id:"defaultincludehiddenelements-option",text:"`defaultIncludeHiddenElements` option",depth:3,charIndex:363},{id:"defaultdebugoptions-option",text:"`defaultDebugOptions` option",depth:3,charIndex:749},{id:"concurrent-root",text:"`concurrentRoot` option",depth:3,charIndex:929},{id:"resettodefaults",text:"`resetToDefaults()`",depth:2,charIndex:1121},{id:"environment-variables",text:"Environment variables",depth:2,charIndex:1171},{id:"rntl_skip_auto_cleanup",text:"`RNTL_SKIP_AUTO_CLEANUP`",depth:3,charIndex:1194},{id:"rntl_skip_auto_detect_fake_timers",text:"`RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS`",depth:3,charIndex:1443}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/config.mdx"},{title:"Other helpers",routePath:"/12.x/docs/api/misc/other",lang:"en",toc:[{id:"within",text:"`within`, `getQueriesForElement`",depth:2,charIndex:0},{id:"act",text:"`act`",depth:2,charIndex:966},{id:"cleanup",text:"`cleanup`",depth:2,charIndex:1311}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/other.mdx"},{title:"`renderHook` function",routePath:"/12.x/docs/api/misc/render-hook",lang:"en",toc:[{id:"options",text:"`options`",depth:2,charIndex:1299},{id:"initialprops",text:"`initialProps`",depth:3,charIndex:1430},{id:"wrapper",text:"`wrapper`",depth:3,charIndex:1608},{id:"renderhookresult",text:"`RenderHookResult`",depth:2,charIndex:1793},{id:"result",text:"`result`",depth:3,charIndex:2026},{id:"rerender",text:"`rerender`",depth:3,charIndex:2243},{id:"unmount",text:"`unmount`",depth:3,charIndex:2527},{id:"examples",text:"Examples",depth:2,charIndex:2649},{id:"with-initialprops",text:"With `initialProps`",depth:3,charIndex:2721},{id:"with-wrapper",text:"With `wrapper`",depth:3,charIndex:3371}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/render-hook.mdx",description:"Renders a test component that will call the provided callback, including any hooks it calls, every time it renders. Returns RenderHookResult object, which you can interact with. The renderHook function accepts the following arguments: Callback is a function that is called each render of the test component. This function should call one or more hooks for testing. The props passed into the callback will be the initialProps provided in the options to renderHook, unless new props are provided by a subsequent rerender call."},{title:"Queries",routePath:"/12.x/docs/api/queries",lang:"en",toc:[{id:"accessing-queries",text:"Accessing queries",depth:2,charIndex:223},{id:"using-screen-object",text:"Using `screen` object",depth:3,charIndex:379},{id:"using-render-result",text:"Using `render` result",depth:3,charIndex:759},{id:"query-parts",text:"Query parts",depth:2,charIndex:1099},{id:"query-variant",text:"Query variant",depth:2,charIndex:1355},{id:"get-by",text:"`getBy*` queries",depth:3,charIndex:2045},{id:"get-all-by",text:"`getAllBy*` queries",depth:3,charIndex:2305},{id:"query-by",text:"`queryBy*` queries",depth:3,charIndex:2488},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3,charIndex:2790},{id:"find-by",text:"`findBy*` queries",depth:3,charIndex:2992},{id:"find-all-by",text:"`findAllBy*` queries",depth:3,charIndex:3403},{id:"query-predicates",text:"Query predicates",depth:2,charIndex:4166},{id:"by-role",text:"`*ByRole`",depth:3,charIndex:4481},{id:"by-role-options",text:"Options",depth:4,charIndex:5680},{id:"by-label-text",text:"`*ByLabelText`",depth:3,charIndex:8348},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3,charIndex:8946},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3,charIndex:9516},{id:"by-text",text:"`*ByText`",depth:3,charIndex:10060},{id:"by-hint-text",text:"`*ByHintText`",depth:3,charIndex:10737},{id:"by-test-id",text:"`*ByTestId`",depth:3,charIndex:11543},{id:"common-options",text:"Common options",depth:3,charIndex:12479},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4,charIndex:12735},{id:"textmatch-type",text:"TextMatch type",depth:2,charIndex:13628},{id:"examples",text:"Examples",depth:3,charIndex:13794},{id:"text-match-options",text:"Options",depth:3,charIndex:14598},{id:"precision",text:"Precision",depth:4,charIndex:14629},{id:"normalization",text:"Normalization",depth:4,charIndex:15475},{id:"legacy-unit-testing-helpers",text:"Legacy unit testing helpers",depth:2,charIndex:16961},{id:"unsafe_bytype",text:"`UNSAFE_ByType`",depth:3,charIndex:17362},{id:"unsafe_byprops",text:"`UNSAFE_ByProps`",depth:3,charIndex:17669}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/queries.mdx",description:"Queries are one of the main building blocks for the React Native Testing Library. They enable you to find relevant elements in the element tree, which represents your application's user interface when running under tests."},{title:"`render` function",routePath:"/12.x/docs/api/render",lang:"en",toc:[{id:"render-options",text:"Options",depth:3,charIndex:651},{id:"wrapper-option",text:"`wrapper` option",depth:4,charIndex:806},{id:"concurrent-root",text:"`concurrentRoot` option",depth:4,charIndex:1099},{id:"createnodemock-option",text:"`createNodeMock` option",depth:4,charIndex:1291},{id:"unstable_validatestringsrenderedwithintext-option",text:"`unstable_validateStringsRenderedWithinText` option",depth:4,charIndex:1577},{id:"render-result",text:"Result",depth:3,charIndex:2366}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/render.mdx",description:"The render 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 components' structure. When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases, it's convenient to create your own custom render method. Follow this great guide on how to set this up. Options {#render-options} The behavior of the render method can be customized by passing various options as a second argument of the RenderOptions type: wrapper option This option allows you to wrap the tested component, passed as the first option to the render() function, in an additional wrapper component. This is useful for creating reusable custom render functions for common React Context providers. concurrentRoot option {#concurrent-root} Set to true to enable concurrent rendering used in the React Native New Architecture. Otherwise render will default to legacy synchronous rendering. createNodeMock option This option allows you to pass createNodeMock option to ReactTestRenderer.create() method in order to allow for custom mock refs. You can learn more about this option from React Test Renderer documentation. unstable_validateStringsRenderedWithinText option This experimental option allows you to replicate React Native behavior of throwing Invariant Violation: Text strings must be rendered within a component error when you try to render string value under components different than , e.g., under . React Test Renderer does not enforce this check; hence, by default, React Native Testing Library also does not check this. That might result in runtime errors when running your code on a device, while the code works without errors in tests. Result {#render-result} The render function returns the same queries and utilities as the screen object. We recommended using the screen object as more developer-friendly way. See this article from Kent C. Dodds for more details."},{title:"`screen` object",routePath:"/12.x/docs/api/screen",lang:"en",toc:[{id:"queries",text:"`...queries`",depth:3,charIndex:588},{id:"example",text:"Example",depth:4,charIndex:773},{id:"rerender",text:"`rerender`",depth:3,charIndex:875},{id:"unmount",text:"`unmount`",depth:3,charIndex:1281},{id:"debug",text:"`debug`",depth:3,charIndex:1549},{id:"debug-message-option",text:"`message` option",depth:4,charIndex:1699},{id:"debug-map-props-option",text:"`mapProps` option",depth:4,charIndex:1997},{id:"tojson",text:"`toJSON`",depth:3,charIndex:2988},{id:"root",text:"`root`",depth:3,charIndex:3122},{id:"unsafe_root",text:"`UNSAFE_root`",depth:3,charIndex:3346}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/screen.mdx",description:"The screen object offers a recommended way to access queries and utilities for the currently rendered UI. This object is assigned after the render call and cleared after each test by calling cleanup. If no render call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access. ...queries The most important feature of screen is providing a set of helpful queries that allow you to find certain elements in the view hierarchy. See Queries for a complete list. Example rerender Also available under update alias Re-render the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and key) as the previous element, the tree will be updated; otherwise, it will re-mount a new tree, in both cases triggering the appropriate lifecycle events. unmount Unmount the in-memory tree, triggering the appropriate lifecycle events. debug Pretty prints deeply rendered component passed to render. message option {#debug-message-option} You can provide a message that will be printed on top. logs optional message and colored JSX: mapProps option {#debug-map-props-option} You can use the mapProps option to transform the props that will be printed : This will log the rendered JSX without the style props. The children prop cannot be filtered out so the following will print all rendered components with all props but children filtered out. This option can be used to target specific props when debugging a query (for instance, keeping only the children prop when debugging a getByText query). You can also transform prop values so that they are more readable (e.g., flatten styles). Or remove props that have little value when debugging tests, e.g. path prop for svgs toJSON Get the rendered component JSON representation, e.g. for snapshot testing. root Returns the rendered root host element. This API is primarily useful for component tests, as it allows you to access root host view without using *ByTestId queries or similar methods. UNSAFE_root Returns the rendered composite root element."},{title:"Community resources",routePath:"/12.x/docs/guides/community-resources",lang:"en",toc:[{id:"recommended-content",text:"Recommended content",depth:2,charIndex:0},{id:"older-potentially-outdated-content",text:"Older, potentially outdated content",depth:2,charIndex:569}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/guides/community-resources.mdx"},{title:"FAQ",routePath:"/12.x/docs/guides/faq",lang:"en",toc:[{id:"can-i-test-the-native-features-of-react-native-apps",text:"Can I test the native features of React Native apps?",depth:2,charIndex:0},{id:"should-i-usemigrate-to-screen-queries",text:"Should I use/migrate to `screen` queries?",depth:2,charIndex:1188},{id:"should-i-usemigrate-to-user-event-interactions",text:"Should I use/migrate to User Event interactions?",depth:2,charIndex:1568}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/guides/faq.mdx"},{title:"How should I query?",routePath:"/12.x/docs/guides/how-to-query",lang:"en",toc:[{id:"query-parts",text:"Query parts",depth:2,charIndex:270},{id:"query-variant",text:"Query variant",depth:2,charIndex:528},{id:"idiomatic-query-variants",text:"Idiomatic query variants",depth:3,charIndex:1218},{id:"query-predicate",text:"Query predicate",depth:2,charIndex:2140},{id:"idiomatic-query-predicates",text:"Idiomatic query predicates",depth:3,charIndex:2704},{id:"by-role-query",text:"1. By Role query",depth:3,charIndex:3200},{id:"by-role-query-name-option",text:"Name option",depth:4,charIndex:4257},{id:"text-input-queries",text:"2. Text input queries",depth:3,charIndex:4796},{id:"other-accessible-queries",text:"3. Other accessible queries",depth:3,charIndex:5593},{id:"test-id-query",text:"4. Test ID query",depth:3,charIndex:6022}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/guides/how-to-query.mdx",description:"React Native Testing Library provides various query types, allowing great flexibility in finding views appropriate for your tests. At the same time, the number of queries might be confusing. This guide aims to help you pick the correct queries for your test scenarios."},{title:"Troubleshooting",routePath:"/12.x/docs/guides/troubleshooting",lang:"en",toc:[{id:"matching-react-native-react--react-test-renderer-versions",text:"Matching React Native, React & React Test Renderer versions",depth:2,charIndex:113},{id:"example-repository",text:"Example repository",depth:2,charIndex:985},{id:"undefined-component-error",text:"Undefined component error",depth:2,charIndex:1232},{id:"mocking-react-native",text:"Mocking React Native",depth:3,charIndex:2327},{id:"act-warnings",text:"Act warnings",depth:2,charIndex:2655}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/guides/troubleshooting.mdx",description:"This guide describes common issues found by users when integrating React Native Test Library to their projects:"},{title:"Migration to built-in Jest matchers",routePath:"/12.x/docs/migration/jest-matchers",lang:"en",toc:[{id:"general-notes",text:"General notes",depth:2,charIndex:116},{id:"usage",text:"Usage",depth:2,charIndex:528},{id:"gradual-migration",text:"Gradual migration",depth:3,charIndex:720},{id:"migration-details",text:"Migration details",depth:2,charIndex:1214},{id:"matchers-not-requiring-changes",text:"Matchers not requiring changes",depth:3,charIndex:1233},{id:"replaced-matchers",text:"Replaced matchers",depth:3,charIndex:1517},{id:"added-matchers",text:"Added matchers",depth:3,charIndex:1897},{id:"noteworthy-details",text:"Noteworthy details",depth:3,charIndex:1957}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/jest-matchers.mdx",description:"This guide describes the steps necessary to migrate from legacy Jest Native matchers v5 to built-in Jest matchers."},{title:"Migration to 11.x",routePath:"/12.x/docs/migration/previous/v11",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:150},{id:"update-to-jest-28-if-you-use-fake-timers",text:"Update to Jest 28 if you use fake timers",depth:3,charIndex:168},{id:"refactor-legacy-waitforoptions-position",text:"Refactor legacy `waitForOptions` position",depth:3,charIndex:391},{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",text:'Triggering non-touch events on targets with `pointerEvents="box-none"` prop',depth:3,charIndex:1335},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:1684}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/previous/v11.mdx",description:"Migration to React Native Testing Library version 11 from version 9.x or 10.x should be a relatively easy task due small amount of breaking changes."},{title:"Migration to 2.x",routePath:"/12.x/docs/migration/previous/v2",lang:"en",toc:[{id:"dropping-node-8",text:"Dropping Node 8",depth:2,charIndex:97},{id:"auto-cleanup",text:"Auto Cleanup",depth:2,charIndex:320},{id:"waitfor-api-changes",text:"WaitFor API changes",depth:2,charIndex:1327},{id:"removed-global-debug-function",text:"Removed global `debug` function",depth:2,charIndex:2107},{id:"removed-global-shallow-function",text:"Removed global `shallow` function",depth:2,charIndex:2256},{id:"removed-functions",text:"Removed functions",depth:2,charIndex:2725},{id:"some-bytestid-queries-behavior-changes",text:"Some `ByTestId` queries behavior changes",depth:2,charIndex:3422},{id:"deprecated-flushmicrotasksqueue",text:"Deprecated `flushMicrotasksQueue`",depth:2,charIndex:4166}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/previous/v2.mdx",description:"This guide describes steps necessary to migrate from React Native Testing Library v1.x to v2.x."},{title:"Migration to 7.x",routePath:"/12.x/docs/migration/previous/v7",lang:"en",toc:[{id:"guide-for-react-native-testing-library-users",text:"Guide for `react-native-testing-library` users",depth:2,charIndex:304},{id:"renaming-the-library",text:"Renaming the library",depth:3,charIndex:455},{id:"new-aliases",text:"New aliases",depth:3,charIndex:1339},{id:"renaming-byplaceholder-queries",text:"Renaming `ByPlaceholder` queries",depth:3,charIndex:1747},{id:"fireevent-support-for-disabled-components",text:"`fireEvent` support for disabled components",depth:3,charIndex:2059},{id:"guide-for-testing-libraryreact-native-users",text:"Guide for `@testing-library/react-native` users",depth:2,charIndex:2528},{id:"renaming-wait-helpers",text:'Renaming "wait" helpers',depth:3,charIndex:2843},{id:"changes-to-bytestid-queries",text:"Changes to `ByTestId` queries",depth:3,charIndex:2987},{id:"no-bytitle-queries",text:"No `ByTitle` queries",depth:3,charIndex:3144},{id:"no-custom-jest-configuration",text:"No custom Jest configuration",depth:3,charIndex:3591},{id:"cleanup-is-included-by-default",text:"Cleanup is included by default",depth:3,charIndex:3974},{id:"no-nativetestinstance-abstraction",text:"No NativeTestInstance abstraction",depth:3,charIndex:4467},{id:"no-container-nor-baseelement-returned-from-render",text:"No `container` nor `baseElement` returned from `render`",depth:3,charIndex:4671},{id:"firing-events-changes",text:"Firing events changes",depth:3,charIndex:4973}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/previous/v7.mdx",description:"As the version 7.0 involves merging two libraries together, there are two variants for migration guide, dependent on library you used previously:"},{title:"Migration to 9.x",routePath:"/12.x/docs/migration/previous/v9",lang:"en",toc:[{id:"support-for-text-match-options-aka-string-precision-api",text:"Support for text match options a.k.a string precision API",depth:2,charIndex:281},{id:"reverted-matching-text-across-several-nodes",text:"Reverted matching text across several nodes",depth:2,charIndex:1275},{id:"future-plans",text:"Future plans",depth:2,charIndex:2038}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/previous/v9.mdx",description:"Version 7.0 brought React Native Testing Library into the @testing-library family. Since it has been implemented independently from its web counterpart – the React Testing Library – there are some differences in the API and behavior. Version 9.0 solves several of these problems."},{title:"Migration to 12.x",routePath:"/12.x/docs/migration/v12",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:489},{id:"1-all-queries-exclude-elements-hidden-from-accessibility-by-default",text:"1. All queries exclude elements hidden from accessibility by default",depth:3,charIndex:507},{id:"2-byrole-queries-now-return-only-accessibility-elements",text:"2. `*ByRole` queries now return only accessibility elements",depth:3,charIndex:1122},{id:"examples",text:"Examples",depth:4,charIndex:1510},{id:"3-bytext-bydisplayvalue-byplaceholdertext-queries-now-return-host-elements",text:"3. `*ByText`, `*ByDisplayValue`, `*ByPlaceholderText` queries now return host elements",depth:3,charIndex:2192},{id:"4-container-api-has-been-renamed-to-unsafe_root",text:"4. `container` API has been renamed to `UNSAFE_root`.",depth:3,charIndex:2754},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:3457}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/v12.mdx",description:"React Native Testing Library 12 introduces a handful of breaking changes compared to 11.x versions. We believe they were necessary to improve the experience using the library and help the users fall into the pit of success when writing meaningful tests. You will find migration instructions for each and every change described below."},{title:"Introduction",routePath:"/12.x/docs/start/intro",lang:"en",toc:[{id:"the-problem",text:"The problem",depth:2,charIndex:0},{id:"this-solution",text:"This solution",depth:2,charIndex:474},{id:"example",text:"Example",depth:2,charIndex:977}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/start/intro.md"},{title:"Quick Start",routePath:"/12.x/docs/start/quick-start",lang:"en",toc:[{id:"installation",text:"Installation",depth:2,charIndex:0},{id:"jest-matchers",text:"Jest matchers",depth:3,charIndex:360},{id:"eslint-plugin",text:"ESLint plugin",depth:3,charIndex:567}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/start/quick-start.mdx"},{title:"",routePath:"/12.x/",lang:"en",toc:[],frontmatter:{pageType:"home",hero:{image:{src:{light:"/img/logo-light.svg",dark:"/img/logo-dark.svg"}},name:"JavaScript Integration testing for React Native",tagline:"The more your tests resemble the way your software is used, the more confidence they can give you.
      — Kent C. Dodds",actions:[{theme:"brand",text:"Quick Start",link:"/12.x/docs/start/quick-start"},{theme:"alt",text:"Explore API",link:"/12.x/docs/api"}]},features:[{title:"Maintainable",details:"Write maintainable tests for your React Native apps.",icon:''},{title:"Reliable",details:"Promotes testing public APIs and avoiding implementation details.",icon:''},{title:"Community Driven",details:"Supported by React Native community and its core contributors.",icon:''}]},version:"12.x",_relativePath:"12.x/index.md"},{title:"Network Requests",routePath:"/cookbook/advanced/network-requests",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"phonebook-example",text:"Phonebook Example",depth:2,charIndex:531},{id:"start-testing-with-a-simple-test",text:"Start testing with a simple test",depth:2,charIndex:4753},{id:"testing-error-handling",text:"Testing error handling",depth:2,charIndex:7847},{id:"global-guarding-against-unwanted-api-requests",text:"Global guarding against unwanted API requests",depth:2,charIndex:9680},{id:"conclusion",text:"Conclusion",depth:2,charIndex:10698},{id:"further-reading-and-alternatives",text:"Further Reading and Alternatives",depth:2,charIndex:11233}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/advanced/network-requests.md"},{title:"Async tests",routePath:"/cookbook/basics/async-tests",lang:"en",toc:[{id:"summary",text:"Summary",depth:2,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:875},{id:"async-utilities",text:"Async utilities",depth:2,charIndex:2017},{id:"findby-queries",text:"`findBy*` queries",depth:3,charIndex:2105},{id:"example-1",text:"Example",depth:4,charIndex:2833},{id:"waitfor-function",text:"`waitFor` function",depth:3,charIndex:3077},{id:"example-2",text:"Example",depth:4,charIndex:3599},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3,charIndex:3821},{id:"example-3",text:"Example",depth:4,charIndex:4413},{id:"fake-timers",text:"Fake Timers",depth:2,charIndex:4488}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/basics/async-tests.md"},{title:"Custom `render` function",routePath:"/cookbook/basics/custom-render",lang:"en",toc:[{id:"summary",text:"Summary",depth:3,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:291},{id:"more-info",text:"More info",depth:3,charIndex:1107},{id:"additional-params",text:"Additional params",depth:4,charIndex:1118},{id:"multiple-functions",text:"Multiple functions",depth:4,charIndex:1440},{id:"async-function",text:"Async function",depth:4,charIndex:1729}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/basics/custom-render.md",description:"Summary RNTL exposes the render function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests. Example Example full source code. More info Additional params A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management. Multiple functions Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens. Async function Make it async if you want to put some async setup in your custom render function."},{title:"Introduction",routePath:"/cookbook/",lang:"en",toc:[{id:"whats-inside-the-cookbook",text:"What's Inside the Cookbook?",depth:2,charIndex:431},{id:"whats-next",text:"What's Next?",depth:2,charIndex:1024}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/index.md",description:"Welcome to the React Native Testing Library (RNTL) Cookbook! This app is your go-to resource for learning how to effectively test React Native applications. It provides a collection of best practices, ready-made recipes, and tips & tricks to simplify and improve your testing workflow. Whether you’re a beginner just getting started or a seasoned developer looking to sharpen your skills, the Cookbook has something for everyone."},{title:"Jotai",routePath:"/cookbook/state-management/jotai",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"task-list-example",text:"Task List Example",depth:2,charIndex:332},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2,charIndex:1433},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2,charIndex:1898},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2,charIndex:3543},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2,charIndex:4793},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2,charIndex:5396},{id:"conclusion",text:"Conclusion",depth:2,charIndex:6072}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/state-management/jotai.md"},{title:"Testing environment",routePath:"/docs/advanced/testing-env",lang:"en",toc:[{id:"react-renderers",text:"React renderers",depth:2,charIndex:660},{id:"react-test-renderer",text:"React Test Renderer",depth:2,charIndex:1371},{id:"element-tree",text:"Element tree",depth:2,charIndex:2718},{id:"host-and-composite-components",text:"Host and composite components",depth:2,charIndex:3524},{id:"differentiating-between-host-and-composite-elements",text:"Differentiating between host and composite elements",depth:3,charIndex:5446},{id:"tree-nodes",text:"Tree nodes",depth:2,charIndex:5955},{id:"asserting-props",text:"Asserting props",depth:3,charIndex:6263},{id:"tree-navigation",text:"Tree navigation",depth:2,charIndex:7103},{id:"queries",text:"Queries",depth:2,charIndex:7840}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/advanced/testing-env.mdx",description:"React Native Testing Library allows you to write integration and component tests for your React Native app or library. While the JSX code used in tests closely resembles your React Native app, things aren't as simple as they might appear. This document describes the key elements of our testing environment and highlights things to be aware of when writing more advanced tests or diagnosing issues."},{title:"Third-Party Library Integration",routePath:"/docs/advanced/third-party-integration",lang:"en",toc:[{id:"handling-events-in-third-party-libraries",text:"Handling Events in Third-Party Libraries",depth:2,charIndex:230},{id:"example-react-native-gesture-handler",text:"Example: React Native Gesture Handler",depth:3,charIndex:1009}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/advanced/third-party-integration.mdx",description:"The React Native Testing Library is designed to simulate the core behaviors of React Native. However, it doesn't replicate the internal logic of third-party libraries. This guide explains how to integrate your library with RNTL."},{title:"Understanding `act` function",routePath:"/docs/advanced/understanding-act",lang:"en",toc:[{id:"act-warnings",text:"`act` warnings",depth:2,charIndex:236},{id:"synchronous-act",text:"Synchronous `act`",depth:2,charIndex:931},{id:"responsibility",text:"Responsibility",depth:3,charIndex:948},{id:"when-to-use-act",text:"When to use act",depth:3,charIndex:2702},{id:"implementation",text:"Implementation",depth:3,charIndex:3738},{id:"asynchronous-act",text:"Asynchronous `act`",depth:2,charIndex:4199},{id:"asynchronous-code",text:"Asynchronous code",depth:3,charIndex:4725},{id:"solution-with-fake-timers",text:"Solution with fake timers",depth:3,charIndex:5966},{id:"solution-with-real-timers",text:"Solution with real timers",depth:3,charIndex:6469},{id:"async-act-warning",text:"Async act warning",depth:3,charIndex:7902},{id:"references",text:"References",depth:2,charIndex:8518}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/advanced/understanding-act.mdx",description:"When writing RNTL tests, one of the things that confuses developers the most are cryptic act() function errors logged to the console. This article explains the purpose and behavior of act() so you can write tests with more confidence."},{title:"API Overview",routePath:"/docs/api",lang:"en",toc:[],frontmatter:{uri:"/api"},version:"13.x",_relativePath:"13.x/docs/api.md",description:"React Native Testing Library consists of following APIs: render function - render your UI components for testing purposesscreen object - access rendered UI:Queries - find relevant components by various predicates: role, text, test ids, etcLifecycle methods: rerender, unmountHelpers: debug, toJSON, rootJest matchers - validate assumptions about your UIUser Event - simulate common user interactions like press or type in a realistic wayFire Event - simulate any component event in a simplified way purposesMisc APIs:renderHook function - render hooks for testingAsync utils: findBy* queries, wait, waitForElementToBeRemovedConfiguration: configure, resetToDefaultsAccessibility: isHiddenFromAccessibilityOther: within, act, cleanup"},{title:"Fire Event API",routePath:"/docs/api/events/fire-event",lang:"en",toc:[{id:"fire-event",text:"`fireEvent`",depth:2,charIndex:0},{id:"press",text:"`fireEvent.press`",depth:3,charIndex:1835},{id:"change-text",text:"`fireEvent.changeText`",depth:3,charIndex:2532},{id:"scroll",text:"`fireEvent.scroll`",depth:3,charIndex:3202},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4,charIndex:3600},{id:"fire-event-async",text:"`fireEventAsync`",depth:2,charIndex:4097},{id:"async-press",text:"`fireEventAsync.press`",depth:3,charIndex:4952},{id:"async-change-text",text:"`fireEventAsync.changeText`",depth:3,charIndex:5390},{id:"async-scroll",text:"`fireEventAsync.scroll`",depth:3,charIndex:5900}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/events/fire-event.mdx"},{title:"User Event interactions",routePath:"/docs/api/events/user-event",lang:"en",toc:[{id:"comparison-with-fire-event-api",text:"Comparison with Fire Event API",depth:2,charIndex:0},{id:"setup",text:"`setup()`",depth:2,charIndex:1118},{id:"setup-options",text:"Options",depth:3,charIndex:1352},{id:"press",text:"`press()`",depth:2,charIndex:1613},{id:"longpress",text:"`longPress()`",depth:2,charIndex:2303},{id:"longpress-options",text:"Options",depth:3,charIndex:3153},{id:"type",text:"`type()`",depth:2,charIndex:3263},{id:"type-options",text:"Options",depth:3,charIndex:3922},{id:"type-sequence",text:"Sequence of events",depth:3,charIndex:4202},{id:"clear",text:"`clear()`",depth:2,charIndex:4931},{id:"clear-sequence",text:"Sequence of events",depth:3,charIndex:5231},{id:"paste",text:"`paste()`",depth:2,charIndex:5514},{id:"paste-sequence",text:"Sequence of events",depth:3,charIndex:5845},{id:"scroll-to",text:"`scrollTo()`",depth:2,charIndex:6116},{id:"scroll-to-options",text:"Options",depth:3,charIndex:7512},{id:"scroll-sequence",text:"Sequence of events",depth:3,charIndex:8502}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/events/user-event.mdx"},{title:"Jest matchers",routePath:"/docs/api/jest-matchers",lang:"en",toc:[{id:"setup",text:"Setup",depth:2,charIndex:117},{id:"migration-from-legacy-jest-native-matchers",text:"Migration from legacy Jest Native matchers",depth:2,charIndex:217},{id:"checking-element-existence",text:"Checking element existence",depth:2,charIndex:327},{id:"tobeonthescreen",text:"`toBeOnTheScreen()`",depth:3,charIndex:355},{id:"element-content",text:"Element Content",depth:2,charIndex:543},{id:"tohavetextcontent",text:"`toHaveTextContent()`",depth:3,charIndex:560},{id:"tocontainelement",text:"`toContainElement()`",depth:3,charIndex:863},{id:"tobeemptyelement",text:"`toBeEmptyElement()`",depth:3,charIndex:1016},{id:"checking-element-state",text:"Checking element state",depth:2,charIndex:1135},{id:"tohavedisplayvalue",text:"`toHaveDisplayValue()`",depth:3,charIndex:1159},{id:"tohaveaccessibilityvalue",text:"`toHaveAccessibilityValue()`",depth:3,charIndex:1466},{id:"tobeenabled",text:"`toBeEnabled()` / `toBeDisabled`",depth:3,charIndex:1964},{id:"tobeselected",text:"`toBeSelected()`",depth:3,charIndex:2342},{id:"tobechecked",text:"`toBeChecked()` / `toBePartiallyChecked()`",depth:3,charIndex:2487},{id:"tobeexpanded",text:"`toBeExpanded()` / `toBeCollapsed()`",depth:3,charIndex:2905},{id:"tobebusy",text:"`toBeBusy()`",depth:3,charIndex:3323},{id:"checking-element-style",text:"Checking element style",depth:2,charIndex:3448},{id:"tobevisible",text:"`toBeVisible()`",depth:3,charIndex:3472},{id:"tohavestyle",text:"`toHaveStyle()`",depth:3,charIndex:3683},{id:"other-matchers",text:"Other matchers",depth:2,charIndex:3801},{id:"tohaveaccessiblename",text:"`toHaveAccessibleName()`",depth:3,charIndex:3817},{id:"tohaveprop",text:"`toHaveProp()`",depth:3,charIndex:4405}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/jest-matchers.mdx",description:"This guide describes built-in Jest matchers. These matchers provide readable assertions with accessibility support."},{title:"Accessibility",routePath:"/docs/api/misc/accessibility",lang:"en",toc:[{id:"ishiddenfromaccessibility",text:"`isHiddenFromAccessibility`",depth:2,charIndex:0}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/accessibility.mdx"},{title:"Async utilities",routePath:"/docs/api/misc/async",lang:"en",toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2,charIndex:0},{id:"waitfor",text:"`waitFor`",depth:2,charIndex:181},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2,charIndex:3467}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/async.mdx"},{title:"Configuration",routePath:"/docs/api/misc/config",lang:"en",toc:[{id:"configure",text:"`configure`",depth:2,charIndex:0},{id:"asyncutiltimeout-option",text:"`asyncUtilTimeout` option",depth:3,charIndex:207},{id:"defaultincludehiddenelements-option",text:"`defaultIncludeHiddenElements` option",depth:3,charIndex:363},{id:"defaultdebugoptions-option",text:"`defaultDebugOptions` option",depth:3,charIndex:734},{id:"concurrent-root",text:"`concurrentRoot` option",depth:3,charIndex:904},{id:"resettodefaults",text:"`resetToDefaults()`",depth:2,charIndex:1093},{id:"environment-variables",text:"Environment variables",depth:2,charIndex:1143},{id:"rntl_skip_auto_cleanup",text:"`RNTL_SKIP_AUTO_CLEANUP`",depth:3,charIndex:1166},{id:"rntl_skip_auto_detect_fake_timers",text:"`RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS`",depth:3,charIndex:1417}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/config.mdx"},{title:"Other helpers",routePath:"/docs/api/misc/other",lang:"en",toc:[{id:"within",text:"`within`, `getQueriesForElement`",depth:2,charIndex:0},{id:"act",text:"`act`",depth:2,charIndex:966},{id:"cleanup",text:"`cleanup`",depth:2,charIndex:1306}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/other.mdx"},{title:"`renderHook` function",routePath:"/docs/api/misc/render-hook",lang:"en",toc:[{id:"renderhook",text:"`renderHook`",depth:2,charIndex:0},{id:"options",text:"`options`",depth:3,charIndex:1305},{id:"initial-props",text:"`initialProps`",depth:4,charIndex:1436},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:1631},{id:"concurrent-root",text:"`concurrentRoot`",depth:3,charIndex:1816},{id:"result",text:"Result",depth:3,charIndex:2002},{id:"result-1",text:"`result`",depth:4,charIndex:2225},{id:"rerender",text:"`rerender`",depth:4,charIndex:2442},{id:"unmount",text:"`unmount`",depth:4,charIndex:2721},{id:"examples",text:"Examples",depth:3,charIndex:2843},{id:"with-initialprops",text:"With `initialProps`",depth:4,charIndex:2917},{id:"with-wrapper",text:"With `wrapper`",depth:4,charIndex:3567},{id:"renderhookasync-function",text:"`renderHookAsync` function",depth:2,charIndex:3848},{id:"result-async",text:"Result",depth:3,charIndex:4440}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/render-hook.mdx"},{title:"Queries",routePath:"/docs/api/queries",lang:"en",toc:[{id:"accessing-queries",text:"Accessing queries",depth:2,charIndex:203},{id:"using-screen-object",text:"Using `screen` object",depth:3,charIndex:366},{id:"using-render-result",text:"Using `render` result",depth:3,charIndex:708},{id:"query-parts",text:"Query parts",depth:2,charIndex:1020},{id:"query-variant",text:"Query variant",depth:2,charIndex:1222},{id:"get-by",text:"`getBy*` queries",depth:3,charIndex:1901},{id:"get-all-by",text:"`getAllBy*` queries",depth:3,charIndex:2155},{id:"query-by",text:"`queryBy*` queries",depth:3,charIndex:2338},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3,charIndex:2639},{id:"find-by",text:"`findBy*` queries",depth:3,charIndex:2841},{id:"find-all-by",text:"`findAllBy*` queries",depth:3,charIndex:3252},{id:"query-predicates",text:"Query predicates",depth:2,charIndex:4008},{id:"by-role",text:"`*ByRole`",depth:3,charIndex:4327},{id:"by-role-options",text:"Options",depth:4,charIndex:5518},{id:"by-label-text",text:"`*ByLabelText`",depth:3,charIndex:8198},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3,charIndex:8804},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3,charIndex:9372},{id:"by-text",text:"`*ByText`",depth:3,charIndex:9925},{id:"by-hint-text",text:"`*ByHintText`",depth:3,charIndex:10597},{id:"by-test-id",text:"`*ByTestId`",depth:3,charIndex:11403},{id:"common-options",text:"Common options",depth:3,charIndex:12319},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4,charIndex:12579},{id:"textmatch-type",text:"TextMatch type",depth:2,charIndex:13464},{id:"examples",text:"Examples",depth:3,charIndex:13623},{id:"text-match-options",text:"Options",depth:3,charIndex:14427},{id:"precision",text:"Precision",depth:4,charIndex:14458},{id:"normalization",text:"Normalization",depth:4,charIndex:15300},{id:"legacy-unit-testing-helpers",text:"Legacy unit testing helpers",depth:2,charIndex:16777},{id:"unsafe_bytype",text:"`UNSAFE_ByType`",depth:3,charIndex:17174},{id:"unsafe_byprops",text:"`UNSAFE_ByProps`",depth:3,charIndex:17482}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/queries.mdx",description:"Queries are one of the main building blocks of React Native Testing Library. They let you find elements in the element tree, which represents your application's user interface when running under tests."},{title:"`render` API",routePath:"/docs/api/render",lang:"en",toc:[{id:"render",text:"`render` function",depth:2,charIndex:0},{id:"options",text:"Options",depth:3,charIndex:678},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:815},{id:"concurrent-root",text:"`concurrentRoot`",depth:4,charIndex:1101},{id:"create-node-mock",text:"`createNodeMock`",depth:4,charIndex:1287},{id:"unstable_validatestringsrenderedwithintext",text:"`unstable_validateStringsRenderedWithinText`",depth:4,charIndex:1586},{id:"result",text:"Result",depth:3,charIndex:2368},{id:"render-async",text:"`renderAsync` function",depth:2,charIndex:2592},{id:"options-1",text:"Options",depth:3,charIndex:3222},{id:"result-1",text:"Result",depth:3,charIndex:3280}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/render.mdx"},{title:"`screen` object",routePath:"/docs/api/screen",lang:"en",toc:[{id:"queries",text:"`...queries`",depth:3,charIndex:588},{id:"example",text:"Example",depth:4,charIndex:773},{id:"rerender",text:"`rerender`",depth:3,charIndex:875},{id:"rerenderasync",text:"`rerenderAsync`",depth:3,charIndex:1275},{id:"unmount",text:"`unmount`",depth:3,charIndex:1896},{id:"unmountasync",text:"`unmountAsync`",depth:3,charIndex:2166},{id:"debug",text:"`debug`",depth:3,charIndex:2646},{id:"debug-message-option",text:"`message` option",depth:4,charIndex:2796},{id:"debug-map-props-option",text:"`mapProps` option",depth:4,charIndex:3094},{id:"tojson",text:"`toJSON`",depth:3,charIndex:4081},{id:"root",text:"`root`",depth:3,charIndex:4215},{id:"unsafe_root",text:"`UNSAFE_root`",depth:3,charIndex:4443}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/screen.mdx",description:"The screen object offers a recommended way to access queries and utilities for the currently rendered UI. This object is assigned after the render call and cleared after each test by calling cleanup. If no render call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access. ...queries The most important feature of screen is providing a set of helpful queries that allow you to find certain elements in the view hierarchy. See Queries for a complete list. Example rerender Also available under update alias Re-renders the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and key) as the previous element, the tree is updated; otherwise, it re-mounts a new tree. In both cases, it triggers the appropriate lifecycle events. rerenderAsync Also available under updateAsync alias Async version of rerender designed for working with React 19 and React Suspense. This method uses async act internally to ensure all pending React updates are executed during updating. unmount Unmount the in-memory tree, triggering the appropriate lifecycle events. unmountAsync Async version of unmount designed for working with React 19 and React Suspense. This method uses async act internally to ensure all pending React updates are executed during unmounting. debug Pretty prints deeply rendered component passed to render. message option {#debug-message-option} You can provide a message that will be printed on top. logs optional message and colored JSX: mapProps option {#debug-map-props-option} You can use the mapProps option to transform the props that will be printed: This will log the rendered JSX without the style props. The children prop cannot be filtered out so the following will print all rendered components with all props but children filtered out. This option can be used to target specific props when debugging a query (for instance, keeping only the children prop when debugging a getByText query). You can also transform prop values to make them more readable (e.g., flatten styles). Or remove props that have little value when debugging tests, e.g., path prop for SVGs toJSON Get the rendered component JSON representation, e.g. for snapshot testing. root Returns the rendered root host element. This API is primarily useful for component tests, as it allows you to access the root host view without using *ByTestId queries or similar methods. UNSAFE_root Returns the rendered composite root element."},{title:"Common Mistakes with React Native Testing Library",routePath:"/docs/guides/common-mistakes",lang:"en",toc:[{id:"using-the-wrong-query",text:"Using the wrong query",depth:2,charIndex:606},{id:"not-using-byrole-most-of-the-time",text:"Not using `*ByRole` query most of the time",depth:2,charIndex:1615},{id:"using-the-wrong-assertion",text:"Using the wrong assertion",depth:2,charIndex:2735},{id:"using-query-variants-for-anything-except-checking-for-non-existence",text:"Using `query*` variants for anything except checking for non-existence",depth:2,charIndex:3592},{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",text:"Using `waitFor` to wait for elements that can be queried with `find*`",depth:2,charIndex:4340},{id:"performing-side-effects-in-waitfor",text:"Performing side-effects in `waitFor`",depth:2,charIndex:5149},{id:"using-unsafe-root-to-query-for-elements",text:"Using `UNSAFE_root` to query for elements",depth:2,charIndex:6093},{id:"passing-an-empty-callback-to-waitfor",text:"Passing an empty callback to `waitFor`",depth:2,charIndex:6883},{id:"not-using-screen",text:"Not using `screen`",depth:2,charIndex:7336},{id:"wrapping-things-in-act-unnecessarily",text:"Wrapping things in `act` unnecessarily",depth:2,charIndex:8030},{id:"not-using-user-event-api",text:"Not using User Event API",depth:2,charIndex:8903},{id:"not-querying-by-text",text:"Not querying by text",depth:2,charIndex:10063},{id:"not-using-testing-library-eslint-plugins",text:"Not using Testing Library ESLint plugins",depth:2,charIndex:10623},{id:"using-cleanup",text:"Using `cleanup`",depth:2,charIndex:11283},{id:"using-get-variants-as-assertions",text:"Using `get*` variants as assertions",depth:2,charIndex:11880},{id:"having-multiple-assertions-in-a-single-waitfor-callback",text:"Having multiple assertions in a single `waitFor` callback",depth:2,charIndex:12692},{id:"using-wrapper-as-the-variable-name",text:"Using `wrapper` as the variable name",depth:2,charIndex:13749},{id:"summary",text:"Summary",depth:2,charIndex:14603}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/common-mistakes.mdx",description:'Note: This guide is adapted from Kent C. Dodds\' article "Common mistakes with React Testing Library" for React Native Testing Library v13. The original article focuses on web React, but the principles apply to React Native as well. This adaptation includes React Native-specific examples and ARIA-compatible accessibility attributes. React Native Testing Library guiding principle is: "The more your tests resemble the way your software is used, the more confidence they can give you." This guide outlines some common mistakes people make when using React Native Testing Library and how to avoid them.'},{title:"Community resources",routePath:"/docs/guides/community-resources",lang:"en",toc:[{id:"recommended-content",text:"Recommended content",depth:2,charIndex:0},{id:"older-potentially-outdated-content",text:"Older, potentially outdated content",depth:2,charIndex:569}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/community-resources.mdx"},{title:"FAQ",routePath:"/docs/guides/faq",lang:"en",toc:[{id:"can-i-test-the-native-features-of-react-native-apps",text:"Can I test the native features of React Native apps?",depth:2,charIndex:0},{id:"should-i-usemigrate-to-screen-queries",text:"Should I use/migrate to `screen` queries?",depth:2,charIndex:1188},{id:"should-i-usemigrate-to-user-event-interactions",text:"Should I use/migrate to User Event interactions?",depth:2,charIndex:1568}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/faq.mdx"},{title:"How should I query?",routePath:"/docs/guides/how-to-query",lang:"en",toc:[{id:"query-parts",text:"Query parts",depth:2,charIndex:203},{id:"query-variant",text:"Query variant",depth:2,charIndex:461},{id:"idiomatic-query-variants",text:"Idiomatic query variants",depth:3,charIndex:1151},{id:"query-predicate",text:"Query predicate",depth:2,charIndex:2073},{id:"idiomatic-query-predicates",text:"Idiomatic query predicates",depth:3,charIndex:2637},{id:"by-role-query",text:"1. By Role query",depth:3,charIndex:3086},{id:"by-role-query-name-option",text:"Name option",depth:4,charIndex:4143},{id:"text-input-queries",text:"2. Text input queries",depth:3,charIndex:4682},{id:"other-accessible-queries",text:"3. Other accessible queries",depth:3,charIndex:5479},{id:"test-id-query",text:"4. Test ID query",depth:3,charIndex:5908}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/how-to-query.mdx",description:"React Native Testing Library provides various query types for finding views in your tests. The number of queries might be confusing. This guide helps you pick the right queries for your test scenarios."},{title:"LLM Guidelines for React Native Testing Library",routePath:"/docs/guides/llm-guidelines",lang:"en",toc:[{id:"core-apis",text:"Core APIs",depth:2,charIndex:87},{id:"render",text:"render",depth:3,charIndex:98},{id:"screen",text:"screen",depth:3,charIndex:563},{id:"renderhook",text:"renderHook",depth:3,charIndex:754},{id:"query-selection",text:"Query Selection",depth:2,charIndex:1129},{id:"assertions",text:"Assertions",depth:2,charIndex:1659},{id:"jest-matchers-reference",text:"Jest Matchers Reference",depth:2,charIndex:1885},{id:"user-interactions",text:"User Interactions",depth:2,charIndex:3349},{id:"userevent-preferred-async",text:"userEvent (Preferred, Async)",depth:3,charIndex:3522},{id:"fireevent-low-level-sync-in-v13",text:"fireEvent (Low-level, Sync in v13)",depth:3,charIndex:4089},{id:"sync-vs-async-apis-v13",text:"Sync vs Async APIs (v13)",depth:2,charIndex:4486},{id:"waitfor-usage",text:"waitFor Usage",depth:2,charIndex:4775},{id:"code-organization",text:"Code Organization",depth:2,charIndex:5114},{id:"quick-checklist",text:"Quick Checklist",depth:2,charIndex:5454},{id:"example-good-pattern",text:"Example: Good Pattern",depth:2,charIndex:5784},{id:"example-anti-patterns",text:"Example: Anti-Patterns",depth:2,charIndex:6898}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/llm-guidelines.mdx",description:"Actionable guidelines for writing tests with React Native Testing Library (RNTL) v13."},{title:"React 19 & Suspense Support",routePath:"/docs/guides/react-19",lang:"en",toc:[{id:"new-async-apis",text:"New async APIs",depth:2,charIndex:381},{id:"apis-that-remain-unchanged",text:"APIs that remain unchanged",depth:2,charIndex:723},{id:"what-changes-in-your-tests",text:"What changes in your tests",depth:2,charIndex:1026},{id:"making-tests-async",text:"Making tests async",depth:3,charIndex:1054},{id:"when-to-use-async-apis",text:"When to use async APIs",depth:3,charIndex:1540},{id:"migration-strategy",text:"Migration strategy",depth:2,charIndex:1770},{id:"new-projects",text:"New projects",depth:3,charIndex:1790},{id:"existing-projects",text:"Existing projects",depth:3,charIndex:1936},{id:"future-direction",text:"Future direction",depth:3,charIndex:2139}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/react-19.mdx",description:"React 19 introduced full support for React Suspense, React.use(), and other async rendering features to React Native 0.78.0. When testing components that use these features, React requires the async act helper to handle async state updates. This means React Native Testing Library needs new async versions of its core APIs. These async APIs work with both React 18 and React 19."},{title:"Troubleshooting",routePath:"/docs/guides/troubleshooting",lang:"en",toc:[{id:"matching-react-native-react--react-test-renderer-versions",text:"Matching React Native, React & React Test Renderer versions",depth:2,charIndex:113},{id:"example-repository",text:"Example repository",depth:2,charIndex:985},{id:"undefined-component-error",text:"Undefined component error",depth:2,charIndex:1232},{id:"mocking-react-native",text:"Mocking React Native",depth:3,charIndex:2327},{id:"act-warnings",text:"Act warnings",depth:2,charIndex:2655}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/troubleshooting.mdx",description:"This guide describes common issues found by users when integrating React Native Test Library to their projects:"},{title:"Migration to built-in Jest matchers",routePath:"/docs/migration/jest-matchers",lang:"en",toc:[{id:"general-notes",text:"General notes",depth:2,charIndex:116},{id:"usage",text:"Usage",depth:2,charIndex:528},{id:"gradual-migration",text:"Gradual migration",depth:3,charIndex:708},{id:"migration-details",text:"Migration details",depth:2,charIndex:1148},{id:"matchers-not-requiring-changes",text:"Matchers not requiring changes",depth:3,charIndex:1167},{id:"replaced-matchers",text:"Replaced matchers",depth:3,charIndex:1451},{id:"added-matchers",text:"Added matchers",depth:3,charIndex:1831},{id:"noteworthy-details",text:"Noteworthy details",depth:3,charIndex:1891}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/jest-matchers.mdx",description:"This guide describes the steps necessary to migrate from legacy Jest Native matchers v5 to built-in Jest matchers."},{title:"Migration to 11.x",routePath:"/docs/migration/previous/v11",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:150},{id:"update-to-jest-28-if-you-use-fake-timers",text:"Update to Jest 28 if you use fake timers",depth:3,charIndex:168},{id:"refactor-legacy-waitforoptions-position",text:"Refactor legacy `waitForOptions` position",depth:3,charIndex:391},{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",text:'Triggering non-touch events on targets with `pointerEvents="box-none"` prop',depth:3,charIndex:1335},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:1684}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v11.mdx",description:"Migration to React Native Testing Library version 11 from version 9.x or 10.x should be a relatively easy task due small amount of breaking changes."},{title:"Migration to 12.x",routePath:"/docs/migration/previous/v12",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:489},{id:"1-all-queries-exclude-elements-hidden-from-accessibility-by-default",text:"1. All queries exclude elements hidden from accessibility by default",depth:3,charIndex:507},{id:"2-byrole-queries-now-return-only-accessibility-elements",text:"2. `*ByRole` queries now return only accessibility elements",depth:3,charIndex:1122},{id:"examples",text:"Examples",depth:4,charIndex:1510},{id:"3-bytext-bydisplayvalue-byplaceholdertext-queries-now-return-host-elements",text:"3. `*ByText`, `*ByDisplayValue`, `*ByPlaceholderText` queries now return host elements",depth:3,charIndex:2192},{id:"4-container-api-has-been-renamed-to-unsafe_root",text:"4. `container` API has been renamed to `UNSAFE_root`.",depth:3,charIndex:2754},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:3457}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v12.mdx",description:"React Native Testing Library 12 introduces a handful of breaking changes compared to 11.x versions. We believe they were necessary to improve the experience using the library and help the users fall into the pit of success when writing meaningful tests. You will find migration instructions for each and every change described below."},{title:"Migration to 2.x",routePath:"/docs/migration/previous/v2",lang:"en",toc:[{id:"dropping-node-8",text:"Dropping Node 8",depth:2,charIndex:97},{id:"auto-cleanup",text:"Auto Cleanup",depth:2,charIndex:320},{id:"waitfor-api-changes",text:"WaitFor API changes",depth:2,charIndex:1327},{id:"removed-global-debug-function",text:"Removed global `debug` function",depth:2,charIndex:2107},{id:"removed-global-shallow-function",text:"Removed global `shallow` function",depth:2,charIndex:2256},{id:"removed-functions",text:"Removed functions",depth:2,charIndex:2725},{id:"some-bytestid-queries-behavior-changes",text:"Some `ByTestId` queries behavior changes",depth:2,charIndex:3422},{id:"deprecated-flushmicrotasksqueue",text:"Deprecated `flushMicrotasksQueue`",depth:2,charIndex:4166}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v2.mdx",description:"This guide describes steps necessary to migrate from React Native Testing Library v1.x to v2.x."},{title:"Migration to 7.x",routePath:"/docs/migration/previous/v7",lang:"en",toc:[{id:"guide-for-react-native-testing-library-users",text:"Guide for `react-native-testing-library` users",depth:2,charIndex:304},{id:"renaming-the-library",text:"Renaming the library",depth:3,charIndex:455},{id:"new-aliases",text:"New aliases",depth:3,charIndex:1339},{id:"renaming-byplaceholder-queries",text:"Renaming `ByPlaceholder` queries",depth:3,charIndex:1747},{id:"fireevent-support-for-disabled-components",text:"`fireEvent` support for disabled components",depth:3,charIndex:2059},{id:"guide-for-testing-libraryreact-native-users",text:"Guide for `@testing-library/react-native` users",depth:2,charIndex:2528},{id:"renaming-wait-helpers",text:'Renaming "wait" helpers',depth:3,charIndex:2843},{id:"changes-to-bytestid-queries",text:"Changes to `ByTestId` queries",depth:3,charIndex:2987},{id:"no-bytitle-queries",text:"No `ByTitle` queries",depth:3,charIndex:3144},{id:"no-custom-jest-configuration",text:"No custom Jest configuration",depth:3,charIndex:3591},{id:"cleanup-is-included-by-default",text:"Cleanup is included by default",depth:3,charIndex:3974},{id:"no-nativetestinstance-abstraction",text:"No NativeTestInstance abstraction",depth:3,charIndex:4467},{id:"no-container-nor-baseelement-returned-from-render",text:"No `container` nor `baseElement` returned from `render`",depth:3,charIndex:4671},{id:"firing-events-changes",text:"Firing events changes",depth:3,charIndex:4973}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v7.mdx",description:"As the version 7.0 involves merging two libraries together, there are two variants for migration guide, dependent on library you used previously:"},{title:"Migration to 9.x",routePath:"/docs/migration/previous/v9",lang:"en",toc:[{id:"support-for-text-match-options-aka-string-precision-api",text:"Support for text match options a.k.a string precision API",depth:2,charIndex:281},{id:"reverted-matching-text-across-several-nodes",text:"Reverted matching text across several nodes",depth:2,charIndex:1275},{id:"future-plans",text:"Future plans",depth:2,charIndex:2038}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v9.mdx",description:"Version 7.0 brought React Native Testing Library into the @testing-library family. Since it has been implemented independently from its web counterpart – the React Testing Library – there are some differences in the API and behavior. Version 9.0 solves several of these problems."},{title:"Migration to 13.x",routePath:"/docs/migration/v13",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:225},{id:"supported-react-and-react-native-versions",text:"Supported React and React Native versions",depth:3,charIndex:243},{id:"concurrent-rendering-by-default",text:"Concurrent rendering by default",depth:3,charIndex:586},{id:"extend-jest-matchers-by-default",text:"Extend Jest matchers by default",depth:3,charIndex:971},{id:"removed-deprecated-byaccessibilitystate-queries",text:"Removed deprecated `*ByAccessibilityState` queries",depth:3,charIndex:1372},{id:"removed-deprecated-byaccessibilityvalue-queries",text:"Removed deprecated `*ByAccessibilityValue` queries",depth:3,charIndex:2318},{id:"removed-jest-preset",text:"Removed Jest preset",depth:3,charIndex:3082},{id:"removed-debugshallow",text:"Removed `debug.shallow`",depth:3,charIndex:3299},{id:"changes-to-accessibility-label-calculation",text:"Changes to accessibility label calculation",depth:3,charIndex:3494},{id:"other-changes",text:"Other changes",depth:2,charIndex:3716},{id:"removed-host-component-names-autodetection",text:"Removed host component names autodetection",depth:3,charIndex:3731},{id:"use-react-implementation-of-act-instead-of-react-test-renderer-one",text:"Use React implementation of `act` instead of React Test Renderer one",depth:3,charIndex:3866},{id:"updated-flushmicrotasks-internal-method",text:"Updated `flushMicroTasks` internal method",depth:3,charIndex:3975},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:4057}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/v13.mdx",description:"This guide describes the migration to React Native Testing Library version 13 from version 12.x. Overall, the v13 release is relatively small, focusing on removing deprecated queries and improving the developer experience."},{title:"Introduction",routePath:"/docs/start/intro",lang:"en",toc:[{id:"the-problem",text:"The problem",depth:2,charIndex:0},{id:"this-solution",text:"This solution",depth:2,charIndex:357},{id:"example",text:"Example",depth:2,charIndex:860}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/start/intro.md"},{title:"Quick Start",routePath:"/docs/start/quick-start",lang:"en",toc:[{id:"installation",text:"Installation",depth:2,charIndex:0},{id:"jest-matchers",text:"Jest matchers",depth:3,charIndex:360},{id:"eslint-plugin",text:"ESLint plugin",depth:3,charIndex:596}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/start/quick-start.mdx"},{title:"",routePath:"/",lang:"en",toc:[],frontmatter:{pageType:"home",hero:{image:{src:{light:"/img/logo-light.svg",dark:"/img/logo-dark.svg"}},name:"JavaScript Integration testing for React Native",tagline:"The more your tests resemble the way your software is used, the more confidence they can give you.
      — Kent C. Dodds",actions:[{theme:"brand",text:"Quick Start",link:"/docs/start/quick-start"},{theme:"alt",text:"Explore API",link:"/docs/api"}]},features:[{title:"Maintainable",details:"Write maintainable tests for your React Native apps.",icon:''},{title:"Reliable",details:"Promotes testing public APIs and avoiding implementation details.",icon:''},{title:"Community Driven",details:"Supported by React Native community and its core contributors.",icon:''}]},version:"13.x",_relativePath:"13.x/index.md"},{title:"Network Requests",routePath:"/14.x/cookbook/advanced/network-requests",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"phonebook-example",text:"Phonebook Example",depth:2,charIndex:569},{id:"start-testing-with-a-simple-test",text:"Start testing with a simple test",depth:2,charIndex:4791},{id:"testing-error-handling",text:"Testing error handling",depth:2,charIndex:7891},{id:"global-guarding-against-unwanted-api-requests",text:"Global guarding against unwanted API requests",depth:2,charIndex:9730},{id:"conclusion",text:"Conclusion",depth:2,charIndex:10748},{id:"further-reading-and-alternatives",text:"Further Reading and Alternatives",depth:2,charIndex:11368}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/advanced/network-requests.md"},{title:"Async Events",routePath:"/14.x/cookbook/basics/async-events",lang:"en",toc:[{id:"summary",text:"Summary",depth:2,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:638},{id:"async-utilities",text:"Async utilities",depth:2,charIndex:1767},{id:"findby-queries",text:"`findBy*` queries",depth:3,charIndex:1855},{id:"example-1",text:"Example",depth:4,charIndex:2578},{id:"waitfor-function",text:"`waitFor` function",depth:3,charIndex:2829},{id:"example-2",text:"Example",depth:4,charIndex:3351},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3,charIndex:3573},{id:"example-3",text:"Example",depth:4,charIndex:4165},{id:"fake-timers",text:"Fake Timers",depth:2,charIndex:4240}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/basics/async-events.md"},{title:"Custom `render` function",routePath:"/14.x/cookbook/basics/custom-render",lang:"en",toc:[{id:"summary",text:"Summary",depth:3,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:291},{id:"more-info",text:"More info",depth:3,charIndex:1143},{id:"additional-params",text:"Additional params",depth:4,charIndex:1154},{id:"multiple-functions",text:"Multiple functions",depth:4,charIndex:1488},{id:"async-setup",text:"Async setup",depth:4,charIndex:1777}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/basics/custom-render.md",description:"Summary RNTL exposes the render function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests. Example Example full source code. More info Additional params A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management. Multiple functions Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens. Async setup Since render is async, your custom render function should be marked as async and use await render(). This pattern also makes it easy to add additional async setup if needed:"},{title:"Introduction",routePath:"/14.x/cookbook/",lang:"en",toc:[{id:"whats-inside-the-cookbook",text:"What's Inside the Cookbook?",depth:2,charIndex:431},{id:"whats-next",text:"What's Next?",depth:2,charIndex:1024}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/index.md",description:"Welcome to the React Native Testing Library (RNTL) Cookbook! This app is your go-to resource for learning how to effectively test React Native applications. It provides a collection of best practices, ready-made recipes, and tips & tricks to simplify and improve your testing workflow. Whether you’re a beginner just getting started or a seasoned developer looking to sharpen your skills, the Cookbook has something for everyone."},{title:"Jotai",routePath:"/14.x/cookbook/state-management/jotai",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"task-list-example",text:"Task List Example",depth:2,charIndex:332},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2,charIndex:1433},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2,charIndex:1910},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2,charIndex:3562},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2,charIndex:4810},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2,charIndex:5413},{id:"conclusion",text:"Conclusion",depth:2,charIndex:6089}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/state-management/jotai.md"},{title:"Testing environment",routePath:"/14.x/docs/advanced/testing-env",lang:"en",toc:[{id:"react-renderers",text:"React renderers",depth:2,charIndex:635},{id:"test-renderer",text:"Test Renderer",depth:2,charIndex:1346},{id:"element-tree",text:"Element tree",depth:2,charIndex:2804},{id:"host-and-composite-components",text:"Host and composite components",depth:2,charIndex:3487},{id:"host-only-element-tree",text:"Host-only element tree",depth:3,charIndex:5327},{id:"tree-nodes",text:"Tree nodes",depth:2,charIndex:5822},{id:"understanding-props",text:"Understanding props",depth:3,charIndex:6088},{id:"tree-navigation",text:"Tree navigation",depth:2,charIndex:6755},{id:"queries",text:"Queries",depth:2,charIndex:7242}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/advanced/testing-env.mdx",description:"React Native Testing Library lets you write integration and component tests for your React Native app or library. While the JSX code in tests closely resembles your React Native app, the underlying environment differs. This document describes the key elements of our testing environment and highlights things to be aware of when writing advanced tests or diagnosing issues."},{title:"Third-Party Library Integration",routePath:"/14.x/docs/advanced/third-party-integration",lang:"en",toc:[{id:"handling-events-in-third-party-libraries",text:"Handling Events in Third-Party Libraries",depth:2,charIndex:231},{id:"example-react-native-gesture-handler",text:"Example: React Native Gesture Handler",depth:3,charIndex:1010}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/advanced/third-party-integration.mdx",description:"The React Native Testing Library is designed to simulate the core behaviors of React Native. However, it does not replicate the internal logic of third-party libraries. This guide explains how to integrate your library with RNTL."},{title:"Understanding `act` function",routePath:"/14.x/docs/advanced/understanding-act",lang:"en",toc:[{id:"act-warning",text:"`act` warning",depth:2,charIndex:201},{id:"understanding-act",text:"Understanding `act`",depth:2,charIndex:643},{id:"responsibility",text:"Responsibility",depth:3,charIndex:662},{id:"when-to-use-act",text:"When to use act",depth:3,charIndex:2489},{id:"implementation",text:"Implementation",depth:3,charIndex:3542},{id:"asynchronous-code",text:"Asynchronous code",depth:2,charIndex:4342},{id:"handling-asynchronous-operations",text:"Handling asynchronous operations",depth:3,charIndex:4766},{id:"solution-with-fake-timers",text:"Solution with fake timers",depth:3,charIndex:5626},{id:"solution-with-real-timers",text:"Solution with real timers",depth:3,charIndex:6123},{id:"references",text:"References",depth:2,charIndex:7510}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/advanced/understanding-act.mdx",description:"When writing RNTL tests, cryptic act() function errors logged to console often confuse developers. This article explains the purpose and behavior of act() so you can write tests with more confidence."},{title:"API Overview",routePath:"/14.x/docs/api",lang:"en",toc:[],frontmatter:{uri:"/api"},version:"14.x",_relativePath:"14.x/docs/api.md",description:"React Native Testing Library consists of following APIs: render function - render your UI components for testing purposesscreen object - access rendered UI:Queries - find relevant components by various predicates: role, text, test ids, etcLifecycle methods: rerender, unmountHelpers: debug, toJSON, rootJest matchers - validate assumptions about your UIUser Event - simulate common user interactions like press or type in a realistic wayFire Event - simulate any component event in a simplified way purposesMisc APIs:renderHook function - render hooks for testingAsync utils: findBy* queries, waitFor, waitForElementToBeRemovedConfiguration: configure, resetToDefaultsAccessibility: isHiddenFromAccessibilityOther: within, act, cleanup"},{title:"Fire Event API",routePath:"/14.x/docs/api/events/fire-event",lang:"en",toc:[{id:"fire-event",text:"`fireEvent`",depth:2,charIndex:0},{id:"press",text:"`fireEvent.press`",depth:3,charIndex:2137},{id:"change-text",text:"`fireEvent.changeText`",depth:3,charIndex:2919},{id:"scroll",text:"`fireEvent.scroll`",depth:3,charIndex:3570},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4,charIndex:4033}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/events/fire-event.mdx"},{title:"User Event interactions",routePath:"/14.x/docs/api/events/user-event",lang:"en",toc:[{id:"comparison-with-fire-event-api",text:"Comparison with Fire Event API",depth:2,charIndex:0},{id:"setup",text:"`setup()`",depth:2,charIndex:1095},{id:"setup-options",text:"Options",depth:3,charIndex:1331},{id:"press",text:"`press()`",depth:2,charIndex:1592},{id:"longpress",text:"`longPress()`",depth:2,charIndex:2257},{id:"longpress-options",text:"Options",depth:3,charIndex:3094},{id:"type",text:"`type()`",depth:2,charIndex:3204},{id:"type-options",text:"Options",depth:3,charIndex:3868},{id:"type-sequence",text:"Sequence of events",depth:3,charIndex:4148},{id:"clear",text:"`clear()`",depth:2,charIndex:4877},{id:"clear-sequence",text:"Sequence of events",depth:3,charIndex:5180},{id:"paste",text:"`paste()`",depth:2,charIndex:5463},{id:"paste-sequence",text:"Sequence of events",depth:3,charIndex:5793},{id:"scroll-to",text:"`scrollTo()`",depth:2,charIndex:6100},{id:"scroll-to-options",text:"Options",depth:3,charIndex:7492},{id:"scroll-sequence",text:"Sequence of events",depth:3,charIndex:8482}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/events/user-event.mdx"},{title:"Jest matchers",routePath:"/14.x/docs/api/jest-matchers",lang:"en",toc:[{id:"setup",text:"Setup",depth:2,charIndex:138},{id:"checking-element-existence",text:"Checking element existence",depth:2,charIndex:238},{id:"tobeonthescreen",text:"`toBeOnTheScreen()`",depth:3,charIndex:266},{id:"element-content",text:"Element Content",depth:2,charIndex:479},{id:"tohavetextcontent",text:"`toHaveTextContent()`",depth:3,charIndex:496},{id:"tocontainelement",text:"`toContainElement()`",depth:3,charIndex:803},{id:"tobeemptyelement",text:"`toBeEmptyElement()`",depth:3,charIndex:952},{id:"checking-element-state",text:"Checking element state",depth:2,charIndex:1070},{id:"tohavedisplayvalue",text:"`toHaveDisplayValue()`",depth:3,charIndex:1094},{id:"tohaveaccessibilityvalue",text:"`toHaveAccessibilityValue()`",depth:3,charIndex:1406},{id:"tobeenabled",text:"`toBeEnabled()` / `toBeDisabled`",depth:3,charIndex:1938},{id:"tobeselected",text:"`toBeSelected()`",depth:3,charIndex:2344},{id:"tobechecked",text:"`toBeChecked()` / `toBePartiallyChecked()`",depth:3,charIndex:2484},{id:"tobeexpanded",text:"`toBeExpanded()` / `toBeCollapsed()`",depth:3,charIndex:2902},{id:"tobebusy",text:"`toBeBusy()`",depth:3,charIndex:3318},{id:"checking-element-style",text:"Checking element style",depth:2,charIndex:3438},{id:"tobevisible",text:"`toBeVisible()`",depth:3,charIndex:3462},{id:"tohavestyle",text:"`toHaveStyle()`",depth:3,charIndex:3668},{id:"other-matchers",text:"Other matchers",depth:2,charIndex:3785},{id:"tohaveaccessiblename",text:"`toHaveAccessibleName()`",depth:3,charIndex:3801},{id:"tohaveprop",text:"`toHaveProp()`",depth:3,charIndex:4696}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/jest-matchers.mdx",description:"This guide covers the built-in Jest matchers. These matchers make your tests easier to read and work better with accessibility features."},{title:"Accessibility",routePath:"/14.x/docs/api/misc/accessibility",lang:"en",toc:[{id:"ishiddenfromaccessibility",text:"`isHiddenFromAccessibility`",depth:2,charIndex:0}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/accessibility.mdx"},{title:"Async utilities",routePath:"/14.x/docs/api/misc/async",lang:"en",toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2,charIndex:0},{id:"waitfor",text:"`waitFor`",depth:2,charIndex:181},{id:"options",text:"Options",depth:3,charIndex:3295},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2,charIndex:3591}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/async.mdx"},{title:"Configuration",routePath:"/14.x/docs/api/misc/config",lang:"en",toc:[{id:"configure",text:"`configure`",depth:2,charIndex:0},{id:"asyncutiltimeout-option",text:"`asyncUtilTimeout` option",depth:3,charIndex:526},{id:"defaultincludehiddenelements-option",text:"`defaultIncludeHiddenElements` option",depth:3,charIndex:682},{id:"defaultdebugoptions-option",text:"`defaultDebugOptions` option",depth:3,charIndex:1068},{id:"resettodefaults",text:"`resetToDefaults()`",depth:2,charIndex:1248},{id:"environment-variables",text:"Environment variables",depth:2,charIndex:1298},{id:"rntl_skip_auto_cleanup",text:"`RNTL_SKIP_AUTO_CLEANUP`",depth:3,charIndex:1321},{id:"rntl_skip_auto_detect_fake_timers",text:"`RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS`",depth:3,charIndex:1570}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/config.mdx"},{title:"Other helpers",routePath:"/14.x/docs/api/misc/other",lang:"en",toc:[{id:"within",text:"`within`",depth:2,charIndex:0},{id:"act",text:"`act`",depth:2,charIndex:824},{id:"cleanup",text:"`cleanup`",depth:2,charIndex:1683}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/other.mdx"},{title:"`renderHook` function",routePath:"/14.x/docs/api/misc/render-hook",lang:"en",toc:[{id:"renderhook",text:"`renderHook`",depth:2,charIndex:0},{id:"options",text:"`options`",depth:3,charIndex:1700},{id:"initial-props",text:"`initialProps`",depth:4,charIndex:1775},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:1970},{id:"result",text:"Result",depth:3,charIndex:2105},{id:"result-1",text:"`result`",depth:4,charIndex:2369},{id:"rerender",text:"`rerender`",depth:4,charIndex:2632},{id:"unmount",text:"`unmount`",depth:4,charIndex:2966},{id:"examples",text:"Examples",depth:3,charIndex:3155},{id:"with-initialprops",text:"With `initialProps`",depth:4,charIndex:3207},{id:"with-wrapper",text:"With `wrapper`",depth:4,charIndex:3881},{id:"with-react-suspense",text:"With React Suspense",depth:4,charIndex:4174}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/render-hook.mdx"},{title:"Queries",routePath:"/14.x/docs/api/queries",lang:"en",toc:[{id:"accessing-queries",text:"Accessing queries",depth:2,charIndex:223},{id:"using-screen-object",text:"Using `screen` object",depth:3,charIndex:379},{id:"using-render-result",text:"Using `render` result",depth:3,charIndex:710},{id:"query-parts",text:"Query parts",depth:2,charIndex:1020},{id:"query-variant",text:"Query variant",depth:2,charIndex:1276},{id:"get-by",text:"`getBy*` queries",depth:3,charIndex:1936},{id:"get-all-by",text:"`getAllBy*` queries",depth:3,charIndex:2191},{id:"query-by",text:"`queryBy*` queries",depth:3,charIndex:2369},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3,charIndex:2648},{id:"find-by",text:"`findBy*` queries",depth:3,charIndex:2845},{id:"find-all-by",text:"`findAllBy*` queries",depth:3,charIndex:3251},{id:"query-predicates",text:"Query predicates",depth:2,charIndex:4009},{id:"by-role",text:"`*ByRole`",depth:3,charIndex:4293},{id:"by-role-options",text:"Options",depth:4,charIndex:5478},{id:"by-label-text",text:"`*ByLabelText`",depth:3,charIndex:8146},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3,charIndex:9028},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3,charIndex:9594},{id:"by-text",text:"`*ByText`",depth:3,charIndex:10134},{id:"by-hint-text",text:"`*ByHintText`",depth:3,charIndex:10807},{id:"by-test-id",text:"`*ByTestId`",depth:3,charIndex:11609},{id:"common-options",text:"Common options",depth:3,charIndex:12433},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4,charIndex:12689},{id:"textmatch-type",text:"TextMatch type",depth:2,charIndex:13515},{id:"examples",text:"Examples",depth:3,charIndex:13681},{id:"text-match-options",text:"Options",depth:3,charIndex:14491},{id:"precision",text:"Precision",depth:4,charIndex:14522},{id:"normalization",text:"Normalization",depth:4,charIndex:15368}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/queries.mdx",description:"Queries are one of the main building blocks for the React Native Testing Library. They enable you to find relevant elements in the element tree, which represents your application's user interface when running under tests."},{title:"`render` API",routePath:"/14.x/docs/api/render",lang:"en",toc:[{id:"render",text:"`render` function",depth:2,charIndex:0},{id:"options",text:"Options",depth:3,charIndex:852},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:941},{id:"result",text:"Result",depth:3,charIndex:1653}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/render.mdx"},{title:"`screen` object",routePath:"/14.x/docs/api/screen",lang:"en",toc:[{id:"queries",text:"`...queries`",depth:3,charIndex:575},{id:"example",text:"Example",depth:4,charIndex:708},{id:"rerender",text:"`rerender`",depth:3,charIndex:854},{id:"unmount",text:"`unmount`",depth:3,charIndex:1644},{id:"debug",text:"`debug`",depth:3,charIndex:2113},{id:"debug-message-option",text:"`message` option",depth:4,charIndex:2263},{id:"debug-map-props-option",text:"`mapProps` option",depth:4,charIndex:2567},{id:"tojson",text:"`toJSON`",depth:3,charIndex:3563},{id:"container",text:"`container`",depth:3,charIndex:3687},{id:"root",text:"`root`",depth:3,charIndex:4231}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/screen.mdx",description:"The screen object provides access to queries and utilities for the currently rendered UI. This object is assigned after the render call and cleared after each test by calling cleanup. If no render call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access. ...queries The main feature of screen is its queries for finding elements in the view hierarchy. See Queries for a complete list. Example rerender Re-render the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and key) as the previous element, the tree will be updated; otherwise, it will re-mount a new tree, in both cases triggering the appropriate lifecycle events. This method is async and uses async act internally to execute all pending React updates during updating. This works with async React features like Suspense boundaries and the use() hook. unmount Unmount the in-memory tree, triggering the appropriate lifecycle events. This method is async and uses async act internally to execute all pending React updates during unmounting. This works with async React features like Suspense boundaries and the use() hook. debug Pretty prints deeply rendered component passed to render. message option {#debug-message-option} You can provide a message that will be printed on top. logs optional message and colored JSX: mapProps option {#debug-map-props-option} You can use the mapProps option to transform the props that will be printed : This will log the rendered JSX without the style props. The children prop cannot be filtered out so the following will print all rendered components with all props but children filtered out. This option can be used to target specific props when debugging a query (for instance, keeping only the children prop when debugging a getByText query). You can also transform prop values so that they are more readable (e.g., flatten styles). Or remove props that have little value when debugging tests, e.g. path prop for svgs toJSON Get the rendered component JSON representation, e.g. for snapshot testing. container Returns a pseudo-element container whose children are the elements you asked to render. This is the root container element from Test Renderer. The container provides access to the entire rendered tree. Use it to query or manipulate the rendered output, similar to how container works in React Testing Library. root Returns the rendered root host element, or null if nothing was rendered. This is the first child of the container, which represents the actual root element you rendered. This API is useful for component tests where you need to access the root host view without using *ByTestId queries or similar methods."},{title:"Common Mistakes with React Native Testing Library",routePath:"/14.x/docs/guides/common-mistakes",lang:"en",toc:[{id:"using-the-wrong-query",text:"Using the wrong query",depth:2,charIndex:630},{id:"not-using-byrole-most-of-the-time",text:"Not using `*ByRole` query most of the time",depth:2,charIndex:1651},{id:"using-the-wrong-assertion",text:"Using the wrong assertion",depth:2,charIndex:2783},{id:"using-query-variants-for-anything-except-checking-for-non-existence",text:"Using `query*` variants for anything except checking for non-existence",depth:2,charIndex:3652},{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",text:"Using `waitFor` to wait for elements that can be queried with `find*`",depth:2,charIndex:4412},{id:"performing-side-effects-in-waitfor",text:"Performing side-effects in `waitFor`",depth:2,charIndex:5227},{id:"using-container-to-query-for-elements",text:"Using `container` to query for elements",depth:2,charIndex:6195},{id:"passing-an-empty-callback-to-waitfor",text:"Passing an empty callback to `waitFor`",depth:2,charIndex:6981},{id:"not-using-screen",text:"Not using `screen`",depth:2,charIndex:7440},{id:"wrapping-things-in-act-unnecessarily",text:"Wrapping things in `act` unnecessarily",depth:2,charIndex:8158},{id:"not-using-user-event-api",text:"Not using User Event API",depth:2,charIndex:9094},{id:"not-querying-by-text",text:"Not querying by text",depth:2,charIndex:10260},{id:"not-using-testing-library-eslint-plugins",text:"Not using Testing Library ESLint plugins",depth:2,charIndex:10832},{id:"using-cleanup",text:"Using `cleanup`",depth:2,charIndex:11492},{id:"using-get-variants-as-assertions",text:"Using `get*` variants as assertions",depth:2,charIndex:12101},{id:"having-multiple-assertions-in-a-single-waitfor-callback",text:"Having multiple assertions in a single `waitFor` callback",depth:2,charIndex:12925},{id:"using-wrapper-as-the-variable-name",text:"Using `wrapper` as the variable name",depth:2,charIndex:13988},{id:"summary",text:"Summary",depth:2,charIndex:14854}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/common-mistakes.mdx",description:'Note: This guide is adapted from Kent C. Dodds\' article "Common mistakes with React Testing Library" for React Native Testing Library v14. The original article focuses on web React, but the principles apply to React Native as well. This adaptation includes React Native-specific examples, async API usage (v14), and ARIA-compatible accessibility attributes. React Native Testing Library guiding principle is: "The more your tests resemble the way your software is used, the more confidence they can give you." This guide outlines some common mistakes people make when using React Native Testing Library and how to avoid them.'},{title:"Community resources",routePath:"/14.x/docs/guides/community-resources",lang:"en",toc:[{id:"recommended-content",text:"Recommended content",depth:2,charIndex:0},{id:"older-potentially-outdated-content",text:"Older, potentially outdated content",depth:2,charIndex:569}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/community-resources.mdx"},{title:"FAQ",routePath:"/14.x/docs/guides/faq",lang:"en",toc:[{id:"can-i-test-the-native-features-of-react-native-apps",text:"Can I test the native features of React Native apps?",depth:2,charIndex:0},{id:"should-i-usemigrate-to-screen-queries",text:"Should I use/migrate to `screen` queries?",depth:2,charIndex:1097},{id:"should-i-usemigrate-to-user-event-interactions",text:"Should I use/migrate to User Event interactions?",depth:2,charIndex:1405}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/faq.mdx"},{title:"How should I query?",routePath:"/14.x/docs/guides/how-to-query",lang:"en",toc:[{id:"query-parts",text:"Query parts",depth:2,charIndex:196},{id:"query-variant",text:"Query variant",depth:2,charIndex:454},{id:"idiomatic-query-variants",text:"Idiomatic query variants",depth:3,charIndex:1114},{id:"query-predicate",text:"Query predicate",depth:2,charIndex:2036},{id:"idiomatic-query-predicates",text:"Idiomatic query predicates",depth:3,charIndex:2617},{id:"by-role-query",text:"1. By Role query",depth:3,charIndex:3034},{id:"by-role-query-name-option",text:"Name option",depth:4,charIndex:4039},{id:"text-input-queries",text:"2. Text input queries",depth:3,charIndex:4578},{id:"other-accessible-queries",text:"3. Other accessible queries",depth:3,charIndex:5375},{id:"test-id-query",text:"4. Test ID query",depth:3,charIndex:5804}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/how-to-query.mdx",description:"React Native Testing Library provides various query types for finding views in tests. The number of queries can be confusing. This guide helps you pick the right queries for your test scenarios."},{title:"LLM Guidelines for React Native Testing Library",routePath:"/14.x/docs/guides/llm-guidelines",lang:"en",toc:[{id:"core-apis",text:"Core APIs",depth:2,charIndex:87},{id:"render",text:"render",depth:3,charIndex:98},{id:"screen",text:"screen",depth:3,charIndex:584},{id:"renderhook",text:"renderHook",depth:3,charIndex:781},{id:"query-selection",text:"Query Selection",depth:2,charIndex:1162},{id:"assertions",text:"Assertions",depth:2,charIndex:1692},{id:"jest-matchers-reference",text:"Jest Matchers Reference",depth:2,charIndex:1918},{id:"user-interactions",text:"User Interactions",depth:2,charIndex:3382},{id:"userevent-preferred",text:"userEvent (Preferred)",depth:3,charIndex:3555},{id:"fireevent-low-level",text:"fireEvent (Low-level)",depth:3,charIndex:4079},{id:"asyncawait-v14",text:"Async/Await (v14)",depth:2,charIndex:4463},{id:"waitfor-usage",text:"waitFor Usage",depth:2,charIndex:4673},{id:"code-organization",text:"Code Organization",depth:2,charIndex:5012},{id:"quick-checklist",text:"Quick Checklist",depth:2,charIndex:5352},{id:"example-good-pattern",text:"Example: Good Pattern",depth:2,charIndex:5737},{id:"example-anti-patterns",text:"Example: Anti-Patterns",depth:2,charIndex:6857}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/llm-guidelines.mdx",description:"Actionable guidelines for writing tests with React Native Testing Library (RNTL) v14."},{title:"Troubleshooting",routePath:"/14.x/docs/guides/troubleshooting",lang:"en",toc:[{id:"example-repository",text:"Example repository",depth:2,charIndex:113},{id:"undefined-component-error",text:"Undefined component error",depth:2,charIndex:320},{id:"mocking-react-native",text:"Mocking React Native",depth:3,charIndex:1383},{id:"act-warnings",text:"Act warnings",depth:2,charIndex:1659}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/troubleshooting.mdx",description:"This guide describes common issues found by users when integrating React Native Test Library to their projects:"},{title:"Introduction",routePath:"/14.x/docs/start/intro",lang:"en",toc:[{id:"the-problem",text:"The problem",depth:2,charIndex:0},{id:"this-solution",text:"This solution",depth:2,charIndex:474},{id:"example",text:"Example",depth:2,charIndex:981}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/start/intro.md"},{title:"Migration to 14.x",routePath:"/14.x/docs/start/migration-v14",lang:"en",toc:[{id:"overview",text:"Overview",depth:2,charIndex:98},{id:"quick-migration",text:"Quick Migration",depth:2,charIndex:690},{id:"breaking-changes",text:"Breaking Changes",depth:2,charIndex:1726},{id:"supported-react-react-native-and-nodejs-versions",text:"Supported React, React Native, and Node.js versions",depth:3,charIndex:1744},{id:"test-renderer-replaces-react-test-renderer",text:"Test Renderer replaces React Test Renderer",depth:3,charIndex:2087},{id:"recommended-test-renderer-versions",text:"Recommended Test Renderer versions",depth:4,charIndex:2706},{id:"1-update-dependencies",text:"1. Update dependencies",depth:4,charIndex:3404},{id:"2-update-type-imports-if-needed",text:"2. Update type imports (if needed)",depth:4,charIndex:4500},{id:"async-apis-by-default",text:"Async APIs by Default",depth:3,charIndex:4845},{id:"render-async-default",text:"`render` is now async",depth:4,charIndex:5557},{id:"renderhook-is-now-async",text:"`renderHook` is now async",depth:4,charIndex:6058},{id:"fireevent-is-now-async",text:"`fireEvent` is now async",depth:4,charIndex:6506},{id:"act-is-now-async",text:"`act` is now async",depth:4,charIndex:7569},{id:"why-async-apis",text:"Why async APIs?",depth:4,charIndex:8392},{id:"removed-apis",text:"Removed APIs",depth:3,charIndex:8597},{id:"update-alias-removed",text:"`update` alias removed",depth:4,charIndex:8611},{id:"getqueriesforelement-export-removed",text:"`getQueriesForElement` export removed",depth:4,charIndex:8979},{id:"unsafe_root-removed",text:"`UNSAFE_root` removed",depth:4,charIndex:9348},{id:"legacy-unsafe_-queries-removed",text:"Legacy `UNSAFE_*` queries removed",depth:4,charIndex:9698},{id:"concurrentroot-option-removed",text:"`concurrentRoot` option removed",depth:4,charIndex:10429},{id:"createnodemock-option-removed",text:"`createNodeMock` option removed",depth:4,charIndex:11289},{id:"container-api-reintroduced",text:"`container` API reintroduced",depth:3,charIndex:11907},{id:"text-string-validation-enforced-by-default",text:"Text string validation enforced by default",depth:3,charIndex:12949},{id:"hidden-suspense-and-activity-content",text:"Hidden Suspense and Activity content",depth:3,charIndex:14209},{id:"accessible-name-changes",text:"Accessible name changes",depth:3,charIndex:14807},{id:"unknown-options-now-warn",text:"Unknown options now warn",depth:3,charIndex:15594},{id:"codemods",text:"Codemods",depth:2,charIndex:15989},{id:"rntl-v14-update-deps",text:"`rntl-v14-update-deps`",depth:3,charIndex:16148},{id:"rntl-v14-async-functions",text:"`rntl-v14-async-functions`",depth:3,charIndex:16754},{id:"custom-render-functions",text:"Custom render functions",depth:4,charIndex:17294},{id:"limitations",text:"Limitations",depth:4,charIndex:18287},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:18425}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/start/migration-v14.mdx",description:"This guide describes the migration to React Native Testing Library version 14 from version 13.x."},{title:"Quick Start",routePath:"/14.x/docs/start/quick-start",lang:"en",toc:[{id:"installation",text:"Installation",depth:2,charIndex:0},{id:"agent-docs-in-the-package",text:"Agent docs in the package",depth:2,charIndex:711},{id:"jest-matchers",text:"Jest matchers",depth:3,charIndex:1432},{id:"eslint-plugin",text:"ESLint plugin",depth:3,charIndex:1664}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/start/quick-start.mdx"},{title:"",routePath:"/14.x/",lang:"en",toc:[],frontmatter:{pageType:"home",hero:{image:{src:{light:"/img/logo-light.svg",dark:"/img/logo-dark.svg"}},name:"JavaScript Integration testing for React Native",tagline:"The more your tests resemble the way your software is used, the more confidence they can give you.
      — Kent C. Dodds",actions:[{theme:"brand",text:"Quick Start",link:"/14.x/docs/start/quick-start"},{theme:"alt",text:"Explore API",link:"/14.x/docs/api"}]},features:[{title:"Maintainable",details:"Write maintainable tests for your React Native apps.",icon:''},{title:"Reliable",details:"Promotes testing public APIs and avoiding implementation details.",icon:''},{title:"Community Driven",details:"Supported by React Native community and its core contributors.",icon:''}]},version:"14.x",_relativePath:"14.x/index.md"},{title:"",routePath:"/404",lang:"en",toc:[],frontmatter:{pageType:"custom"},version:"13.x",_relativePath:"404.mdx"}]},a={"12.x###en":"69408bab","13.x###en":"5318fa87","14.x###en":"fe506191"}},1014(e,t,n){n.d(t,{A:()=>i});let i={github:''}},2650(e,t,n){n.d(t,{A:()=>i});let i={languagesText:{en:"Languages"},themeText:{en:"Theme"},versionsText:{en:"Versions"},menuTitle:{en:"Menu"},outlineTitle:{en:"Contents"},scrollToTopText:{en:"Back to top"},lastUpdatedText:{en:"Last Updated"},prevPageText:{en:"Previous page"},nextPageText:{en:"Next page"},sourceCodeText:{en:"Source Code"},searchPlaceholderText:{en:"Search"},searchPanelCancelText:{en:"Cancel"},searchNoResultsText:{en:"No results found, try something different than"},searchSuggestedQueryText:{en:" "},"overview.filterNameText":{en:" "},"overview.filterPlaceholderText":{en:"Search API"},"overview.filterNoResultText":{en:"No matching API found"},openInText:{en:"Open in {{name}}"},copyMarkdownText:{en:"Copy Markdown"},copyMarkdownLinkText:{en:"Copy Markdown link"},editLinkText:{en:"Edit this page on GitHub"},codeButtonGroupCopyButtonText:{en:"Copy code"},notFoundText:{en:"PAGE NOT FOUND"},takeMeHomeText:{en:"Take me home"}}},8369(e,t,n){n.d(t,{A:()=>i});let i=[[n(4595).A,{}]]},5344(e,t,n){n(9995),n(1569)},948(e,t,n){n.r(t),n.d(t,{onSearch:()=>i});let i=()=>{}},3974(e,t,n){n.d(t,{J:()=>ez});var i=n(6540),a=n(4764);let r=(0,a.YZ)(()=>n.e("1008").then(n.bind(n,3779))),o=(0,a.YZ)(()=>n.e("5816").then(n.bind(n,7483))),d=(0,a.YZ)(()=>n.e("8750").then(n.bind(n,9645))),s=(0,a.YZ)(()=>n.e("8648").then(n.bind(n,9083))),c=(0,a.YZ)(()=>n.e("8397").then(n.bind(n,8220))),h=(0,a.YZ)(()=>n.e("7351").then(n.bind(n,6138))),l=(0,a.YZ)(()=>n.e("8810").then(n.bind(n,6193))),p=(0,a.YZ)(()=>n.e("1858").then(n.bind(n,3257))),x=(0,a.YZ)(()=>n.e("4936").then(n.bind(n,4107))),u=(0,a.YZ)(()=>n.e("5507").then(n.bind(n,3870))),m=(0,a.YZ)(()=>n.e("6137").then(n.bind(n,4384))),g=(0,a.YZ)(()=>n.e("1038").then(n.bind(n,6589))),v=(0,a.YZ)(()=>n.e("8146").then(n.bind(n,2377))),y=(0,a.YZ)(()=>n.e("6156").then(n.bind(n,3319))),f=(0,a.YZ)(()=>n.e("1304").then(n.bind(n,9867))),b=(0,a.YZ)(()=>n.e("9826").then(n.bind(n,3689))),I=(0,a.YZ)(()=>n.e("4819").then(n.bind(n,862))),w=(0,a.YZ)(()=>n.e("9377").then(n.bind(n,8888))),k=(0,a.YZ)(()=>n.e("9277").then(n.bind(n,940))),P=(0,a.YZ)(()=>n.e("631").then(n.bind(n,9098))),T=(0,a.YZ)(()=>n.e("9782").then(n.bind(n,6469))),q=(0,a.YZ)(()=>n.e("7623").then(n.bind(n,1082))),E=(0,a.YZ)(()=>n.e("836").then(n.bind(n,7103))),R=(0,a.YZ)(()=>n.e("4397").then(n.bind(n,1724))),A=(0,a.YZ)(()=>n.e("1607").then(n.bind(n,8810))),N=(0,a.YZ)(()=>n.e("8129").then(n.bind(n,7288))),_=(0,a.YZ)(()=>n.e("9914").then(n.bind(n,2209))),S=(0,a.YZ)(()=>n.e("8748").then(n.bind(n,3127))),C=(0,a.YZ)(()=>n.e("3990").then(n.bind(n,8261))),B=(0,a.YZ)(()=>n.e("4889").then(n.bind(n,2608))),j=(0,a.YZ)(()=>n.e("9273").then(n.bind(n,9712))),L=(0,a.YZ)(()=>n.e("8358").then(n.bind(n,7861))),Y=(0,a.YZ)(()=>n.e("9667").then(n.bind(n,6750))),O=(0,a.YZ)(()=>n.e("8617").then(n.bind(n,8672))),U=(0,a.YZ)(()=>n.e("3783").then(n.bind(n,7130))),M=(0,a.YZ)(()=>n.e("8187").then(n.bind(n,6822))),Z=(0,a.YZ)(()=>n.e("4800").then(n.bind(n,211))),F=(0,a.YZ)(()=>n.e("2864").then(n.bind(n,5667))),H=(0,a.YZ)(()=>n.e("5957").then(n.bind(n,9428))),J=(0,a.YZ)(()=>n.e("8293").then(n.bind(n,3476))),Q=(0,a.YZ)(()=>n.e("7497").then(n.bind(n,2336))),D=(0,a.YZ)(()=>n.e("2721").then(n.bind(n,4536))),W=(0,a.YZ)(()=>n.e("7262").then(n.bind(n,3949))),G=(0,a.YZ)(()=>n.e("4152").then(n.bind(n,2731))),V=(0,a.YZ)(()=>n.e("8353").then(n.bind(n,2936))),K=(0,a.YZ)(()=>n.e("8481").then(n.bind(n,7608))),z=(0,a.YZ)(()=>n.e("8901").then(n.bind(n,2084))),X=(0,a.YZ)(()=>n.e("6047").then(n.bind(n,1794))),$=(0,a.YZ)(()=>n.e("3453").then(n.bind(n,9004))),ee=(0,a.YZ)(()=>n.e("9150").then(n.bind(n,8285))),et=(0,a.YZ)(()=>n.e("6958").then(n.bind(n,1389))),en=(0,a.YZ)(()=>n.e("8222").then(n.bind(n,4061))),ei=(0,a.YZ)(()=>n.e("4460").then(n.bind(n,7991))),ea=(0,a.YZ)(()=>n.e("328").then(n.bind(n,3083))),er=(0,a.YZ)(()=>n.e("4553").then(n.bind(n,6032))),eo=(0,a.YZ)(()=>n.e("9950").then(n.bind(n,7341))),ed=(0,a.YZ)(()=>n.e("3974").then(n.bind(n,3285))),es=(0,a.YZ)(()=>n.e("3527").then(n.bind(n,2266))),ec=(0,a.YZ)(()=>n.e("4359").then(n.bind(n,4474))),eh=(0,a.YZ)(()=>n.e("4756").then(n.bind(n,3055))),el=(0,a.YZ)(()=>n.e("2184").then(n.bind(n,2139))),ep=(0,a.YZ)(()=>n.e("9637").then(n.bind(n,8900))),ex=(0,a.YZ)(()=>n.e("9408").then(n.bind(n,4979))),eu=(0,a.YZ)(()=>n.e("1359").then(n.bind(n,6050))),em=(0,a.YZ)(()=>n.e("6341").then(n.bind(n,660))),eg=(0,a.YZ)(()=>n.e("5868").then(n.bind(n,8103))),ev=(0,a.YZ)(()=>n.e("7146").then(n.bind(n,750))),ey=(0,a.YZ)(()=>n.e("7240").then(n.bind(n,507))),ef=(0,a.YZ)(()=>n.e("7863").then(n.bind(n,3258))),eb=(0,a.YZ)(()=>n.e("2222").then(n.bind(n,1725))),eI=(0,a.YZ)(()=>n.e("7340").then(n.bind(n,1511))),ew=(0,a.YZ)(()=>n.e("92").then(n.bind(n,6087))),ek=(0,a.YZ)(()=>n.e("7562").then(n.bind(n,3809))),eP=(0,a.YZ)(()=>n.e("3107").then(n.bind(n,9038))),eT=(0,a.YZ)(()=>n.e("5197").then(n.bind(n,2076))),eq=(0,a.YZ)(()=>n.e("4064").then(n.bind(n,2912))),eE=(0,a.YZ)(()=>n.e("7296").then(n.bind(n,163))),eR=(0,a.YZ)(()=>n.e("2196").then(n.bind(n,5535))),eA=(0,a.YZ)(()=>n.e("594").then(n.bind(n,1961))),eN=(0,a.YZ)(()=>n.e("8885").then(n.bind(n,4180))),e_=(0,a.YZ)(()=>n.e("7759").then(n.bind(n,5826))),eS=(0,a.YZ)(()=>n.e("3508").then(n.bind(n,2079))),eC=(0,a.YZ)(()=>n.e("9808").then(n.bind(n,9795))),eB=(0,a.YZ)(()=>n.e("1782").then(n.bind(n,8597))),ej=(0,a.YZ)(()=>n.e("130").then(n.bind(n,3017))),eL=(0,a.YZ)(()=>n.e("1236").then(n.bind(n,3519))),eY=(0,a.YZ)(()=>n.e("221").then(n.bind(n,2140))),eO=(0,a.YZ)(()=>n.e("7515").then(n.bind(n,3510))),eU=(0,a.YZ)(()=>n.e("9419").then(n.bind(n,3078))),eM=(0,a.YZ)(()=>n.e("1153").then(n.bind(n,3992))),eZ=(0,a.YZ)(()=>n.e("7721").then(n.bind(n,6144))),eF=(0,a.YZ)(()=>n.e("8632").then(n.bind(n,9099))),eH=(0,a.YZ)(()=>n.e("7753").then(n.bind(n,5184))),eJ=(0,a.YZ)(()=>n.e("9873").then(n.bind(n,6312))),eQ=(0,a.YZ)(()=>n.e("6930").then(n.bind(n,7513))),eD=(0,a.YZ)(()=>n.e("2755").then(n.bind(n,2190))),eW=(0,a.YZ)(()=>n.e("543").then(n.bind(n,898))),eG=(0,a.YZ)(()=>n.e("6811").then(n.bind(n,6454))),eV=(0,a.YZ)(()=>n.e("5608").then(n.bind(n,4091))),eK=(0,a.YZ)(()=>n.e("6466").then(n.bind(n,7049))),ez=[{path:"/12.x/cookbook/advanced/network-requests",element:i.createElement(r),filePath:"12.x/cookbook/advanced/network-requests.md",preload:async()=>(await r.preload(),n.e("1008").then(n.bind(n,3779))),lang:"en",version:"12.x"},{path:"/12.x/cookbook/basics/async-tests",element:i.createElement(o),filePath:"12.x/cookbook/basics/async-tests.md",preload:async()=>(await o.preload(),n.e("5816").then(n.bind(n,7483))),lang:"en",version:"12.x"},{path:"/12.x/cookbook/basics/custom-render",element:i.createElement(d),filePath:"12.x/cookbook/basics/custom-render.md",preload:async()=>(await d.preload(),n.e("8750").then(n.bind(n,9645))),lang:"en",version:"12.x"},{path:"/12.x/cookbook/",element:i.createElement(s),filePath:"12.x/cookbook/index.md",preload:async()=>(await s.preload(),n.e("8648").then(n.bind(n,9083))),lang:"en",version:"12.x"},{path:"/12.x/cookbook/state-management/jotai",element:i.createElement(c),filePath:"12.x/cookbook/state-management/jotai.md",preload:async()=>(await c.preload(),n.e("8397").then(n.bind(n,8220))),lang:"en",version:"12.x"},{path:"/12.x/docs/advanced/testing-env",element:i.createElement(h),filePath:"12.x/docs/advanced/testing-env.mdx",preload:async()=>(await h.preload(),n.e("7351").then(n.bind(n,6138))),lang:"en",version:"12.x"},{path:"/12.x/docs/advanced/understanding-act",element:i.createElement(l),filePath:"12.x/docs/advanced/understanding-act.mdx",preload:async()=>(await l.preload(),n.e("8810").then(n.bind(n,6193))),lang:"en",version:"12.x"},{path:"/12.x/docs/api",element:i.createElement(p),filePath:"12.x/docs/api.md",preload:async()=>(await p.preload(),n.e("1858").then(n.bind(n,3257))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/events/fire-event",element:i.createElement(x),filePath:"12.x/docs/api/events/fire-event.mdx",preload:async()=>(await x.preload(),n.e("4936").then(n.bind(n,4107))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/events/user-event",element:i.createElement(u),filePath:"12.x/docs/api/events/user-event.mdx",preload:async()=>(await u.preload(),n.e("5507").then(n.bind(n,3870))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/jest-matchers",element:i.createElement(m),filePath:"12.x/docs/api/jest-matchers.mdx",preload:async()=>(await m.preload(),n.e("6137").then(n.bind(n,4384))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/misc/accessibility",element:i.createElement(g),filePath:"12.x/docs/api/misc/accessibility.mdx",preload:async()=>(await g.preload(),n.e("1038").then(n.bind(n,6589))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/misc/async",element:i.createElement(v),filePath:"12.x/docs/api/misc/async.mdx",preload:async()=>(await v.preload(),n.e("8146").then(n.bind(n,2377))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/misc/config",element:i.createElement(y),filePath:"12.x/docs/api/misc/config.mdx",preload:async()=>(await y.preload(),n.e("6156").then(n.bind(n,3319))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/misc/other",element:i.createElement(f),filePath:"12.x/docs/api/misc/other.mdx",preload:async()=>(await f.preload(),n.e("1304").then(n.bind(n,9867))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/misc/render-hook",element:i.createElement(b),filePath:"12.x/docs/api/misc/render-hook.mdx",preload:async()=>(await b.preload(),n.e("9826").then(n.bind(n,3689))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/queries",element:i.createElement(I),filePath:"12.x/docs/api/queries.mdx",preload:async()=>(await I.preload(),n.e("4819").then(n.bind(n,862))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/render",element:i.createElement(w),filePath:"12.x/docs/api/render.mdx",preload:async()=>(await w.preload(),n.e("9377").then(n.bind(n,8888))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/screen",element:i.createElement(k),filePath:"12.x/docs/api/screen.mdx",preload:async()=>(await k.preload(),n.e("9277").then(n.bind(n,940))),lang:"en",version:"12.x"},{path:"/12.x/docs/guides/community-resources",element:i.createElement(P),filePath:"12.x/docs/guides/community-resources.mdx",preload:async()=>(await P.preload(),n.e("631").then(n.bind(n,9098))),lang:"en",version:"12.x"},{path:"/12.x/docs/guides/faq",element:i.createElement(T),filePath:"12.x/docs/guides/faq.mdx",preload:async()=>(await T.preload(),n.e("9782").then(n.bind(n,6469))),lang:"en",version:"12.x"},{path:"/12.x/docs/guides/how-to-query",element:i.createElement(q),filePath:"12.x/docs/guides/how-to-query.mdx",preload:async()=>(await q.preload(),n.e("7623").then(n.bind(n,1082))),lang:"en",version:"12.x"},{path:"/12.x/docs/guides/troubleshooting",element:i.createElement(E),filePath:"12.x/docs/guides/troubleshooting.mdx",preload:async()=>(await E.preload(),n.e("836").then(n.bind(n,7103))),lang:"en",version:"12.x"},{path:"/12.x/docs/migration/jest-matchers",element:i.createElement(R),filePath:"12.x/docs/migration/jest-matchers.mdx",preload:async()=>(await R.preload(),n.e("4397").then(n.bind(n,1724))),lang:"en",version:"12.x"},{path:"/12.x/docs/migration/previous/v11",element:i.createElement(A),filePath:"12.x/docs/migration/previous/v11.mdx",preload:async()=>(await A.preload(),n.e("1607").then(n.bind(n,8810))),lang:"en",version:"12.x"},{path:"/12.x/docs/migration/previous/v2",element:i.createElement(N),filePath:"12.x/docs/migration/previous/v2.mdx",preload:async()=>(await N.preload(),n.e("8129").then(n.bind(n,7288))),lang:"en",version:"12.x"},{path:"/12.x/docs/migration/previous/v7",element:i.createElement(_),filePath:"12.x/docs/migration/previous/v7.mdx",preload:async()=>(await _.preload(),n.e("9914").then(n.bind(n,2209))),lang:"en",version:"12.x"},{path:"/12.x/docs/migration/previous/v9",element:i.createElement(S),filePath:"12.x/docs/migration/previous/v9.mdx",preload:async()=>(await S.preload(),n.e("8748").then(n.bind(n,3127))),lang:"en",version:"12.x"},{path:"/12.x/docs/migration/v12",element:i.createElement(C),filePath:"12.x/docs/migration/v12.mdx",preload:async()=>(await C.preload(),n.e("3990").then(n.bind(n,8261))),lang:"en",version:"12.x"},{path:"/12.x/docs/start/intro",element:i.createElement(B),filePath:"12.x/docs/start/intro.md",preload:async()=>(await B.preload(),n.e("4889").then(n.bind(n,2608))),lang:"en",version:"12.x"},{path:"/12.x/docs/start/quick-start",element:i.createElement(j),filePath:"12.x/docs/start/quick-start.mdx",preload:async()=>(await j.preload(),n.e("9273").then(n.bind(n,9712))),lang:"en",version:"12.x"},{path:"/12.x/",element:i.createElement(L),filePath:"12.x/index.md",preload:async()=>(await L.preload(),n.e("8358").then(n.bind(n,7861))),lang:"en",version:"12.x"},{path:"/cookbook/advanced/network-requests",element:i.createElement(Y),filePath:"13.x/cookbook/advanced/network-requests.md",preload:async()=>(await Y.preload(),n.e("9667").then(n.bind(n,6750))),lang:"en",version:"13.x"},{path:"/cookbook/basics/async-tests",element:i.createElement(O),filePath:"13.x/cookbook/basics/async-tests.md",preload:async()=>(await O.preload(),n.e("8617").then(n.bind(n,8672))),lang:"en",version:"13.x"},{path:"/cookbook/basics/custom-render",element:i.createElement(U),filePath:"13.x/cookbook/basics/custom-render.md",preload:async()=>(await U.preload(),n.e("3783").then(n.bind(n,7130))),lang:"en",version:"13.x"},{path:"/cookbook/",element:i.createElement(M),filePath:"13.x/cookbook/index.md",preload:async()=>(await M.preload(),n.e("8187").then(n.bind(n,6822))),lang:"en",version:"13.x"},{path:"/cookbook/state-management/jotai",element:i.createElement(Z),filePath:"13.x/cookbook/state-management/jotai.md",preload:async()=>(await Z.preload(),n.e("4800").then(n.bind(n,211))),lang:"en",version:"13.x"},{path:"/docs/advanced/testing-env",element:i.createElement(F),filePath:"13.x/docs/advanced/testing-env.mdx",preload:async()=>(await F.preload(),n.e("2864").then(n.bind(n,5667))),lang:"en",version:"13.x"},{path:"/docs/advanced/third-party-integration",element:i.createElement(H),filePath:"13.x/docs/advanced/third-party-integration.mdx",preload:async()=>(await H.preload(),n.e("5957").then(n.bind(n,9428))),lang:"en",version:"13.x"},{path:"/docs/advanced/understanding-act",element:i.createElement(J),filePath:"13.x/docs/advanced/understanding-act.mdx",preload:async()=>(await J.preload(),n.e("8293").then(n.bind(n,3476))),lang:"en",version:"13.x"},{path:"/docs/api",element:i.createElement(Q),filePath:"13.x/docs/api.md",preload:async()=>(await Q.preload(),n.e("7497").then(n.bind(n,2336))),lang:"en",version:"13.x"},{path:"/docs/api/events/fire-event",element:i.createElement(D),filePath:"13.x/docs/api/events/fire-event.mdx",preload:async()=>(await D.preload(),n.e("2721").then(n.bind(n,4536))),lang:"en",version:"13.x"},{path:"/docs/api/events/user-event",element:i.createElement(W),filePath:"13.x/docs/api/events/user-event.mdx",preload:async()=>(await W.preload(),n.e("7262").then(n.bind(n,3949))),lang:"en",version:"13.x"},{path:"/docs/api/jest-matchers",element:i.createElement(G),filePath:"13.x/docs/api/jest-matchers.mdx",preload:async()=>(await G.preload(),n.e("4152").then(n.bind(n,2731))),lang:"en",version:"13.x"},{path:"/docs/api/misc/accessibility",element:i.createElement(V),filePath:"13.x/docs/api/misc/accessibility.mdx",preload:async()=>(await V.preload(),n.e("8353").then(n.bind(n,2936))),lang:"en",version:"13.x"},{path:"/docs/api/misc/async",element:i.createElement(K),filePath:"13.x/docs/api/misc/async.mdx",preload:async()=>(await K.preload(),n.e("8481").then(n.bind(n,7608))),lang:"en",version:"13.x"},{path:"/docs/api/misc/config",element:i.createElement(z),filePath:"13.x/docs/api/misc/config.mdx",preload:async()=>(await z.preload(),n.e("8901").then(n.bind(n,2084))),lang:"en",version:"13.x"},{path:"/docs/api/misc/other",element:i.createElement(X),filePath:"13.x/docs/api/misc/other.mdx",preload:async()=>(await X.preload(),n.e("6047").then(n.bind(n,1794))),lang:"en",version:"13.x"},{path:"/docs/api/misc/render-hook",element:i.createElement($),filePath:"13.x/docs/api/misc/render-hook.mdx",preload:async()=>(await $.preload(),n.e("3453").then(n.bind(n,9004))),lang:"en",version:"13.x"},{path:"/docs/api/queries",element:i.createElement(ee),filePath:"13.x/docs/api/queries.mdx",preload:async()=>(await ee.preload(),n.e("9150").then(n.bind(n,8285))),lang:"en",version:"13.x"},{path:"/docs/api/render",element:i.createElement(et),filePath:"13.x/docs/api/render.mdx",preload:async()=>(await et.preload(),n.e("6958").then(n.bind(n,1389))),lang:"en",version:"13.x"},{path:"/docs/api/screen",element:i.createElement(en),filePath:"13.x/docs/api/screen.mdx",preload:async()=>(await en.preload(),n.e("8222").then(n.bind(n,4061))),lang:"en",version:"13.x"},{path:"/docs/guides/common-mistakes",element:i.createElement(ei),filePath:"13.x/docs/guides/common-mistakes.mdx",preload:async()=>(await ei.preload(),n.e("4460").then(n.bind(n,7991))),lang:"en",version:"13.x"},{path:"/docs/guides/community-resources",element:i.createElement(ea),filePath:"13.x/docs/guides/community-resources.mdx",preload:async()=>(await ea.preload(),n.e("328").then(n.bind(n,3083))),lang:"en",version:"13.x"},{path:"/docs/guides/faq",element:i.createElement(er),filePath:"13.x/docs/guides/faq.mdx",preload:async()=>(await er.preload(),n.e("4553").then(n.bind(n,6032))),lang:"en",version:"13.x"},{path:"/docs/guides/how-to-query",element:i.createElement(eo),filePath:"13.x/docs/guides/how-to-query.mdx",preload:async()=>(await eo.preload(),n.e("9950").then(n.bind(n,7341))),lang:"en",version:"13.x"},{path:"/docs/guides/llm-guidelines",element:i.createElement(ed),filePath:"13.x/docs/guides/llm-guidelines.mdx",preload:async()=>(await ed.preload(),n.e("3974").then(n.bind(n,3285))),lang:"en",version:"13.x"},{path:"/docs/guides/react-19",element:i.createElement(es),filePath:"13.x/docs/guides/react-19.mdx",preload:async()=>(await es.preload(),n.e("3527").then(n.bind(n,2266))),lang:"en",version:"13.x"},{path:"/docs/guides/troubleshooting",element:i.createElement(ec),filePath:"13.x/docs/guides/troubleshooting.mdx",preload:async()=>(await ec.preload(),n.e("4359").then(n.bind(n,4474))),lang:"en",version:"13.x"},{path:"/docs/migration/jest-matchers",element:i.createElement(eh),filePath:"13.x/docs/migration/jest-matchers.mdx",preload:async()=>(await eh.preload(),n.e("4756").then(n.bind(n,3055))),lang:"en",version:"13.x"},{path:"/docs/migration/previous/v11",element:i.createElement(el),filePath:"13.x/docs/migration/previous/v11.mdx",preload:async()=>(await el.preload(),n.e("2184").then(n.bind(n,2139))),lang:"en",version:"13.x"},{path:"/docs/migration/previous/v12",element:i.createElement(ep),filePath:"13.x/docs/migration/previous/v12.mdx",preload:async()=>(await ep.preload(),n.e("9637").then(n.bind(n,8900))),lang:"en",version:"13.x"},{path:"/docs/migration/previous/v2",element:i.createElement(ex),filePath:"13.x/docs/migration/previous/v2.mdx",preload:async()=>(await ex.preload(),n.e("9408").then(n.bind(n,4979))),lang:"en",version:"13.x"},{path:"/docs/migration/previous/v7",element:i.createElement(eu),filePath:"13.x/docs/migration/previous/v7.mdx",preload:async()=>(await eu.preload(),n.e("1359").then(n.bind(n,6050))),lang:"en",version:"13.x"},{path:"/docs/migration/previous/v9",element:i.createElement(em),filePath:"13.x/docs/migration/previous/v9.mdx",preload:async()=>(await em.preload(),n.e("6341").then(n.bind(n,660))),lang:"en",version:"13.x"},{path:"/docs/migration/v13",element:i.createElement(eg),filePath:"13.x/docs/migration/v13.mdx",preload:async()=>(await eg.preload(),n.e("5868").then(n.bind(n,8103))),lang:"en",version:"13.x"},{path:"/docs/start/intro",element:i.createElement(ev),filePath:"13.x/docs/start/intro.md",preload:async()=>(await ev.preload(),n.e("7146").then(n.bind(n,750))),lang:"en",version:"13.x"},{path:"/docs/start/quick-start",element:i.createElement(ey),filePath:"13.x/docs/start/quick-start.mdx",preload:async()=>(await ey.preload(),n.e("7240").then(n.bind(n,507))),lang:"en",version:"13.x"},{path:"/",element:i.createElement(ef),filePath:"13.x/index.md",preload:async()=>(await ef.preload(),n.e("7863").then(n.bind(n,3258))),lang:"en",version:"13.x"},{path:"/14.x/cookbook/advanced/network-requests",element:i.createElement(eb),filePath:"14.x/cookbook/advanced/network-requests.md",preload:async()=>(await eb.preload(),n.e("2222").then(n.bind(n,1725))),lang:"en",version:"14.x"},{path:"/14.x/cookbook/basics/async-events",element:i.createElement(eI),filePath:"14.x/cookbook/basics/async-events.md",preload:async()=>(await eI.preload(),n.e("7340").then(n.bind(n,1511))),lang:"en",version:"14.x"},{path:"/14.x/cookbook/basics/custom-render",element:i.createElement(ew),filePath:"14.x/cookbook/basics/custom-render.md",preload:async()=>(await ew.preload(),n.e("92").then(n.bind(n,6087))),lang:"en",version:"14.x"},{path:"/14.x/cookbook/",element:i.createElement(ek),filePath:"14.x/cookbook/index.md",preload:async()=>(await ek.preload(),n.e("7562").then(n.bind(n,3809))),lang:"en",version:"14.x"},{path:"/14.x/cookbook/state-management/jotai",element:i.createElement(eP),filePath:"14.x/cookbook/state-management/jotai.md",preload:async()=>(await eP.preload(),n.e("3107").then(n.bind(n,9038))),lang:"en",version:"14.x"},{path:"/14.x/docs/advanced/testing-env",element:i.createElement(eT),filePath:"14.x/docs/advanced/testing-env.mdx",preload:async()=>(await eT.preload(),n.e("5197").then(n.bind(n,2076))),lang:"en",version:"14.x"},{path:"/14.x/docs/advanced/third-party-integration",element:i.createElement(eq),filePath:"14.x/docs/advanced/third-party-integration.mdx",preload:async()=>(await eq.preload(),n.e("4064").then(n.bind(n,2912))),lang:"en",version:"14.x"},{path:"/14.x/docs/advanced/understanding-act",element:i.createElement(eE),filePath:"14.x/docs/advanced/understanding-act.mdx",preload:async()=>(await eE.preload(),n.e("7296").then(n.bind(n,163))),lang:"en",version:"14.x"},{path:"/14.x/docs/api",element:i.createElement(eR),filePath:"14.x/docs/api.md",preload:async()=>(await eR.preload(),n.e("2196").then(n.bind(n,5535))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/events/fire-event",element:i.createElement(eA),filePath:"14.x/docs/api/events/fire-event.mdx",preload:async()=>(await eA.preload(),n.e("594").then(n.bind(n,1961))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/events/user-event",element:i.createElement(eN),filePath:"14.x/docs/api/events/user-event.mdx",preload:async()=>(await eN.preload(),n.e("8885").then(n.bind(n,4180))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/jest-matchers",element:i.createElement(e_),filePath:"14.x/docs/api/jest-matchers.mdx",preload:async()=>(await e_.preload(),n.e("7759").then(n.bind(n,5826))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/misc/accessibility",element:i.createElement(eS),filePath:"14.x/docs/api/misc/accessibility.mdx",preload:async()=>(await eS.preload(),n.e("3508").then(n.bind(n,2079))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/misc/async",element:i.createElement(eC),filePath:"14.x/docs/api/misc/async.mdx",preload:async()=>(await eC.preload(),n.e("9808").then(n.bind(n,9795))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/misc/config",element:i.createElement(eB),filePath:"14.x/docs/api/misc/config.mdx",preload:async()=>(await eB.preload(),n.e("1782").then(n.bind(n,8597))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/misc/other",element:i.createElement(ej),filePath:"14.x/docs/api/misc/other.mdx",preload:async()=>(await ej.preload(),n.e("130").then(n.bind(n,3017))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/misc/render-hook",element:i.createElement(eL),filePath:"14.x/docs/api/misc/render-hook.mdx",preload:async()=>(await eL.preload(),n.e("1236").then(n.bind(n,3519))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/queries",element:i.createElement(eY),filePath:"14.x/docs/api/queries.mdx",preload:async()=>(await eY.preload(),n.e("221").then(n.bind(n,2140))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/render",element:i.createElement(eO),filePath:"14.x/docs/api/render.mdx",preload:async()=>(await eO.preload(),n.e("7515").then(n.bind(n,3510))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/screen",element:i.createElement(eU),filePath:"14.x/docs/api/screen.mdx",preload:async()=>(await eU.preload(),n.e("9419").then(n.bind(n,3078))),lang:"en",version:"14.x"},{path:"/14.x/docs/guides/common-mistakes",element:i.createElement(eM),filePath:"14.x/docs/guides/common-mistakes.mdx",preload:async()=>(await eM.preload(),n.e("1153").then(n.bind(n,3992))),lang:"en",version:"14.x"},{path:"/14.x/docs/guides/community-resources",element:i.createElement(eZ),filePath:"14.x/docs/guides/community-resources.mdx",preload:async()=>(await eZ.preload(),n.e("7721").then(n.bind(n,6144))),lang:"en",version:"14.x"},{path:"/14.x/docs/guides/faq",element:i.createElement(eF),filePath:"14.x/docs/guides/faq.mdx",preload:async()=>(await eF.preload(),n.e("8632").then(n.bind(n,9099))),lang:"en",version:"14.x"},{path:"/14.x/docs/guides/how-to-query",element:i.createElement(eH),filePath:"14.x/docs/guides/how-to-query.mdx",preload:async()=>(await eH.preload(),n.e("7753").then(n.bind(n,5184))),lang:"en",version:"14.x"},{path:"/14.x/docs/guides/llm-guidelines",element:i.createElement(eJ),filePath:"14.x/docs/guides/llm-guidelines.mdx",preload:async()=>(await eJ.preload(),n.e("9873").then(n.bind(n,6312))),lang:"en",version:"14.x"},{path:"/14.x/docs/guides/troubleshooting",element:i.createElement(eQ),filePath:"14.x/docs/guides/troubleshooting.mdx",preload:async()=>(await eQ.preload(),n.e("6930").then(n.bind(n,7513))),lang:"en",version:"14.x"},{path:"/14.x/docs/start/intro",element:i.createElement(eD),filePath:"14.x/docs/start/intro.md",preload:async()=>(await eD.preload(),n.e("2755").then(n.bind(n,2190))),lang:"en",version:"14.x"},{path:"/14.x/docs/start/migration-v14",element:i.createElement(eW),filePath:"14.x/docs/start/migration-v14.mdx",preload:async()=>(await eW.preload(),n.e("543").then(n.bind(n,898))),lang:"en",version:"14.x"},{path:"/14.x/docs/start/quick-start",element:i.createElement(eG),filePath:"14.x/docs/start/quick-start.mdx",preload:async()=>(await eG.preload(),n.e("6811").then(n.bind(n,6454))),lang:"en",version:"14.x"},{path:"/14.x/",element:i.createElement(eV),filePath:"14.x/index.md",preload:async()=>(await eV.preload(),n.e("5608").then(n.bind(n,4091))),lang:"en",version:"14.x"},{path:"/404",element:i.createElement(eK),filePath:"404.mdx",preload:async()=>(await eK.preload(),n.e("6466").then(n.bind(n,7049))),lang:"en",version:"13.x"}]},6701(e,t,n){n.d(t,{A:()=>i});let i={base:"/react-native-testing-library/",title:"React Native Testing Library",description:"Helps you to write better tests with less effort.",icon:"/logo-light.png",route:{cleanUrls:!0},themeConfig:{enableContentAnimation:!0,enableScrollToTop:!0,outlineTitle:"Contents",footer:{message:"Copyright © 2026 Callstack Open Source"},socialLinks:[{icon:"github",mode:"link",content:"https://github.com/callstack/react-native-testing-library"}],nav:[{text:"Docs",link:"/docs/start/intro.html",activeMatch:"^/docs/"},{text:"Cookbook",link:"/cookbook/index.html",activeMatch:"^/cookbook/"},{text:"Examples",link:"https://github.com/callstack/react-native-testing-library/tree/main/examples"}],sidebar:{"/docs/":[{text:"Getting started",items:[{text:"Introduction",link:"/docs/start/intro.html"},{text:"Quick Start",link:"/docs/start/quick-start.html"}],collapsed:!1,collapsible:!0},{text:"API reference",items:[{text:"Render function",link:"/docs/api/render.html"},{text:"Screen object",link:"/docs/api/screen.html"},{text:"Queries",link:"/docs/api/queries.html"},{text:"Jest Matchers",link:"/docs/api/jest-matchers.html"},{text:"Triggering events",items:[{text:"Fire Event",link:"/docs/api/events/fire-event.html"},{text:"User Event",link:"/docs/api/events/user-event.html"}],collapsed:!1,collapsible:!0},{text:"Miscellaneous",items:[{text:"Accessibility",link:"/docs/api/misc/accessibility.html"},{text:"Async utilities",link:"/docs/api/misc/async.html"},{text:"Config",link:"/docs/api/misc/config.html"},{text:"Other",link:"/docs/api/misc/other.html"},{text:"Render Hook",link:"/docs/api/misc/render-hook.html"}],collapsed:!1,collapsible:!0}],collapsed:!1,collapsible:!0},{text:"Guides",items:[{text:"How to Query",link:"/docs/guides/how-to-query.html"},{text:"Common Mistakes",link:"/docs/guides/common-mistakes.html"},{text:"LLM Guidelines",link:"/docs/guides/llm-guidelines.html"},{text:"React 19",link:"/docs/guides/react-19.html"},{text:"Troubleshooting",link:"/docs/guides/troubleshooting.html"},{text:"FAQ",link:"/docs/guides/faq.html"},{text:"Community Resources",link:"/docs/guides/community-resources.html"}],collapsed:!1,collapsible:!0},{text:"Advanced Guides",items:[{text:"Testing Environment",link:"/docs/advanced/testing-env.html"},{text:"Third-party Integration",link:"/docs/advanced/third-party-integration.html"},{text:"Understanding Act",link:"/docs/advanced/understanding-act.html"}],collapsed:!1,collapsible:!0},{text:"Migration Guides",collapsed:!0,items:[{text:"v13 Migration",link:"/docs/migration/v13.html"},{text:"Jest Matchers",link:"/docs/migration/jest-matchers.html"},{text:"Previous versions",collapsed:!0,items:[{text:"v12",link:"/docs/migration/previous/v12.html"},{text:"v11",link:"/docs/migration/previous/v11.html"},{text:"v9",link:"/docs/migration/previous/v9.html"},{text:"v7",link:"/docs/migration/previous/v7.html"},{text:"v2",link:"/docs/migration/previous/v2.html"}],collapsible:!0}],collapsible:!0}],"/cookbook/":[{text:"Cookbook",link:"/cookbook/index.html"},{text:"Basic Recipes",items:[{text:"Async Tests",link:"/cookbook/basics/async-tests.html"},{text:"Custom Render",link:"/cookbook/basics/custom-render.html"}],collapsed:!1,collapsible:!0},{text:"Advanced Recipes",items:[{text:"Network Requests",link:"/cookbook/advanced/network-requests.html"}],collapsed:!1,collapsible:!0},{text:"State Management Recipes",items:[{text:"Jotai",link:"/cookbook/state-management/jotai.html"}],collapsed:!1,collapsible:!0}],"/12.x/docs/":[{text:"Getting started",items:[{text:"Introduction",link:"/12.x/docs/start/intro.html"},{text:"Quick Start",link:"/12.x/docs/start/quick-start.html"}],collapsed:!1,collapsible:!0},{text:"API reference",items:[{text:"Render function",link:"/12.x/docs/api/render.html"},{text:"Screen object",link:"/12.x/docs/api/screen.html"},{text:"Queries",link:"/12.x/docs/api/queries.html"},{text:"Jest Matchers",link:"/12.x/docs/api/jest-matchers.html"},{text:"Triggering events",items:[{text:"Fire Event",link:"/12.x/docs/api/events/fire-event.html"},{text:"User Event",link:"/12.x/docs/api/events/user-event.html"}],collapsed:!1,collapsible:!0},{text:"Miscellaneous",items:[{text:"Accessibility",link:"/12.x/docs/api/misc/accessibility.html"},{text:"Async utilities",link:"/12.x/docs/api/misc/async.html"},{text:"Config",link:"/12.x/docs/api/misc/config.html"},{text:"Other",link:"/12.x/docs/api/misc/other.html"},{text:"Render Hook",link:"/12.x/docs/api/misc/render-hook.html"}],collapsed:!1,collapsible:!0}],collapsed:!1,collapsible:!0},{text:"Guides",items:[{text:"How to Query",link:"/12.x/docs/guides/how-to-query.html"},{text:"Troubleshooting",link:"/12.x/docs/guides/troubleshooting.html"},{text:"FAQ",link:"/12.x/docs/guides/faq.html"},{text:"Community Resources",link:"/12.x/docs/guides/community-resources.html"}],collapsed:!1,collapsible:!0},{text:"Advanced Guides",items:[{text:"Testing Environment",link:"/12.x/docs/advanced/testing-env.html"},{text:"Understanding Act",link:"/12.x/docs/advanced/understanding-act.html"}],collapsed:!1,collapsible:!0},{text:"Migration Guides",collapsed:!0,items:[{text:"v12 Migration",link:"/12.x/docs/migration/v12.html"},{text:"Jest Matchers",link:"/12.x/docs/migration/jest-matchers.html"},{text:"Previous versions",collapsed:!0,items:[{text:"v11",link:"/12.x/docs/migration/previous/v11.html"},{text:"v9",link:"/12.x/docs/migration/previous/v9.html"},{text:"v7",link:"/12.x/docs/migration/previous/v7.html"},{text:"v2",link:"/12.x/docs/migration/previous/v2.html"}],collapsible:!0}],collapsible:!0}],"/12.x/cookbook/":[{text:"Cookbook",link:"/12.x/cookbook/index.html"},{text:"Basic Recipes",items:[{text:"Async Tests",link:"/12.x/cookbook/basics/async-tests.html"},{text:"Custom Render",link:"/12.x/cookbook/basics/custom-render.html"}],collapsed:!1,collapsible:!0},{text:"Advanced Recipes",items:[{text:"Network Requests",link:"/12.x/cookbook/advanced/network-requests.html"}],collapsed:!1,collapsible:!0},{text:"State Management Recipes",items:[{text:"Jotai",link:"/12.x/cookbook/state-management/jotai.html"}],collapsed:!1,collapsible:!0}],"/14.x/docs/":[{text:"Getting started",items:[{text:"Introduction",link:"/14.x/docs/start/intro.html"},{text:"Quick Start",link:"/14.x/docs/start/quick-start.html"},{text:"v14 Migration",link:"/14.x/docs/start/migration-v14.html"}],collapsed:!1,collapsible:!0},{text:"API reference",items:[{text:"Render function",link:"/14.x/docs/api/render.html"},{text:"Screen object",link:"/14.x/docs/api/screen.html"},{text:"Queries",link:"/14.x/docs/api/queries.html"},{text:"Jest Matchers",link:"/14.x/docs/api/jest-matchers.html"},{text:"Triggering events",items:[{text:"Fire Event",link:"/14.x/docs/api/events/fire-event.html"},{text:"User Event",link:"/14.x/docs/api/events/user-event.html"}],collapsed:!1,collapsible:!0},{text:"Miscellaneous",items:[{text:"Accessibility",link:"/14.x/docs/api/misc/accessibility.html"},{text:"Async utilities",link:"/14.x/docs/api/misc/async.html"},{text:"Config",link:"/14.x/docs/api/misc/config.html"},{text:"Other",link:"/14.x/docs/api/misc/other.html"},{text:"Render Hook",link:"/14.x/docs/api/misc/render-hook.html"}],collapsed:!1,collapsible:!0}],collapsed:!1,collapsible:!0},{text:"Guides",items:[{text:"How to Query",link:"/14.x/docs/guides/how-to-query.html"},{text:"Common Mistakes",link:"/14.x/docs/guides/common-mistakes.html"},{text:"LLM Guidelines",link:"/14.x/docs/guides/llm-guidelines.html"},{text:"Troubleshooting",link:"/14.x/docs/guides/troubleshooting.html"},{text:"FAQ",link:"/14.x/docs/guides/faq.html"},{text:"Community Resources",link:"/14.x/docs/guides/community-resources.html"}],collapsed:!1,collapsible:!0},{text:"Advanced Guides",items:[{text:"Testing Environment",link:"/14.x/docs/advanced/testing-env.html"},{text:"Third-party Integration",link:"/14.x/docs/advanced/third-party-integration.html"},{text:"Understanding Act",link:"/14.x/docs/advanced/understanding-act.html"}],collapsed:!1,collapsible:!0}],"/14.x/cookbook/":[{text:"Cookbook",link:"/14.x/cookbook/index.html"},{text:"Basic Recipes",items:[{text:"Async Events",link:"/14.x/cookbook/basics/async-events.html"},{text:"Custom Render",link:"/14.x/cookbook/basics/custom-render.html"}],collapsed:!1,collapsible:!0},{text:"Advanced Recipes",items:[{text:"Network Requests",link:"/14.x/cookbook/advanced/network-requests.html"}],collapsed:!1,collapsible:!0},{text:"State Management Recipes",items:[{text:"Jotai",link:"/14.x/cookbook/state-management/jotai.html"}],collapsed:!1,collapsible:!0}]}},lang:"en",locales:[],logo:{light:"/img/logo-light.svg",dark:"/img/logo-dark.svg"},logoText:"",logoHref:"",multiVersion:{default:"13.x",versions:["12.x","13.x","14.x"]},search:{versioned:!0},markdown:{showLineNumbers:!1,defaultWrapCode:!1,shiki:{}}}},7425(e,t,n){n.d(t,{Ab:()=>r.Ab,G5:()=>r.G5,N_:()=>r.N_,PE:()=>c,Pq:()=>r.Pq,RP:()=>r.RP,ZZ:()=>r.ZZ,bL:()=>r.bL,nl:()=>r.nl});var i=n(4848),a=n(7099),r=n(4424);let o=()=>(0,i.jsx)("div",{className:"pre-release-banner",children:(0,i.jsxs)("span",{children:["You are viewing documentation for ",(0,i.jsx)("strong",{children:"v14 RC"}),"."]})}),d=e=>{let{version:t}=e;return(0,i.jsxs)("div",{className:"old-version-banner",children:[(0,i.jsxs)("span",{children:["You're viewing the documentation for ",(0,i.jsx)("strong",{children:t}),". Current latest version is"," ",(0,i.jsx)("strong",{children:"13.x"}),"."]}),(0,i.jsxs)(r.N_,{href:"/react-native-testing-library/docs/start/intro",className:"old-version-banner-link",children:["View latest version ",(0,i.jsx)("strong",{children:"here"}),"."]})]})},s=()=>{let{pathname:e}=(0,a.zy)();return e.includes("/14.x/")?(0,i.jsx)(o,{}):e.includes("/12.x/")?(0,i.jsx)(d,{version:"12.x"}):null},c=()=>(0,i.jsx)(r.PE,{beforeNav:(0,i.jsx)(s,{})})}},s={};function c(e){var t=s[e];if(void 0!==t)return t.exports;var n=s[e]={exports:{}};return d[e].call(n.exports,n,n.exports,c),n.exports}c.m=d,c.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return c.d(t,{a:t}),t},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,c.t=function(n,i){if(1&i&&(n=this(n)),8&i||"object"==typeof n&&n&&(4&i&&n.__esModule||16&i&&"function"==typeof n.then))return n;var a=Object.create(null);c.r(a);var r={};e=e||[null,t({}),t([]),t(t)];for(var o=2&i&&n;("object"==typeof o||"function"==typeof o)&&!~e.indexOf(o);o=t(o))Object.getOwnPropertyNames(o).forEach(e=>{r[e]=()=>n[e]});return r.default=()=>n,c.d(a,r),a},c.d=(e,t)=>{for(var n in t)c.o(t,n)&&!c.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},c.f={},c.e=e=>Promise.all(Object.keys(c.f).reduce((t,n)=>(c.f[n](e,t),t),[])),c.u=e=>"static/js/async/"+e+"."+({1008:"b1f0dda175",1038:"eb6a84e7c4",1153:"f78355f326",1236:"89751a9de3",130:"ad4b731a31",1304:"851d5f63f0",1359:"e7cd54103a",1607:"5c253cc1e6",1782:"39730e1b26",1858:"9cacb9f18a",2184:"21e668ff8f",2196:"b85f1e33c6",221:"d1d1eecda4",2222:"e4219197a5",2721:"f7d5a21d1e",2755:"e189cf0d84",2864:"620134a1f9",3107:"7f9d7e1692",328:"342b028aa7",3435:"3658110b0b",3453:"8847d1880f",3508:"ec869e079e",3527:"735015dc16",3783:"f4fb94edbf",3974:"5afbd7ac76",3990:"33356aa775",4064:"51bb89469f",4152:"0f4f486f83",4359:"4ce3992c8f",4397:"63c8110b9e",4460:"75cded72f7",4553:"252778f9e6",4756:"ec1ea1489f",4800:"198efb3c72",4819:"c87a288763",4889:"73af98e385",4936:"19c9836cd9",5197:"b12b147b48",543:"b484d49a87",5507:"7697238262",5608:"9745905e0c",5816:"9ec1e73c3d",5868:"d20715eda8",594:"cfd2e88542",5957:"54d54b0d67",6047:"c368b58ff2",6137:"4f8bcdd711",6156:"36f094c15a",631:"5943a4bdf3",6341:"29aa18fd2d",6466:"161bfed80d",6811:"0c9214f3ea",6930:"570ea35492",6958:"0e94eb3026",7146:"96cf008c15",7240:"aa6941637a",7262:"891f23ef0b",7296:"e9154a3c13",7340:"94b9988bf4",7351:"5ac093b30d",7497:"6df9901b3b",7515:"21bfaf1f22",7562:"0746b461e5",7623:"31e696a01f",7721:"aafd3d35b1",7753:"9825f7bd57",7759:"dea7c10e5a",7863:"25db6455c2",8129:"1520c4f94a",8146:"9a723fbe54",8187:"f3a75de1cb",8222:"2c5ffb0fc0",8293:"1b919addf6",8353:"5bbb73cd64",8358:"adc771bfb4",836:"8b5f5c552b",8397:"3a94532f76",8481:"090b538456",8617:"2bd68393e9",8632:"5efd81696e",8648:"8b66180249",8748:"bef8c201cf",8750:"f5a8cb4fad",8810:"8f39c110a3",8885:"d76583d43d",8901:"ca0d5e9ff2",9150:"5adb49dcde",92:"e67edfef80",9273:"66447e6e6c",9277:"1f140afe65",9377:"c7a2de4a08",9408:"a5e068033f",9419:"4a0828e91a",9637:"4ee3fa727a",9667:"094d339b43",9782:"4f0472abe1",9808:"fd6f06399e",9826:"7537a1ed35",9873:"64bf349afa",9914:"08c1c2547c",9950:"643c38eb89"})[e]+".js",c.miniCssF=e=>""+e+".css",c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n={},c.l=function(e,t,i,a){if(n[e])return void n[e].push(t);if(void 0!==i)for(var r,o,d=document.getElementsByTagName("script"),s=0;s{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i=[],c.O=(e,t,n,a)=>{if(t){a=a||0;for(var r=i.length;r>0&&i[r-1][2]>a;r--)i[r]=i[r-1];i[r]=[t,n,a];return}for(var o=1/0,r=0;r=a)&&Object.keys(c.O).every(e=>c.O[e](t[s]))?t.splice(s--,1):(d=!1,an=a[e]=[t,i]);t.push(n[2]=i);var r=c.p+c.u(e),o=Error();c.l(r,function(t){if(c.o(a,e)&&(0!==(n=a[e])&&(a[e]=void 0),n)){var i=t&&("load"===t.type?"missing":t.type),r=t&&t.target&&t.target.src;o.message="Loading chunk "+e+" failed.\n("+i+": "+r+")",o.name="ChunkLoadError",o.type=i,o.request=r,n[1](o)}},"chunk-"+e,e)}},c.O.j=e=>0===a[e],r=(e,t)=>{var n,i,[r,o,d]=t,s=0;if(r.some(e=>0!==a[e])){for(n in o)c.o(o,n)&&(c.m[n]=o[n]);if(d)var h=d(c)}for(e&&e(t);sc(2531)),c.O(void 0,["4014","9783","9535","2482"],()=>c(5344)),c.O(void 0,["4014","9783","9535","2482"],()=>c(7425));var h=c.O(void 0,["4014","9783","9535","2482"],()=>c(2581));h=c.O(h)})(); \ No newline at end of file +(()=>{"use strict";var e,t,n,i,a,r,o,d={3853(e,t,n){n.d(t,{Y:()=>i,z:()=>a});let i={pages:[{title:"Network Requests",routePath:"/12.x/cookbook/advanced/network-requests",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"phonebook-example",text:"Phonebook Example",depth:2,charIndex:569},{id:"start-testing-with-a-simple-test",text:"Start testing with a simple test",depth:2,charIndex:4791},{id:"testing-error-handling",text:"Testing error handling",depth:2,charIndex:7885},{id:"global-guarding-against-unwanted-api-requests",text:"Global guarding against unwanted API requests",depth:2,charIndex:9718},{id:"conclusion",text:"Conclusion",depth:2,charIndex:10736},{id:"further-reading-and-alternatives",text:"Further Reading and Alternatives",depth:2,charIndex:11356}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/advanced/network-requests.md"},{title:"Async tests",routePath:"/12.x/cookbook/basics/async-tests",lang:"en",toc:[{id:"summary",text:"Summary",depth:2,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:875},{id:"async-utilities",text:"Async utilities",depth:2,charIndex:2018},{id:"findby-queries",text:"`findBy*` queries",depth:3,charIndex:2106},{id:"example-1",text:"Example",depth:4,charIndex:2834},{id:"waitfor-function",text:"`waitFor` function",depth:3,charIndex:3078},{id:"example-2",text:"Example",depth:4,charIndex:3601},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3,charIndex:3823},{id:"example-3",text:"Example",depth:4,charIndex:4416},{id:"fake-timers",text:"Fake Timers",depth:2,charIndex:4491}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/basics/async-tests.md"},{title:"Custom `render` function",routePath:"/12.x/cookbook/basics/custom-render",lang:"en",toc:[{id:"summary",text:"Summary",depth:3,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:291},{id:"more-info",text:"More info",depth:3,charIndex:1109},{id:"additional-params",text:"Additional params",depth:4,charIndex:1120},{id:"multiple-functions",text:"Multiple functions",depth:4,charIndex:1442},{id:"async-function",text:"Async function",depth:4,charIndex:1731}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/basics/custom-render.md",description:"Summary RNTL exposes the render function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests. Example Example full source code. More info Additional params A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management. Multiple functions Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens. Async function Make it async if you want to put some async setup in your custom render function."},{title:"Introduction",routePath:"/12.x/cookbook/",lang:"en",toc:[{id:"whats-inside-the-cookbook",text:"What's Inside the Cookbook?",depth:2,charIndex:431},{id:"whats-next",text:"What's Next?",depth:2,charIndex:1024}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/index.md",description:"Welcome to the React Native Testing Library (RNTL) Cookbook! This app is your go-to resource for learning how to effectively test React Native applications. It provides a collection of best practices, ready-made recipes, and tips & tricks to simplify and improve your testing workflow. Whether you’re a beginner just getting started or a seasoned developer looking to sharpen your skills, the Cookbook has something for everyone."},{title:"Jotai",routePath:"/12.x/cookbook/state-management/jotai",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"task-list-example",text:"Task List Example",depth:2,charIndex:332},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2,charIndex:1433},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2,charIndex:1898},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2,charIndex:3545},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2,charIndex:4795},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2,charIndex:5398},{id:"conclusion",text:"Conclusion",depth:2,charIndex:6074}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/state-management/jotai.md"},{title:"Testing environment",routePath:"/12.x/docs/advanced/testing-env",lang:"en",toc:[{id:"react-renderers",text:"React renderers",depth:2,charIndex:664},{id:"react-test-renderer",text:"React Test Renderer",depth:2,charIndex:1375},{id:"element-tree",text:"Element tree",depth:2,charIndex:2752},{id:"host-and-composite-components",text:"Host and composite components",depth:2,charIndex:3558},{id:"differentiating-between-host-and-composite-elements",text:"Differentiating between host and composite elements",depth:3,charIndex:5480},{id:"tree-nodes",text:"Tree nodes",depth:2,charIndex:5989},{id:"asserting-props",text:"Asserting props",depth:3,charIndex:6303},{id:"tree-navigation",text:"Tree navigation",depth:2,charIndex:7143},{id:"queries",text:"Queries",depth:2,charIndex:7880}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/advanced/testing-env.mdx",description:"React Native Testing Library allows you to write integration and component tests for your React Native app or library. While the JSX code used in tests closely resembles your React Native app, things are not as simple as they might appear. This document will describe the key elements of our testing environment and highlight things to be aware of when writing more advanced tests or diagnosing issues."},{title:"Understanding `act` function",routePath:"/12.x/docs/advanced/understanding-act",lang:"en",toc:[{id:"act-warnings",text:"`act` warnings",depth:2,charIndex:273},{id:"synchronous-act",text:"Synchronous `act`",depth:2,charIndex:968},{id:"responsibility",text:"Responsibility",depth:3,charIndex:985},{id:"when-to-use-act",text:"When to use act",depth:3,charIndex:2771},{id:"implementation",text:"Implementation",depth:3,charIndex:3854},{id:"asynchronous-act",text:"Asynchronous `act`",depth:2,charIndex:4315},{id:"asynchronous-code",text:"Asynchronous code",depth:3,charIndex:4841},{id:"solution-with-fake-timers",text:"Solution with fake timers",depth:3,charIndex:6146},{id:"solution-with-real-timers",text:"Solution with real timers",depth:3,charIndex:6658},{id:"async-act-warning",text:"Async act warning",depth:3,charIndex:8079},{id:"references",text:"References",depth:2,charIndex:8714}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/advanced/understanding-act.mdx",description:"When writing RNTL tests one of the things that confuses developers the most are cryptic act() function errors logged into console. In this article I will try to build an understanding of the purpose and behaviour of act() so you can build your tests with more confidence."},{title:"API Overview",routePath:"/12.x/docs/api",lang:"en",toc:[],frontmatter:{uri:"/api"},version:"12.x",_relativePath:"12.x/docs/api.md",description:"React Native Testing Library consists of following APIs: render function - render your UI components for testing purposesscreen object - access rendered UI:Queries - find relevant components by various predicates: role, text, test ids, etcLifecycle methods: rerender, unmountHelpers: debug, toJSON, rootJest matchers - validate assumptions about your UIUser Event - simulate common user interactions like press or type in a realistic wayFire Event - simulate any component event in a simplified way purposesMisc APIs:renderHook function - render hooks for testingAsync utils: findBy* queries, wait, waitForElementToBeRemovedConfiguration: configure, resetToDefaultsAccessibility: isHiddenFromAccessibilityOther: within, act, cleanup"},{title:"Fire Event API",routePath:"/12.x/docs/api/events/fire-event",lang:"en",toc:[{id:"press",text:"`fireEvent.press`",depth:3,charIndex:1846},{id:"change-text",text:"`fireEvent.changeText`",depth:3,charIndex:2537},{id:"scroll",text:"`fireEvent.scroll`",depth:3,charIndex:3201},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4,charIndex:3382}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/events/fire-event.mdx",description:"The fireEvent API allows you to trigger all kinds of event handlers on both host and composite components. It will try to invoke a single event handler traversing the component tree bottom-up from passed element and trying to find enabled event handler named onXxx when xxx is the name of the event passed. Unlike User Event, this API does not automatically pass event object to event handler, this is responsibility of the user to construct such object. An example using fireEvent with native events that aren't already aliased by the fireEvent api. FireEvent exposes convenience methods for common events like: press, changeText, scroll. fireEvent.press {#press} Invokes press event handler on the element or parent element in the tree. fireEvent.changeText {#change-text} Invokes changeText event handler on the element or parent element in the tree. fireEvent.scroll {#scroll} Invokes scroll event handler on the element or parent element in the tree. On a ScrollView"},{title:"User Event interactions",routePath:"/12.x/docs/api/events/user-event",lang:"en",toc:[{id:"comparison-with-fire-event-api",text:"Comparison with Fire Event API",depth:2,charIndex:91},{id:"setup",text:"`setup()`",depth:2,charIndex:1294},{id:"setup-options",text:"Options",depth:3,charIndex:1528},{id:"press",text:"`press()`",depth:2,charIndex:1789},{id:"longpress",text:"`longPress()`",depth:2,charIndex:2537},{id:"longpress-options",text:"Options",depth:3,charIndex:3402},{id:"type",text:"`type()`",depth:2,charIndex:3512},{id:"type-options",text:"Options",depth:3,charIndex:4184},{id:"type-sequence",text:"Sequence of events",depth:3,charIndex:4464},{id:"clear",text:"`clear()`",depth:2,charIndex:5193},{id:"clear-sequence",text:"Sequence of events",depth:3,charIndex:5506},{id:"paste",text:"`paste()`",depth:2,charIndex:5789},{id:"paste-sequence",text:"Sequence of events",depth:3,charIndex:6133},{id:"scroll-to",text:"`scrollTo()`",depth:2,charIndex:6404},{id:"scroll-to-options",text:"Options",depth:3,charIndex:7875},{id:"scroll-sequence",text:"Sequence of events",depth:3,charIndex:8865}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/events/user-event.mdx"},{title:"Jest matchers",routePath:"/12.x/docs/api/jest-matchers",lang:"en",toc:[{id:"setup",text:"Setup",depth:2,charIndex:260},{id:"migration-from-legacy-jest-native-matchers",text:"Migration from legacy Jest Native matchers.",depth:2,charIndex:727},{id:"checking-element-existence",text:"Checking element existence",depth:2,charIndex:889},{id:"tobeonthescreen",text:"`toBeOnTheScreen()`",depth:3,charIndex:917},{id:"element-content",text:"Element Content",depth:2,charIndex:1173},{id:"tohavetextcontent",text:"`toHaveTextContent()`",depth:3,charIndex:1190},{id:"tocontainelement",text:"`toContainElement()`",depth:3,charIndex:1545},{id:"tobeemptyelement",text:"`toBeEmptyElement()`",depth:3,charIndex:1739},{id:"checking-element-state",text:"Checking element state",depth:2,charIndex:1904},{id:"tohavedisplayvalue",text:"`toHaveDisplayValue()`",depth:3,charIndex:1928},{id:"tohaveaccessibilityvalue",text:"`toHaveAccessibilityValue()`",depth:3,charIndex:2292},{id:"tobeenabled",text:"`toBeEnabled()` / `toBeDisabled`",depth:3,charIndex:2900},{id:"tobeselected",text:"`toBeSelected()`",depth:3,charIndex:3437},{id:"tobechecked",text:"`toBeChecked()` / `toBePartiallyChecked()`",depth:3,charIndex:3688},{id:"tobeexpanded",text:"`toBeExpanded()` / `toBeCollapsed()`",depth:3,charIndex:4245},{id:"tobebusy",text:"`toBeBusy()`",depth:3,charIndex:4866},{id:"checking-element-style",text:"Checking element style",depth:2,charIndex:5097},{id:"tobevisible",text:"`toBeVisible()`",depth:3,charIndex:5121},{id:"tohavestyle",text:"`toHaveStyle()`",depth:3,charIndex:5422},{id:"other-matchers",text:"Other matchers",depth:2,charIndex:5567},{id:"tohaveaccessiblename",text:"`toHaveAccessibleName()`",depth:3,charIndex:5583},{id:"tohaveprop",text:"`toHaveProp()`",depth:3,charIndex:6241}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/jest-matchers.mdx",description:"This guide describes built-in Jest matchers, we recommend using these matchers as they provide readable tests, accessibility support, and a better developer experience."},{title:"Accessibility",routePath:"/12.x/docs/api/misc/accessibility",lang:"en",toc:[{id:"ishiddenfromaccessibility",text:"`isHiddenFromAccessibility`",depth:2,charIndex:0}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/accessibility.mdx"},{title:"Async utilities",routePath:"/12.x/docs/api/misc/async",lang:"en",toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2,charIndex:0},{id:"waitfor",text:"`waitFor`",depth:2,charIndex:181},{id:"using-a-react-native-version--071-with-jest-fake-timers",text:"Using a React Native version < 0.71 with Jest fake timers",depth:3,charIndex:2475},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2,charIndex:4051}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/async.mdx"},{title:"Configuration",routePath:"/12.x/docs/api/misc/config",lang:"en",toc:[{id:"configure",text:"`configure`",depth:2,charIndex:0},{id:"asyncutiltimeout-option",text:"`asyncUtilTimeout` option",depth:3,charIndex:207},{id:"defaultincludehiddenelements-option",text:"`defaultIncludeHiddenElements` option",depth:3,charIndex:363},{id:"defaultdebugoptions-option",text:"`defaultDebugOptions` option",depth:3,charIndex:749},{id:"concurrent-root",text:"`concurrentRoot` option",depth:3,charIndex:929},{id:"resettodefaults",text:"`resetToDefaults()`",depth:2,charIndex:1121},{id:"environment-variables",text:"Environment variables",depth:2,charIndex:1171},{id:"rntl_skip_auto_cleanup",text:"`RNTL_SKIP_AUTO_CLEANUP`",depth:3,charIndex:1194},{id:"rntl_skip_auto_detect_fake_timers",text:"`RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS`",depth:3,charIndex:1443}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/config.mdx"},{title:"Other helpers",routePath:"/12.x/docs/api/misc/other",lang:"en",toc:[{id:"within",text:"`within`, `getQueriesForElement`",depth:2,charIndex:0},{id:"act",text:"`act`",depth:2,charIndex:966},{id:"cleanup",text:"`cleanup`",depth:2,charIndex:1311}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/other.mdx"},{title:"`renderHook` function",routePath:"/12.x/docs/api/misc/render-hook",lang:"en",toc:[{id:"options",text:"`options`",depth:2,charIndex:1300},{id:"initialprops",text:"`initialProps`",depth:3,charIndex:1431},{id:"wrapper",text:"`wrapper`",depth:3,charIndex:1609},{id:"renderhookresult",text:"`RenderHookResult`",depth:2,charIndex:1794},{id:"result",text:"`result`",depth:3,charIndex:2027},{id:"rerender",text:"`rerender`",depth:3,charIndex:2244},{id:"unmount",text:"`unmount`",depth:3,charIndex:2528},{id:"examples",text:"Examples",depth:2,charIndex:2650},{id:"with-initialprops",text:"With `initialProps`",depth:3,charIndex:2722},{id:"with-wrapper",text:"With `wrapper`",depth:3,charIndex:3372}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/render-hook.mdx",description:"Renders a test component that will call the provided callback, including any hooks it calls, every time it renders. Returns RenderHookResult object, which you can interact with. The renderHook function accepts the following arguments: Callback is a function that is called each render of the test component. This function should call one or more hooks for testing. The props passed into the callback will be the initialProps provided in the options to renderHook, unless new props are provided by a subsequent rerender call."},{title:"Queries",routePath:"/12.x/docs/api/queries",lang:"en",toc:[{id:"accessing-queries",text:"Accessing queries",depth:2,charIndex:223},{id:"using-screen-object",text:"Using `screen` object",depth:3,charIndex:379},{id:"using-render-result",text:"Using `render` result",depth:3,charIndex:759},{id:"query-parts",text:"Query parts",depth:2,charIndex:1099},{id:"query-variant",text:"Query variant",depth:2,charIndex:1355},{id:"get-by",text:"`getBy*` queries",depth:3,charIndex:2045},{id:"get-all-by",text:"`getAllBy*` queries",depth:3,charIndex:2305},{id:"query-by",text:"`queryBy*` queries",depth:3,charIndex:2488},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3,charIndex:2790},{id:"find-by",text:"`findBy*` queries",depth:3,charIndex:2992},{id:"find-all-by",text:"`findAllBy*` queries",depth:3,charIndex:3403},{id:"query-predicates",text:"Query predicates",depth:2,charIndex:4166},{id:"by-role",text:"`*ByRole`",depth:3,charIndex:4481},{id:"by-role-options",text:"Options",depth:4,charIndex:5681},{id:"by-label-text",text:"`*ByLabelText`",depth:3,charIndex:8349},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3,charIndex:8947},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3,charIndex:9517},{id:"by-text",text:"`*ByText`",depth:3,charIndex:10061},{id:"by-hint-text",text:"`*ByHintText`",depth:3,charIndex:10738},{id:"by-test-id",text:"`*ByTestId`",depth:3,charIndex:11544},{id:"common-options",text:"Common options",depth:3,charIndex:12480},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4,charIndex:12736},{id:"textmatch-type",text:"TextMatch type",depth:2,charIndex:13638},{id:"examples",text:"Examples",depth:3,charIndex:13804},{id:"text-match-options",text:"Options",depth:3,charIndex:14608},{id:"precision",text:"Precision",depth:4,charIndex:14639},{id:"normalization",text:"Normalization",depth:4,charIndex:15485},{id:"legacy-unit-testing-helpers",text:"Legacy unit testing helpers",depth:2,charIndex:16971},{id:"unsafe_bytype",text:"`UNSAFE_ByType`",depth:3,charIndex:17372},{id:"unsafe_byprops",text:"`UNSAFE_ByProps`",depth:3,charIndex:17679}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/queries.mdx",description:"Queries are one of the main building blocks for the React Native Testing Library. They enable you to find relevant elements in the element tree, which represents your application's user interface when running under tests."},{title:"`render` function",routePath:"/12.x/docs/api/render",lang:"en",toc:[{id:"render-options",text:"Options",depth:3,charIndex:651},{id:"wrapper-option",text:"`wrapper` option",depth:4,charIndex:806},{id:"concurrent-root",text:"`concurrentRoot` option",depth:4,charIndex:1099},{id:"createnodemock-option",text:"`createNodeMock` option",depth:4,charIndex:1291},{id:"unstable_validatestringsrenderedwithintext-option",text:"`unstable_validateStringsRenderedWithinText` option",depth:4,charIndex:1577},{id:"render-result",text:"Result",depth:3,charIndex:2366}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/render.mdx",description:"The render 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 components' structure. When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases, it's convenient to create your own custom render method. Follow this great guide on how to set this up. Options {#render-options} The behavior of the render method can be customized by passing various options as a second argument of the RenderOptions type: wrapper option This option allows you to wrap the tested component, passed as the first option to the render() function, in an additional wrapper component. This is useful for creating reusable custom render functions for common React Context providers. concurrentRoot option {#concurrent-root} Set to true to enable concurrent rendering used in the React Native New Architecture. Otherwise render will default to legacy synchronous rendering. createNodeMock option This option allows you to pass createNodeMock option to ReactTestRenderer.create() method in order to allow for custom mock refs. You can learn more about this option from React Test Renderer documentation. unstable_validateStringsRenderedWithinText option This experimental option allows you to replicate React Native behavior of throwing Invariant Violation: Text strings must be rendered within a component error when you try to render string value under components different than , e.g., under . React Test Renderer does not enforce this check; hence, by default, React Native Testing Library also does not check this. That might result in runtime errors when running your code on a device, while the code works without errors in tests. Result {#render-result} The render function returns the same queries and utilities as the screen object. We recommended using the screen object as more developer-friendly way. See this article from Kent C. Dodds for more details."},{title:"`screen` object",routePath:"/12.x/docs/api/screen",lang:"en",toc:[{id:"queries",text:"`...queries`",depth:3,charIndex:588},{id:"example",text:"Example",depth:4,charIndex:773},{id:"rerender",text:"`rerender`",depth:3,charIndex:875},{id:"unmount",text:"`unmount`",depth:3,charIndex:1281},{id:"debug",text:"`debug`",depth:3,charIndex:1549},{id:"debug-message-option",text:"`message` option",depth:4,charIndex:1699},{id:"debug-map-props-option",text:"`mapProps` option",depth:4,charIndex:1997},{id:"tojson",text:"`toJSON`",depth:3,charIndex:2988},{id:"root",text:"`root`",depth:3,charIndex:3122},{id:"unsafe_root",text:"`UNSAFE_root`",depth:3,charIndex:3346}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/screen.mdx",description:"The screen object offers a recommended way to access queries and utilities for the currently rendered UI. This object is assigned after the render call and cleared after each test by calling cleanup. If no render call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access. ...queries The most important feature of screen is providing a set of helpful queries that allow you to find certain elements in the view hierarchy. See Queries for a complete list. Example rerender Also available under update alias Re-render the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and key) as the previous element, the tree will be updated; otherwise, it will re-mount a new tree, in both cases triggering the appropriate lifecycle events. unmount Unmount the in-memory tree, triggering the appropriate lifecycle events. debug Pretty prints deeply rendered component passed to render. message option {#debug-message-option} You can provide a message that will be printed on top. logs optional message and colored JSX: mapProps option {#debug-map-props-option} You can use the mapProps option to transform the props that will be printed : This will log the rendered JSX without the style props. The children prop cannot be filtered out so the following will print all rendered components with all props but children filtered out. This option can be used to target specific props when debugging a query (for instance, keeping only the children prop when debugging a getByText query). You can also transform prop values so that they are more readable (e.g., flatten styles). Or remove props that have little value when debugging tests, e.g. path prop for svgs toJSON Get the rendered component JSON representation, e.g. for snapshot testing. root Returns the rendered root host element. This API is primarily useful for component tests, as it allows you to access root host view without using *ByTestId queries or similar methods. UNSAFE_root Returns the rendered composite root element."},{title:"Community resources",routePath:"/12.x/docs/guides/community-resources",lang:"en",toc:[{id:"recommended-content",text:"Recommended content",depth:2,charIndex:0},{id:"older-potentially-outdated-content",text:"Older, potentially outdated content",depth:2,charIndex:569}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/guides/community-resources.mdx"},{title:"FAQ",routePath:"/12.x/docs/guides/faq",lang:"en",toc:[{id:"can-i-test-the-native-features-of-react-native-apps",text:"Can I test the native features of React Native apps?",depth:2,charIndex:0},{id:"should-i-usemigrate-to-screen-queries",text:"Should I use/migrate to `screen` queries?",depth:2,charIndex:1188},{id:"should-i-usemigrate-to-user-event-interactions",text:"Should I use/migrate to User Event interactions?",depth:2,charIndex:1568}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/guides/faq.mdx"},{title:"How should I query?",routePath:"/12.x/docs/guides/how-to-query",lang:"en",toc:[{id:"query-parts",text:"Query parts",depth:2,charIndex:270},{id:"query-variant",text:"Query variant",depth:2,charIndex:528},{id:"idiomatic-query-variants",text:"Idiomatic query variants",depth:3,charIndex:1218},{id:"query-predicate",text:"Query predicate",depth:2,charIndex:2140},{id:"idiomatic-query-predicates",text:"Idiomatic query predicates",depth:3,charIndex:2704},{id:"by-role-query",text:"1. By Role query",depth:3,charIndex:3200},{id:"by-role-query-name-option",text:"Name option",depth:4,charIndex:4257},{id:"text-input-queries",text:"2. Text input queries",depth:3,charIndex:4796},{id:"other-accessible-queries",text:"3. Other accessible queries",depth:3,charIndex:5593},{id:"test-id-query",text:"4. Test ID query",depth:3,charIndex:6022}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/guides/how-to-query.mdx",description:"React Native Testing Library provides various query types, allowing great flexibility in finding views appropriate for your tests. At the same time, the number of queries might be confusing. This guide aims to help you pick the correct queries for your test scenarios."},{title:"Troubleshooting",routePath:"/12.x/docs/guides/troubleshooting",lang:"en",toc:[{id:"matching-react-native-react--react-test-renderer-versions",text:"Matching React Native, React & React Test Renderer versions",depth:2,charIndex:113},{id:"example-repository",text:"Example repository",depth:2,charIndex:985},{id:"undefined-component-error",text:"Undefined component error",depth:2,charIndex:1232},{id:"mocking-react-native",text:"Mocking React Native",depth:3,charIndex:2327},{id:"act-warnings",text:"Act warnings",depth:2,charIndex:2655}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/guides/troubleshooting.mdx",description:"This guide describes common issues found by users when integrating React Native Test Library to their projects:"},{title:"Migration to built-in Jest matchers",routePath:"/12.x/docs/migration/jest-matchers",lang:"en",toc:[{id:"general-notes",text:"General notes",depth:2,charIndex:116},{id:"usage",text:"Usage",depth:2,charIndex:528},{id:"gradual-migration",text:"Gradual migration",depth:3,charIndex:720},{id:"migration-details",text:"Migration details",depth:2,charIndex:1214},{id:"matchers-not-requiring-changes",text:"Matchers not requiring changes",depth:3,charIndex:1233},{id:"replaced-matchers",text:"Replaced matchers",depth:3,charIndex:1517},{id:"added-matchers",text:"Added matchers",depth:3,charIndex:1897},{id:"noteworthy-details",text:"Noteworthy details",depth:3,charIndex:1957}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/jest-matchers.mdx",description:"This guide describes the steps necessary to migrate from legacy Jest Native matchers v5 to built-in Jest matchers."},{title:"Migration to 11.x",routePath:"/12.x/docs/migration/previous/v11",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:150},{id:"update-to-jest-28-if-you-use-fake-timers",text:"Update to Jest 28 if you use fake timers",depth:3,charIndex:168},{id:"refactor-legacy-waitforoptions-position",text:"Refactor legacy `waitForOptions` position",depth:3,charIndex:391},{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",text:'Triggering non-touch events on targets with `pointerEvents="box-none"` prop',depth:3,charIndex:1336},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:1685}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/previous/v11.mdx",description:"Migration to React Native Testing Library version 11 from version 9.x or 10.x should be a relatively easy task due small amount of breaking changes."},{title:"Migration to 2.x",routePath:"/12.x/docs/migration/previous/v2",lang:"en",toc:[{id:"dropping-node-8",text:"Dropping Node 8",depth:2,charIndex:97},{id:"auto-cleanup",text:"Auto Cleanup",depth:2,charIndex:320},{id:"waitfor-api-changes",text:"WaitFor API changes",depth:2,charIndex:1327},{id:"removed-global-debug-function",text:"Removed global `debug` function",depth:2,charIndex:2107},{id:"removed-global-shallow-function",text:"Removed global `shallow` function",depth:2,charIndex:2256},{id:"removed-functions",text:"Removed functions",depth:2,charIndex:2725},{id:"some-bytestid-queries-behavior-changes",text:"Some `ByTestId` queries behavior changes",depth:2,charIndex:3422},{id:"deprecated-flushmicrotasksqueue",text:"Deprecated `flushMicrotasksQueue`",depth:2,charIndex:4166}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/previous/v2.mdx",description:"This guide describes steps necessary to migrate from React Native Testing Library v1.x to v2.x."},{title:"Migration to 7.x",routePath:"/12.x/docs/migration/previous/v7",lang:"en",toc:[{id:"guide-for-react-native-testing-library-users",text:"Guide for `react-native-testing-library` users",depth:2,charIndex:304},{id:"renaming-the-library",text:"Renaming the library",depth:3,charIndex:455},{id:"new-aliases",text:"New aliases",depth:3,charIndex:1339},{id:"renaming-byplaceholder-queries",text:"Renaming `ByPlaceholder` queries",depth:3,charIndex:1747},{id:"fireevent-support-for-disabled-components",text:"`fireEvent` support for disabled components",depth:3,charIndex:2059},{id:"guide-for-testing-libraryreact-native-users",text:"Guide for `@testing-library/react-native` users",depth:2,charIndex:2528},{id:"renaming-wait-helpers",text:'Renaming "wait" helpers',depth:3,charIndex:2843},{id:"changes-to-bytestid-queries",text:"Changes to `ByTestId` queries",depth:3,charIndex:2987},{id:"no-bytitle-queries",text:"No `ByTitle` queries",depth:3,charIndex:3144},{id:"no-custom-jest-configuration",text:"No custom Jest configuration",depth:3,charIndex:3591},{id:"cleanup-is-included-by-default",text:"Cleanup is included by default",depth:3,charIndex:3974},{id:"no-nativetestinstance-abstraction",text:"No NativeTestInstance abstraction",depth:3,charIndex:4467},{id:"no-container-nor-baseelement-returned-from-render",text:"No `container` nor `baseElement` returned from `render`",depth:3,charIndex:4671},{id:"firing-events-changes",text:"Firing events changes",depth:3,charIndex:4973}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/previous/v7.mdx",description:"As the version 7.0 involves merging two libraries together, there are two variants for migration guide, dependent on library you used previously:"},{title:"Migration to 9.x",routePath:"/12.x/docs/migration/previous/v9",lang:"en",toc:[{id:"support-for-text-match-options-aka-string-precision-api",text:"Support for text match options a.k.a string precision API",depth:2,charIndex:281},{id:"reverted-matching-text-across-several-nodes",text:"Reverted matching text across several nodes",depth:2,charIndex:1275},{id:"future-plans",text:"Future plans",depth:2,charIndex:2039}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/previous/v9.mdx",description:"Version 7.0 brought React Native Testing Library into the @testing-library family. Since it has been implemented independently from its web counterpart – the React Testing Library – there are some differences in the API and behavior. Version 9.0 solves several of these problems."},{title:"Migration to 12.x",routePath:"/12.x/docs/migration/v12",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:489},{id:"1-all-queries-exclude-elements-hidden-from-accessibility-by-default",text:"1. All queries exclude elements hidden from accessibility by default",depth:3,charIndex:507},{id:"2-byrole-queries-now-return-only-accessibility-elements",text:"2. `*ByRole` queries now return only accessibility elements",depth:3,charIndex:1122},{id:"examples",text:"Examples",depth:4,charIndex:1510},{id:"3-bytext-bydisplayvalue-byplaceholdertext-queries-now-return-host-elements",text:"3. `*ByText`, `*ByDisplayValue`, `*ByPlaceholderText` queries now return host elements",depth:3,charIndex:2192},{id:"4-container-api-has-been-renamed-to-unsafe_root",text:"4. `container` API has been renamed to `UNSAFE_root`.",depth:3,charIndex:2754},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:3457}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/v12.mdx",description:"React Native Testing Library 12 introduces a handful of breaking changes compared to 11.x versions. We believe they were necessary to improve the experience using the library and help the users fall into the pit of success when writing meaningful tests. You will find migration instructions for each and every change described below."},{title:"Introduction",routePath:"/12.x/docs/start/intro",lang:"en",toc:[{id:"the-problem",text:"The problem",depth:2,charIndex:0},{id:"this-solution",text:"This solution",depth:2,charIndex:474},{id:"example",text:"Example",depth:2,charIndex:977}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/start/intro.md"},{title:"Quick Start",routePath:"/12.x/docs/start/quick-start",lang:"en",toc:[{id:"installation",text:"Installation",depth:2,charIndex:0},{id:"jest-matchers",text:"Jest matchers",depth:3,charIndex:360},{id:"eslint-plugin",text:"ESLint plugin",depth:3,charIndex:567}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/start/quick-start.mdx"},{title:"",routePath:"/12.x/",lang:"en",toc:[],frontmatter:{pageType:"home",hero:{image:{src:{light:"/img/logo-light.svg",dark:"/img/logo-dark.svg"}},name:"JavaScript Integration testing for React Native",tagline:"The more your tests resemble the way your software is used, the more confidence they can give you.
      — Kent C. Dodds",actions:[{theme:"brand",text:"Quick Start",link:"/12.x/docs/start/quick-start"},{theme:"alt",text:"Explore API",link:"/12.x/docs/api"}]},features:[{title:"Maintainable",details:"Write maintainable tests for your React Native apps.",icon:''},{title:"Reliable",details:"Promotes testing public APIs and avoiding implementation details.",icon:''},{title:"Community Driven",details:"Supported by React Native community and its core contributors.",icon:''}]},version:"12.x",_relativePath:"12.x/index.md"},{title:"Network Requests",routePath:"/cookbook/advanced/network-requests",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"phonebook-example",text:"Phonebook Example",depth:2,charIndex:531},{id:"start-testing-with-a-simple-test",text:"Start testing with a simple test",depth:2,charIndex:4753},{id:"testing-error-handling",text:"Testing error handling",depth:2,charIndex:7847},{id:"global-guarding-against-unwanted-api-requests",text:"Global guarding against unwanted API requests",depth:2,charIndex:9680},{id:"conclusion",text:"Conclusion",depth:2,charIndex:10698},{id:"further-reading-and-alternatives",text:"Further Reading and Alternatives",depth:2,charIndex:11233}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/advanced/network-requests.md"},{title:"Async tests",routePath:"/cookbook/basics/async-tests",lang:"en",toc:[{id:"summary",text:"Summary",depth:2,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:875},{id:"async-utilities",text:"Async utilities",depth:2,charIndex:2018},{id:"findby-queries",text:"`findBy*` queries",depth:3,charIndex:2106},{id:"example-1",text:"Example",depth:4,charIndex:2834},{id:"waitfor-function",text:"`waitFor` function",depth:3,charIndex:3078},{id:"example-2",text:"Example",depth:4,charIndex:3601},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3,charIndex:3823},{id:"example-3",text:"Example",depth:4,charIndex:4416},{id:"fake-timers",text:"Fake Timers",depth:2,charIndex:4491}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/basics/async-tests.md"},{title:"Custom `render` function",routePath:"/cookbook/basics/custom-render",lang:"en",toc:[{id:"summary",text:"Summary",depth:3,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:291},{id:"more-info",text:"More info",depth:3,charIndex:1109},{id:"additional-params",text:"Additional params",depth:4,charIndex:1120},{id:"multiple-functions",text:"Multiple functions",depth:4,charIndex:1442},{id:"async-function",text:"Async function",depth:4,charIndex:1731}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/basics/custom-render.md",description:"Summary RNTL exposes the render function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests. Example Example full source code. More info Additional params A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management. Multiple functions Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens. Async function Make it async if you want to put some async setup in your custom render function."},{title:"Introduction",routePath:"/cookbook/",lang:"en",toc:[{id:"whats-inside-the-cookbook",text:"What's Inside the Cookbook?",depth:2,charIndex:431},{id:"whats-next",text:"What's Next?",depth:2,charIndex:1024}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/index.md",description:"Welcome to the React Native Testing Library (RNTL) Cookbook! This app is your go-to resource for learning how to effectively test React Native applications. It provides a collection of best practices, ready-made recipes, and tips & tricks to simplify and improve your testing workflow. Whether you’re a beginner just getting started or a seasoned developer looking to sharpen your skills, the Cookbook has something for everyone."},{title:"Jotai",routePath:"/cookbook/state-management/jotai",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"task-list-example",text:"Task List Example",depth:2,charIndex:332},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2,charIndex:1433},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2,charIndex:1898},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2,charIndex:3545},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2,charIndex:4795},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2,charIndex:5398},{id:"conclusion",text:"Conclusion",depth:2,charIndex:6074}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/state-management/jotai.md"},{title:"Testing environment",routePath:"/docs/advanced/testing-env",lang:"en",toc:[{id:"react-renderers",text:"React renderers",depth:2,charIndex:660},{id:"react-test-renderer",text:"React Test Renderer",depth:2,charIndex:1371},{id:"element-tree",text:"Element tree",depth:2,charIndex:2718},{id:"host-and-composite-components",text:"Host and composite components",depth:2,charIndex:3524},{id:"differentiating-between-host-and-composite-elements",text:"Differentiating between host and composite elements",depth:3,charIndex:5446},{id:"tree-nodes",text:"Tree nodes",depth:2,charIndex:5955},{id:"asserting-props",text:"Asserting props",depth:3,charIndex:6263},{id:"tree-navigation",text:"Tree navigation",depth:2,charIndex:7103},{id:"queries",text:"Queries",depth:2,charIndex:7840}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/advanced/testing-env.mdx",description:"React Native Testing Library allows you to write integration and component tests for your React Native app or library. While the JSX code used in tests closely resembles your React Native app, things aren't as simple as they might appear. This document describes the key elements of our testing environment and highlights things to be aware of when writing more advanced tests or diagnosing issues."},{title:"Third-Party Library Integration",routePath:"/docs/advanced/third-party-integration",lang:"en",toc:[{id:"handling-events-in-third-party-libraries",text:"Handling Events in Third-Party Libraries",depth:2,charIndex:230},{id:"example-react-native-gesture-handler",text:"Example: React Native Gesture Handler",depth:3,charIndex:1009}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/advanced/third-party-integration.mdx",description:"The React Native Testing Library is designed to simulate the core behaviors of React Native. However, it doesn't replicate the internal logic of third-party libraries. This guide explains how to integrate your library with RNTL."},{title:"Understanding `act` function",routePath:"/docs/advanced/understanding-act",lang:"en",toc:[{id:"act-warnings",text:"`act` warnings",depth:2,charIndex:236},{id:"synchronous-act",text:"Synchronous `act`",depth:2,charIndex:931},{id:"responsibility",text:"Responsibility",depth:3,charIndex:948},{id:"when-to-use-act",text:"When to use act",depth:3,charIndex:2702},{id:"implementation",text:"Implementation",depth:3,charIndex:3738},{id:"asynchronous-act",text:"Asynchronous `act`",depth:2,charIndex:4199},{id:"asynchronous-code",text:"Asynchronous code",depth:3,charIndex:4725},{id:"solution-with-fake-timers",text:"Solution with fake timers",depth:3,charIndex:5966},{id:"solution-with-real-timers",text:"Solution with real timers",depth:3,charIndex:6469},{id:"async-act-warning",text:"Async act warning",depth:3,charIndex:7902},{id:"references",text:"References",depth:2,charIndex:8518}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/advanced/understanding-act.mdx",description:"When writing RNTL tests, one of the things that confuses developers the most are cryptic act() function errors logged to the console. This article explains the purpose and behavior of act() so you can write tests with more confidence."},{title:"API Overview",routePath:"/docs/api",lang:"en",toc:[],frontmatter:{uri:"/api"},version:"13.x",_relativePath:"13.x/docs/api.md",description:"React Native Testing Library consists of following APIs: render function - render your UI components for testing purposesscreen object - access rendered UI:Queries - find relevant components by various predicates: role, text, test ids, etcLifecycle methods: rerender, unmountHelpers: debug, toJSON, rootJest matchers - validate assumptions about your UIUser Event - simulate common user interactions like press or type in a realistic wayFire Event - simulate any component event in a simplified way purposesMisc APIs:renderHook function - render hooks for testingAsync utils: findBy* queries, wait, waitForElementToBeRemovedConfiguration: configure, resetToDefaultsAccessibility: isHiddenFromAccessibilityOther: within, act, cleanup"},{title:"Fire Event API",routePath:"/docs/api/events/fire-event",lang:"en",toc:[{id:"fire-event",text:"`fireEvent`",depth:2,charIndex:0},{id:"press",text:"`fireEvent.press`",depth:3,charIndex:1837},{id:"change-text",text:"`fireEvent.changeText`",depth:3,charIndex:2535},{id:"scroll",text:"`fireEvent.scroll`",depth:3,charIndex:3206},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4,charIndex:3604},{id:"fire-event-async",text:"`fireEventAsync`",depth:2,charIndex:4102},{id:"async-press",text:"`fireEventAsync.press`",depth:3,charIndex:4957},{id:"async-change-text",text:"`fireEventAsync.changeText`",depth:3,charIndex:5395},{id:"async-scroll",text:"`fireEventAsync.scroll`",depth:3,charIndex:5905}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/events/fire-event.mdx"},{title:"User Event interactions",routePath:"/docs/api/events/user-event",lang:"en",toc:[{id:"comparison-with-fire-event-api",text:"Comparison with Fire Event API",depth:2,charIndex:0},{id:"setup",text:"`setup()`",depth:2,charIndex:1118},{id:"setup-options",text:"Options",depth:3,charIndex:1352},{id:"press",text:"`press()`",depth:2,charIndex:1613},{id:"longpress",text:"`longPress()`",depth:2,charIndex:2303},{id:"longpress-options",text:"Options",depth:3,charIndex:3153},{id:"type",text:"`type()`",depth:2,charIndex:3263},{id:"type-options",text:"Options",depth:3,charIndex:3922},{id:"type-sequence",text:"Sequence of events",depth:3,charIndex:4202},{id:"clear",text:"`clear()`",depth:2,charIndex:4931},{id:"clear-sequence",text:"Sequence of events",depth:3,charIndex:5231},{id:"paste",text:"`paste()`",depth:2,charIndex:5514},{id:"paste-sequence",text:"Sequence of events",depth:3,charIndex:5845},{id:"scroll-to",text:"`scrollTo()`",depth:2,charIndex:6116},{id:"scroll-to-options",text:"Options",depth:3,charIndex:7512},{id:"scroll-sequence",text:"Sequence of events",depth:3,charIndex:8502}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/events/user-event.mdx"},{title:"Jest matchers",routePath:"/docs/api/jest-matchers",lang:"en",toc:[{id:"setup",text:"Setup",depth:2,charIndex:117},{id:"migration-from-legacy-jest-native-matchers",text:"Migration from legacy Jest Native matchers",depth:2,charIndex:217},{id:"checking-element-existence",text:"Checking element existence",depth:2,charIndex:327},{id:"tobeonthescreen",text:"`toBeOnTheScreen()`",depth:3,charIndex:355},{id:"element-content",text:"Element Content",depth:2,charIndex:543},{id:"tohavetextcontent",text:"`toHaveTextContent()`",depth:3,charIndex:560},{id:"tocontainelement",text:"`toContainElement()`",depth:3,charIndex:863},{id:"tobeemptyelement",text:"`toBeEmptyElement()`",depth:3,charIndex:1016},{id:"checking-element-state",text:"Checking element state",depth:2,charIndex:1135},{id:"tohavedisplayvalue",text:"`toHaveDisplayValue()`",depth:3,charIndex:1159},{id:"tohaveaccessibilityvalue",text:"`toHaveAccessibilityValue()`",depth:3,charIndex:1466},{id:"tobeenabled",text:"`toBeEnabled()` / `toBeDisabled`",depth:3,charIndex:1964},{id:"tobeselected",text:"`toBeSelected()`",depth:3,charIndex:2342},{id:"tobechecked",text:"`toBeChecked()` / `toBePartiallyChecked()`",depth:3,charIndex:2487},{id:"tobeexpanded",text:"`toBeExpanded()` / `toBeCollapsed()`",depth:3,charIndex:2905},{id:"tobebusy",text:"`toBeBusy()`",depth:3,charIndex:3323},{id:"checking-element-style",text:"Checking element style",depth:2,charIndex:3448},{id:"tobevisible",text:"`toBeVisible()`",depth:3,charIndex:3472},{id:"tohavestyle",text:"`toHaveStyle()`",depth:3,charIndex:3683},{id:"other-matchers",text:"Other matchers",depth:2,charIndex:3801},{id:"tohaveaccessiblename",text:"`toHaveAccessibleName()`",depth:3,charIndex:3817},{id:"tohaveprop",text:"`toHaveProp()`",depth:3,charIndex:4405}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/jest-matchers.mdx",description:"This guide describes built-in Jest matchers. These matchers provide readable assertions with accessibility support."},{title:"Accessibility",routePath:"/docs/api/misc/accessibility",lang:"en",toc:[{id:"ishiddenfromaccessibility",text:"`isHiddenFromAccessibility`",depth:2,charIndex:0}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/accessibility.mdx"},{title:"Async utilities",routePath:"/docs/api/misc/async",lang:"en",toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2,charIndex:0},{id:"waitfor",text:"`waitFor`",depth:2,charIndex:181},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2,charIndex:3468}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/async.mdx"},{title:"Configuration",routePath:"/docs/api/misc/config",lang:"en",toc:[{id:"configure",text:"`configure`",depth:2,charIndex:0},{id:"asyncutiltimeout-option",text:"`asyncUtilTimeout` option",depth:3,charIndex:207},{id:"defaultincludehiddenelements-option",text:"`defaultIncludeHiddenElements` option",depth:3,charIndex:363},{id:"defaultdebugoptions-option",text:"`defaultDebugOptions` option",depth:3,charIndex:734},{id:"concurrent-root",text:"`concurrentRoot` option",depth:3,charIndex:904},{id:"resettodefaults",text:"`resetToDefaults()`",depth:2,charIndex:1093},{id:"environment-variables",text:"Environment variables",depth:2,charIndex:1143},{id:"rntl_skip_auto_cleanup",text:"`RNTL_SKIP_AUTO_CLEANUP`",depth:3,charIndex:1166},{id:"rntl_skip_auto_detect_fake_timers",text:"`RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS`",depth:3,charIndex:1417}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/config.mdx"},{title:"Other helpers",routePath:"/docs/api/misc/other",lang:"en",toc:[{id:"within",text:"`within`, `getQueriesForElement`",depth:2,charIndex:0},{id:"act",text:"`act`",depth:2,charIndex:966},{id:"cleanup",text:"`cleanup`",depth:2,charIndex:1306}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/other.mdx"},{title:"`renderHook` function",routePath:"/docs/api/misc/render-hook",lang:"en",toc:[{id:"renderhook",text:"`renderHook`",depth:2,charIndex:0},{id:"options",text:"`options`",depth:3,charIndex:1306},{id:"initial-props",text:"`initialProps`",depth:4,charIndex:1437},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:1632},{id:"concurrent-root",text:"`concurrentRoot`",depth:3,charIndex:1817},{id:"result",text:"Result",depth:3,charIndex:2003},{id:"result-1",text:"`result`",depth:4,charIndex:2226},{id:"rerender",text:"`rerender`",depth:4,charIndex:2443},{id:"unmount",text:"`unmount`",depth:4,charIndex:2722},{id:"examples",text:"Examples",depth:3,charIndex:2844},{id:"with-initialprops",text:"With `initialProps`",depth:4,charIndex:2918},{id:"with-wrapper",text:"With `wrapper`",depth:4,charIndex:3568},{id:"renderhookasync-function",text:"`renderHookAsync` function",depth:2,charIndex:3849},{id:"result-async",text:"Result",depth:3,charIndex:4442}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/render-hook.mdx"},{title:"Queries",routePath:"/docs/api/queries",lang:"en",toc:[{id:"accessing-queries",text:"Accessing queries",depth:2,charIndex:203},{id:"using-screen-object",text:"Using `screen` object",depth:3,charIndex:366},{id:"using-render-result",text:"Using `render` result",depth:3,charIndex:708},{id:"query-parts",text:"Query parts",depth:2,charIndex:1020},{id:"query-variant",text:"Query variant",depth:2,charIndex:1222},{id:"get-by",text:"`getBy*` queries",depth:3,charIndex:1901},{id:"get-all-by",text:"`getAllBy*` queries",depth:3,charIndex:2155},{id:"query-by",text:"`queryBy*` queries",depth:3,charIndex:2338},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3,charIndex:2639},{id:"find-by",text:"`findBy*` queries",depth:3,charIndex:2841},{id:"find-all-by",text:"`findAllBy*` queries",depth:3,charIndex:3252},{id:"query-predicates",text:"Query predicates",depth:2,charIndex:4008},{id:"by-role",text:"`*ByRole`",depth:3,charIndex:4327},{id:"by-role-options",text:"Options",depth:4,charIndex:5519},{id:"by-label-text",text:"`*ByLabelText`",depth:3,charIndex:8199},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3,charIndex:8805},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3,charIndex:9373},{id:"by-text",text:"`*ByText`",depth:3,charIndex:9926},{id:"by-hint-text",text:"`*ByHintText`",depth:3,charIndex:10598},{id:"by-test-id",text:"`*ByTestId`",depth:3,charIndex:11404},{id:"common-options",text:"Common options",depth:3,charIndex:12320},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4,charIndex:12580},{id:"textmatch-type",text:"TextMatch type",depth:2,charIndex:13474},{id:"examples",text:"Examples",depth:3,charIndex:13633},{id:"text-match-options",text:"Options",depth:3,charIndex:14437},{id:"precision",text:"Precision",depth:4,charIndex:14468},{id:"normalization",text:"Normalization",depth:4,charIndex:15310},{id:"legacy-unit-testing-helpers",text:"Legacy unit testing helpers",depth:2,charIndex:16787},{id:"unsafe_bytype",text:"`UNSAFE_ByType`",depth:3,charIndex:17184},{id:"unsafe_byprops",text:"`UNSAFE_ByProps`",depth:3,charIndex:17492}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/queries.mdx",description:"Queries are one of the main building blocks of React Native Testing Library. They let you find elements in the element tree, which represents your application's user interface when running under tests."},{title:"`render` API",routePath:"/docs/api/render",lang:"en",toc:[{id:"render",text:"`render` function",depth:2,charIndex:0},{id:"options",text:"Options",depth:3,charIndex:678},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:815},{id:"concurrent-root",text:"`concurrentRoot`",depth:4,charIndex:1101},{id:"create-node-mock",text:"`createNodeMock`",depth:4,charIndex:1287},{id:"unstable_validatestringsrenderedwithintext",text:"`unstable_validateStringsRenderedWithinText`",depth:4,charIndex:1586},{id:"result",text:"Result",depth:3,charIndex:2368},{id:"render-async",text:"`renderAsync` function",depth:2,charIndex:2592},{id:"options-1",text:"Options",depth:3,charIndex:3223},{id:"result-1",text:"Result",depth:3,charIndex:3281}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/render.mdx"},{title:"`screen` object",routePath:"/docs/api/screen",lang:"en",toc:[{id:"queries",text:"`...queries`",depth:3,charIndex:588},{id:"example",text:"Example",depth:4,charIndex:773},{id:"rerender",text:"`rerender`",depth:3,charIndex:875},{id:"rerenderasync",text:"`rerenderAsync`",depth:3,charIndex:1275},{id:"unmount",text:"`unmount`",depth:3,charIndex:1896},{id:"unmountasync",text:"`unmountAsync`",depth:3,charIndex:2166},{id:"debug",text:"`debug`",depth:3,charIndex:2646},{id:"debug-message-option",text:"`message` option",depth:4,charIndex:2796},{id:"debug-map-props-option",text:"`mapProps` option",depth:4,charIndex:3094},{id:"tojson",text:"`toJSON`",depth:3,charIndex:4081},{id:"root",text:"`root`",depth:3,charIndex:4215},{id:"unsafe_root",text:"`UNSAFE_root`",depth:3,charIndex:4443}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/screen.mdx",description:"The screen object offers a recommended way to access queries and utilities for the currently rendered UI. This object is assigned after the render call and cleared after each test by calling cleanup. If no render call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access. ...queries The most important feature of screen is providing a set of helpful queries that allow you to find certain elements in the view hierarchy. See Queries for a complete list. Example rerender Also available under update alias Re-renders the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and key) as the previous element, the tree is updated; otherwise, it re-mounts a new tree. In both cases, it triggers the appropriate lifecycle events. rerenderAsync Also available under updateAsync alias Async version of rerender designed for working with React 19 and React Suspense. This method uses async act internally to ensure all pending React updates are executed during updating. unmount Unmount the in-memory tree, triggering the appropriate lifecycle events. unmountAsync Async version of unmount designed for working with React 19 and React Suspense. This method uses async act internally to ensure all pending React updates are executed during unmounting. debug Pretty prints deeply rendered component passed to render. message option {#debug-message-option} You can provide a message that will be printed on top. logs optional message and colored JSX: mapProps option {#debug-map-props-option} You can use the mapProps option to transform the props that will be printed: This will log the rendered JSX without the style props. The children prop cannot be filtered out so the following will print all rendered components with all props but children filtered out. This option can be used to target specific props when debugging a query (for instance, keeping only the children prop when debugging a getByText query). You can also transform prop values to make them more readable (e.g., flatten styles). Or remove props that have little value when debugging tests, e.g., path prop for SVGs toJSON Get the rendered component JSON representation, e.g. for snapshot testing. root Returns the rendered root host element. This API is primarily useful for component tests, as it allows you to access the root host view without using *ByTestId queries or similar methods. UNSAFE_root Returns the rendered composite root element."},{title:"Common Mistakes with React Native Testing Library",routePath:"/docs/guides/common-mistakes",lang:"en",toc:[{id:"using-the-wrong-query",text:"Using the wrong query",depth:2,charIndex:606},{id:"not-using-byrole-most-of-the-time",text:"Not using `*ByRole` query most of the time",depth:2,charIndex:1616},{id:"using-the-wrong-assertion",text:"Using the wrong assertion",depth:2,charIndex:2737},{id:"using-query-variants-for-anything-except-checking-for-non-existence",text:"Using `query*` variants for anything except checking for non-existence",depth:2,charIndex:3595},{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",text:"Using `waitFor` to wait for elements that can be queried with `find*`",depth:2,charIndex:4344},{id:"performing-side-effects-in-waitfor",text:"Performing side-effects in `waitFor`",depth:2,charIndex:5153},{id:"using-unsafe-root-to-query-for-elements",text:"Using `UNSAFE_root` to query for elements",depth:2,charIndex:6097},{id:"passing-an-empty-callback-to-waitfor",text:"Passing an empty callback to `waitFor`",depth:2,charIndex:6888},{id:"not-using-screen",text:"Not using `screen`",depth:2,charIndex:7341},{id:"wrapping-things-in-act-unnecessarily",text:"Wrapping things in `act` unnecessarily",depth:2,charIndex:8037},{id:"not-using-user-event-api",text:"Not using User Event API",depth:2,charIndex:8910},{id:"not-querying-by-text",text:"Not querying by text",depth:2,charIndex:10070},{id:"not-using-testing-library-eslint-plugins",text:"Not using Testing Library ESLint plugins",depth:2,charIndex:10631},{id:"using-cleanup",text:"Using `cleanup`",depth:2,charIndex:11291},{id:"using-get-variants-as-assertions",text:"Using `get*` variants as assertions",depth:2,charIndex:11888},{id:"having-multiple-assertions-in-a-single-waitfor-callback",text:"Having multiple assertions in a single `waitFor` callback",depth:2,charIndex:12701},{id:"using-wrapper-as-the-variable-name",text:"Using `wrapper` as the variable name",depth:2,charIndex:13758},{id:"summary",text:"Summary",depth:2,charIndex:14612}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/common-mistakes.mdx",description:'Note: This guide is adapted from Kent C. Dodds\' article "Common mistakes with React Testing Library" for React Native Testing Library v13. The original article focuses on web React, but the principles apply to React Native as well. This adaptation includes React Native-specific examples and ARIA-compatible accessibility attributes. React Native Testing Library guiding principle is: "The more your tests resemble the way your software is used, the more confidence they can give you." This guide outlines some common mistakes people make when using React Native Testing Library and how to avoid them.'},{title:"Community resources",routePath:"/docs/guides/community-resources",lang:"en",toc:[{id:"recommended-content",text:"Recommended content",depth:2,charIndex:0},{id:"older-potentially-outdated-content",text:"Older, potentially outdated content",depth:2,charIndex:569}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/community-resources.mdx"},{title:"FAQ",routePath:"/docs/guides/faq",lang:"en",toc:[{id:"can-i-test-the-native-features-of-react-native-apps",text:"Can I test the native features of React Native apps?",depth:2,charIndex:0},{id:"should-i-usemigrate-to-screen-queries",text:"Should I use/migrate to `screen` queries?",depth:2,charIndex:1188},{id:"should-i-usemigrate-to-user-event-interactions",text:"Should I use/migrate to User Event interactions?",depth:2,charIndex:1568}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/faq.mdx"},{title:"How should I query?",routePath:"/docs/guides/how-to-query",lang:"en",toc:[{id:"query-parts",text:"Query parts",depth:2,charIndex:203},{id:"query-variant",text:"Query variant",depth:2,charIndex:461},{id:"idiomatic-query-variants",text:"Idiomatic query variants",depth:3,charIndex:1151},{id:"query-predicate",text:"Query predicate",depth:2,charIndex:2073},{id:"idiomatic-query-predicates",text:"Idiomatic query predicates",depth:3,charIndex:2637},{id:"by-role-query",text:"1. By Role query",depth:3,charIndex:3086},{id:"by-role-query-name-option",text:"Name option",depth:4,charIndex:4143},{id:"text-input-queries",text:"2. Text input queries",depth:3,charIndex:4682},{id:"other-accessible-queries",text:"3. Other accessible queries",depth:3,charIndex:5479},{id:"test-id-query",text:"4. Test ID query",depth:3,charIndex:5908}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/how-to-query.mdx",description:"React Native Testing Library provides various query types for finding views in your tests. The number of queries might be confusing. This guide helps you pick the right queries for your test scenarios."},{title:"LLM Guidelines for React Native Testing Library",routePath:"/docs/guides/llm-guidelines",lang:"en",toc:[{id:"core-apis",text:"Core APIs",depth:2,charIndex:87},{id:"render",text:"render",depth:3,charIndex:98},{id:"screen",text:"screen",depth:3,charIndex:563},{id:"renderhook",text:"renderHook",depth:3,charIndex:754},{id:"query-selection",text:"Query Selection",depth:2,charIndex:1129},{id:"assertions",text:"Assertions",depth:2,charIndex:1659},{id:"jest-matchers-reference",text:"Jest Matchers Reference",depth:2,charIndex:1885},{id:"user-interactions",text:"User Interactions",depth:2,charIndex:3349},{id:"userevent-preferred-async",text:"userEvent (Preferred, Async)",depth:3,charIndex:3522},{id:"fireevent-low-level-sync-in-v13",text:"fireEvent (Low-level, Sync in v13)",depth:3,charIndex:4089},{id:"sync-vs-async-apis-v13",text:"Sync vs Async APIs (v13)",depth:2,charIndex:4486},{id:"waitfor-usage",text:"waitFor Usage",depth:2,charIndex:4775},{id:"code-organization",text:"Code Organization",depth:2,charIndex:5114},{id:"quick-checklist",text:"Quick Checklist",depth:2,charIndex:5454},{id:"example-good-pattern",text:"Example: Good Pattern",depth:2,charIndex:5784},{id:"example-anti-patterns",text:"Example: Anti-Patterns",depth:2,charIndex:6898}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/llm-guidelines.mdx",description:"Actionable guidelines for writing tests with React Native Testing Library (RNTL) v13."},{title:"React 19 & Suspense Support",routePath:"/docs/guides/react-19",lang:"en",toc:[{id:"new-async-apis",text:"New async APIs",depth:2,charIndex:381},{id:"apis-that-remain-unchanged",text:"APIs that remain unchanged",depth:2,charIndex:723},{id:"what-changes-in-your-tests",text:"What changes in your tests",depth:2,charIndex:1026},{id:"making-tests-async",text:"Making tests async",depth:3,charIndex:1054},{id:"when-to-use-async-apis",text:"When to use async APIs",depth:3,charIndex:1540},{id:"migration-strategy",text:"Migration strategy",depth:2,charIndex:1770},{id:"new-projects",text:"New projects",depth:3,charIndex:1790},{id:"existing-projects",text:"Existing projects",depth:3,charIndex:1936},{id:"future-direction",text:"Future direction",depth:3,charIndex:2139}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/react-19.mdx",description:"React 19 introduced full support for React Suspense, React.use(), and other async rendering features to React Native 0.78.0. When testing components that use these features, React requires the async act helper to handle async state updates. This means React Native Testing Library needs new async versions of its core APIs. These async APIs work with both React 18 and React 19."},{title:"Troubleshooting",routePath:"/docs/guides/troubleshooting",lang:"en",toc:[{id:"matching-react-native-react--react-test-renderer-versions",text:"Matching React Native, React & React Test Renderer versions",depth:2,charIndex:113},{id:"example-repository",text:"Example repository",depth:2,charIndex:985},{id:"undefined-component-error",text:"Undefined component error",depth:2,charIndex:1232},{id:"mocking-react-native",text:"Mocking React Native",depth:3,charIndex:2327},{id:"act-warnings",text:"Act warnings",depth:2,charIndex:2655}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/troubleshooting.mdx",description:"This guide describes common issues found by users when integrating React Native Test Library to their projects:"},{title:"Migration to built-in Jest matchers",routePath:"/docs/migration/jest-matchers",lang:"en",toc:[{id:"general-notes",text:"General notes",depth:2,charIndex:116},{id:"usage",text:"Usage",depth:2,charIndex:528},{id:"gradual-migration",text:"Gradual migration",depth:3,charIndex:708},{id:"migration-details",text:"Migration details",depth:2,charIndex:1148},{id:"matchers-not-requiring-changes",text:"Matchers not requiring changes",depth:3,charIndex:1167},{id:"replaced-matchers",text:"Replaced matchers",depth:3,charIndex:1451},{id:"added-matchers",text:"Added matchers",depth:3,charIndex:1831},{id:"noteworthy-details",text:"Noteworthy details",depth:3,charIndex:1891}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/jest-matchers.mdx",description:"This guide describes the steps necessary to migrate from legacy Jest Native matchers v5 to built-in Jest matchers."},{title:"Migration to 11.x",routePath:"/docs/migration/previous/v11",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:150},{id:"update-to-jest-28-if-you-use-fake-timers",text:"Update to Jest 28 if you use fake timers",depth:3,charIndex:168},{id:"refactor-legacy-waitforoptions-position",text:"Refactor legacy `waitForOptions` position",depth:3,charIndex:391},{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",text:'Triggering non-touch events on targets with `pointerEvents="box-none"` prop',depth:3,charIndex:1336},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:1685}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v11.mdx",description:"Migration to React Native Testing Library version 11 from version 9.x or 10.x should be a relatively easy task due small amount of breaking changes."},{title:"Migration to 12.x",routePath:"/docs/migration/previous/v12",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:489},{id:"1-all-queries-exclude-elements-hidden-from-accessibility-by-default",text:"1. All queries exclude elements hidden from accessibility by default",depth:3,charIndex:507},{id:"2-byrole-queries-now-return-only-accessibility-elements",text:"2. `*ByRole` queries now return only accessibility elements",depth:3,charIndex:1122},{id:"examples",text:"Examples",depth:4,charIndex:1510},{id:"3-bytext-bydisplayvalue-byplaceholdertext-queries-now-return-host-elements",text:"3. `*ByText`, `*ByDisplayValue`, `*ByPlaceholderText` queries now return host elements",depth:3,charIndex:2192},{id:"4-container-api-has-been-renamed-to-unsafe_root",text:"4. `container` API has been renamed to `UNSAFE_root`.",depth:3,charIndex:2754},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:3457}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v12.mdx",description:"React Native Testing Library 12 introduces a handful of breaking changes compared to 11.x versions. We believe they were necessary to improve the experience using the library and help the users fall into the pit of success when writing meaningful tests. You will find migration instructions for each and every change described below."},{title:"Migration to 2.x",routePath:"/docs/migration/previous/v2",lang:"en",toc:[{id:"dropping-node-8",text:"Dropping Node 8",depth:2,charIndex:97},{id:"auto-cleanup",text:"Auto Cleanup",depth:2,charIndex:320},{id:"waitfor-api-changes",text:"WaitFor API changes",depth:2,charIndex:1327},{id:"removed-global-debug-function",text:"Removed global `debug` function",depth:2,charIndex:2107},{id:"removed-global-shallow-function",text:"Removed global `shallow` function",depth:2,charIndex:2256},{id:"removed-functions",text:"Removed functions",depth:2,charIndex:2725},{id:"some-bytestid-queries-behavior-changes",text:"Some `ByTestId` queries behavior changes",depth:2,charIndex:3422},{id:"deprecated-flushmicrotasksqueue",text:"Deprecated `flushMicrotasksQueue`",depth:2,charIndex:4166}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v2.mdx",description:"This guide describes steps necessary to migrate from React Native Testing Library v1.x to v2.x."},{title:"Migration to 7.x",routePath:"/docs/migration/previous/v7",lang:"en",toc:[{id:"guide-for-react-native-testing-library-users",text:"Guide for `react-native-testing-library` users",depth:2,charIndex:304},{id:"renaming-the-library",text:"Renaming the library",depth:3,charIndex:455},{id:"new-aliases",text:"New aliases",depth:3,charIndex:1339},{id:"renaming-byplaceholder-queries",text:"Renaming `ByPlaceholder` queries",depth:3,charIndex:1747},{id:"fireevent-support-for-disabled-components",text:"`fireEvent` support for disabled components",depth:3,charIndex:2059},{id:"guide-for-testing-libraryreact-native-users",text:"Guide for `@testing-library/react-native` users",depth:2,charIndex:2528},{id:"renaming-wait-helpers",text:'Renaming "wait" helpers',depth:3,charIndex:2843},{id:"changes-to-bytestid-queries",text:"Changes to `ByTestId` queries",depth:3,charIndex:2987},{id:"no-bytitle-queries",text:"No `ByTitle` queries",depth:3,charIndex:3144},{id:"no-custom-jest-configuration",text:"No custom Jest configuration",depth:3,charIndex:3591},{id:"cleanup-is-included-by-default",text:"Cleanup is included by default",depth:3,charIndex:3974},{id:"no-nativetestinstance-abstraction",text:"No NativeTestInstance abstraction",depth:3,charIndex:4467},{id:"no-container-nor-baseelement-returned-from-render",text:"No `container` nor `baseElement` returned from `render`",depth:3,charIndex:4671},{id:"firing-events-changes",text:"Firing events changes",depth:3,charIndex:4973}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v7.mdx",description:"As the version 7.0 involves merging two libraries together, there are two variants for migration guide, dependent on library you used previously:"},{title:"Migration to 9.x",routePath:"/docs/migration/previous/v9",lang:"en",toc:[{id:"support-for-text-match-options-aka-string-precision-api",text:"Support for text match options a.k.a string precision API",depth:2,charIndex:281},{id:"reverted-matching-text-across-several-nodes",text:"Reverted matching text across several nodes",depth:2,charIndex:1275},{id:"future-plans",text:"Future plans",depth:2,charIndex:2039}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v9.mdx",description:"Version 7.0 brought React Native Testing Library into the @testing-library family. Since it has been implemented independently from its web counterpart – the React Testing Library – there are some differences in the API and behavior. Version 9.0 solves several of these problems."},{title:"Migration to 13.x",routePath:"/docs/migration/v13",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:225},{id:"supported-react-and-react-native-versions",text:"Supported React and React Native versions",depth:3,charIndex:243},{id:"concurrent-rendering-by-default",text:"Concurrent rendering by default",depth:3,charIndex:586},{id:"extend-jest-matchers-by-default",text:"Extend Jest matchers by default",depth:3,charIndex:971},{id:"removed-deprecated-byaccessibilitystate-queries",text:"Removed deprecated `*ByAccessibilityState` queries",depth:3,charIndex:1372},{id:"removed-deprecated-byaccessibilityvalue-queries",text:"Removed deprecated `*ByAccessibilityValue` queries",depth:3,charIndex:2318},{id:"removed-jest-preset",text:"Removed Jest preset",depth:3,charIndex:3082},{id:"removed-debugshallow",text:"Removed `debug.shallow`",depth:3,charIndex:3299},{id:"changes-to-accessibility-label-calculation",text:"Changes to accessibility label calculation",depth:3,charIndex:3494},{id:"other-changes",text:"Other changes",depth:2,charIndex:3716},{id:"removed-host-component-names-autodetection",text:"Removed host component names autodetection",depth:3,charIndex:3731},{id:"use-react-implementation-of-act-instead-of-react-test-renderer-one",text:"Use React implementation of `act` instead of React Test Renderer one",depth:3,charIndex:3866},{id:"updated-flushmicrotasks-internal-method",text:"Updated `flushMicroTasks` internal method",depth:3,charIndex:3975},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:4057}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/v13.mdx",description:"This guide describes the migration to React Native Testing Library version 13 from version 12.x. Overall, the v13 release is relatively small, focusing on removing deprecated queries and improving the developer experience."},{title:"Introduction",routePath:"/docs/start/intro",lang:"en",toc:[{id:"the-problem",text:"The problem",depth:2,charIndex:0},{id:"this-solution",text:"This solution",depth:2,charIndex:357},{id:"example",text:"Example",depth:2,charIndex:860}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/start/intro.md"},{title:"Quick Start",routePath:"/docs/start/quick-start",lang:"en",toc:[{id:"installation",text:"Installation",depth:2,charIndex:0},{id:"jest-matchers",text:"Jest matchers",depth:3,charIndex:360},{id:"eslint-plugin",text:"ESLint plugin",depth:3,charIndex:596}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/start/quick-start.mdx"},{title:"",routePath:"/",lang:"en",toc:[],frontmatter:{pageType:"home",hero:{image:{src:{light:"/img/logo-light.svg",dark:"/img/logo-dark.svg"}},name:"JavaScript Integration testing for React Native",tagline:"The more your tests resemble the way your software is used, the more confidence they can give you.
      — Kent C. Dodds",actions:[{theme:"brand",text:"Quick Start",link:"/docs/start/quick-start"},{theme:"alt",text:"Explore API",link:"/docs/api"}]},features:[{title:"Maintainable",details:"Write maintainable tests for your React Native apps.",icon:''},{title:"Reliable",details:"Promotes testing public APIs and avoiding implementation details.",icon:''},{title:"Community Driven",details:"Supported by React Native community and its core contributors.",icon:''}]},version:"13.x",_relativePath:"13.x/index.md"},{title:"Network Requests",routePath:"/14.x/cookbook/advanced/network-requests",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"phonebook-example",text:"Phonebook Example",depth:2,charIndex:569},{id:"start-testing-with-a-simple-test",text:"Start testing with a simple test",depth:2,charIndex:4791},{id:"testing-error-handling",text:"Testing error handling",depth:2,charIndex:7891},{id:"global-guarding-against-unwanted-api-requests",text:"Global guarding against unwanted API requests",depth:2,charIndex:9730},{id:"conclusion",text:"Conclusion",depth:2,charIndex:10748},{id:"further-reading-and-alternatives",text:"Further Reading and Alternatives",depth:2,charIndex:11368}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/advanced/network-requests.md"},{title:"Async Events",routePath:"/14.x/cookbook/basics/async-events",lang:"en",toc:[{id:"summary",text:"Summary",depth:2,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:638},{id:"async-utilities",text:"Async utilities",depth:2,charIndex:1768},{id:"findby-queries",text:"`findBy*` queries",depth:3,charIndex:1856},{id:"example-1",text:"Example",depth:4,charIndex:2579},{id:"waitfor-function",text:"`waitFor` function",depth:3,charIndex:2831},{id:"example-2",text:"Example",depth:4,charIndex:3354},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3,charIndex:3576},{id:"example-3",text:"Example",depth:4,charIndex:4169},{id:"fake-timers",text:"Fake Timers",depth:2,charIndex:4244}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/basics/async-events.md"},{title:"Custom `render` function",routePath:"/14.x/cookbook/basics/custom-render",lang:"en",toc:[{id:"summary",text:"Summary",depth:3,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:291},{id:"more-info",text:"More info",depth:3,charIndex:1145},{id:"additional-params",text:"Additional params",depth:4,charIndex:1156},{id:"multiple-functions",text:"Multiple functions",depth:4,charIndex:1490},{id:"async-setup",text:"Async setup",depth:4,charIndex:1779}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/basics/custom-render.md",description:"Summary RNTL exposes the render function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests. Example Example full source code. More info Additional params A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management. Multiple functions Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens. Async setup Since render is async, your custom render function should be marked as async and use await render(). This pattern also makes it easy to add additional async setup if needed:"},{title:"Introduction",routePath:"/14.x/cookbook/",lang:"en",toc:[{id:"whats-inside-the-cookbook",text:"What's Inside the Cookbook?",depth:2,charIndex:431},{id:"whats-next",text:"What's Next?",depth:2,charIndex:1024}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/index.md",description:"Welcome to the React Native Testing Library (RNTL) Cookbook! This app is your go-to resource for learning how to effectively test React Native applications. It provides a collection of best practices, ready-made recipes, and tips & tricks to simplify and improve your testing workflow. Whether you’re a beginner just getting started or a seasoned developer looking to sharpen your skills, the Cookbook has something for everyone."},{title:"Jotai",routePath:"/14.x/cookbook/state-management/jotai",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"task-list-example",text:"Task List Example",depth:2,charIndex:332},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2,charIndex:1433},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2,charIndex:1910},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2,charIndex:3564},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2,charIndex:4812},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2,charIndex:5415},{id:"conclusion",text:"Conclusion",depth:2,charIndex:6091}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/state-management/jotai.md"},{title:"Testing environment",routePath:"/14.x/docs/advanced/testing-env",lang:"en",toc:[{id:"react-renderers",text:"React renderers",depth:2,charIndex:635},{id:"test-renderer",text:"Test Renderer",depth:2,charIndex:1346},{id:"element-tree",text:"Element tree",depth:2,charIndex:2804},{id:"host-and-composite-components",text:"Host and composite components",depth:2,charIndex:3487},{id:"host-only-element-tree",text:"Host-only element tree",depth:3,charIndex:5327},{id:"tree-nodes",text:"Tree nodes",depth:2,charIndex:5822},{id:"understanding-props",text:"Understanding props",depth:3,charIndex:6088},{id:"tree-navigation",text:"Tree navigation",depth:2,charIndex:6755},{id:"queries",text:"Queries",depth:2,charIndex:7242}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/advanced/testing-env.mdx",description:"React Native Testing Library lets you write integration and component tests for your React Native app or library. While the JSX code in tests closely resembles your React Native app, the underlying environment differs. This document describes the key elements of our testing environment and highlights things to be aware of when writing advanced tests or diagnosing issues."},{title:"Third-Party Library Integration",routePath:"/14.x/docs/advanced/third-party-integration",lang:"en",toc:[{id:"handling-events-in-third-party-libraries",text:"Handling Events in Third-Party Libraries",depth:2,charIndex:231},{id:"example-react-native-gesture-handler",text:"Example: React Native Gesture Handler",depth:3,charIndex:1010}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/advanced/third-party-integration.mdx",description:"The React Native Testing Library is designed to simulate the core behaviors of React Native. However, it does not replicate the internal logic of third-party libraries. This guide explains how to integrate your library with RNTL."},{title:"Understanding `act` function",routePath:"/14.x/docs/advanced/understanding-act",lang:"en",toc:[{id:"act-warning",text:"`act` warning",depth:2,charIndex:201},{id:"understanding-act",text:"Understanding `act`",depth:2,charIndex:643},{id:"responsibility",text:"Responsibility",depth:3,charIndex:662},{id:"when-to-use-act",text:"When to use act",depth:3,charIndex:2489},{id:"implementation",text:"Implementation",depth:3,charIndex:3542},{id:"asynchronous-code",text:"Asynchronous code",depth:2,charIndex:4342},{id:"handling-asynchronous-operations",text:"Handling asynchronous operations",depth:3,charIndex:4766},{id:"solution-with-fake-timers",text:"Solution with fake timers",depth:3,charIndex:5626},{id:"solution-with-real-timers",text:"Solution with real timers",depth:3,charIndex:6123},{id:"references",text:"References",depth:2,charIndex:7510}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/advanced/understanding-act.mdx",description:"When writing RNTL tests, cryptic act() function errors logged to console often confuse developers. This article explains the purpose and behavior of act() so you can write tests with more confidence."},{title:"API Overview",routePath:"/14.x/docs/api",lang:"en",toc:[],frontmatter:{uri:"/api"},version:"14.x",_relativePath:"14.x/docs/api.md",description:"React Native Testing Library consists of following APIs: render function - render your UI components for testing purposesscreen object - access rendered UI:Queries - find relevant components by various predicates: role, text, test ids, etcLifecycle methods: rerender, unmountHelpers: debug, toJSON, rootJest matchers - validate assumptions about your UIUser Event - simulate common user interactions like press or type in a realistic wayFire Event - simulate any component event in a simplified way purposesMisc APIs:renderHook function - render hooks for testingAsync utils: findBy* queries, waitFor, waitForElementToBeRemovedConfiguration: configure, resetToDefaultsAccessibility: isHiddenFromAccessibilityOther: within, act, cleanup"},{title:"Fire Event API",routePath:"/14.x/docs/api/events/fire-event",lang:"en",toc:[{id:"fire-event",text:"`fireEvent`",depth:2,charIndex:0},{id:"press",text:"`fireEvent.press`",depth:3,charIndex:2139},{id:"change-text",text:"`fireEvent.changeText`",depth:3,charIndex:2922},{id:"scroll",text:"`fireEvent.scroll`",depth:3,charIndex:3574},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4,charIndex:4037}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/events/fire-event.mdx"},{title:"User Event interactions",routePath:"/14.x/docs/api/events/user-event",lang:"en",toc:[{id:"comparison-with-fire-event-api",text:"Comparison with Fire Event API",depth:2,charIndex:0},{id:"setup",text:"`setup()`",depth:2,charIndex:1095},{id:"setup-options",text:"Options",depth:3,charIndex:1331},{id:"press",text:"`press()`",depth:2,charIndex:1592},{id:"longpress",text:"`longPress()`",depth:2,charIndex:2257},{id:"longpress-options",text:"Options",depth:3,charIndex:3094},{id:"type",text:"`type()`",depth:2,charIndex:3204},{id:"type-options",text:"Options",depth:3,charIndex:3868},{id:"type-sequence",text:"Sequence of events",depth:3,charIndex:4148},{id:"clear",text:"`clear()`",depth:2,charIndex:4877},{id:"clear-sequence",text:"Sequence of events",depth:3,charIndex:5180},{id:"paste",text:"`paste()`",depth:2,charIndex:5463},{id:"paste-sequence",text:"Sequence of events",depth:3,charIndex:5793},{id:"scroll-to",text:"`scrollTo()`",depth:2,charIndex:6100},{id:"scroll-to-options",text:"Options",depth:3,charIndex:7492},{id:"scroll-sequence",text:"Sequence of events",depth:3,charIndex:8482}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/events/user-event.mdx"},{title:"Jest matchers",routePath:"/14.x/docs/api/jest-matchers",lang:"en",toc:[{id:"setup",text:"Setup",depth:2,charIndex:138},{id:"checking-element-existence",text:"Checking element existence",depth:2,charIndex:238},{id:"tobeonthescreen",text:"`toBeOnTheScreen()`",depth:3,charIndex:266},{id:"element-content",text:"Element Content",depth:2,charIndex:479},{id:"tohavetextcontent",text:"`toHaveTextContent()`",depth:3,charIndex:496},{id:"tocontainelement",text:"`toContainElement()`",depth:3,charIndex:803},{id:"tobeemptyelement",text:"`toBeEmptyElement()`",depth:3,charIndex:952},{id:"checking-element-state",text:"Checking element state",depth:2,charIndex:1070},{id:"tohavedisplayvalue",text:"`toHaveDisplayValue()`",depth:3,charIndex:1094},{id:"tohaveaccessibilityvalue",text:"`toHaveAccessibilityValue()`",depth:3,charIndex:1406},{id:"tobeenabled",text:"`toBeEnabled()` / `toBeDisabled`",depth:3,charIndex:1938},{id:"tobeselected",text:"`toBeSelected()`",depth:3,charIndex:2344},{id:"tobechecked",text:"`toBeChecked()` / `toBePartiallyChecked()`",depth:3,charIndex:2484},{id:"tobeexpanded",text:"`toBeExpanded()` / `toBeCollapsed()`",depth:3,charIndex:2902},{id:"tobebusy",text:"`toBeBusy()`",depth:3,charIndex:3318},{id:"checking-element-style",text:"Checking element style",depth:2,charIndex:3438},{id:"tobevisible",text:"`toBeVisible()`",depth:3,charIndex:3462},{id:"tohavestyle",text:"`toHaveStyle()`",depth:3,charIndex:3668},{id:"other-matchers",text:"Other matchers",depth:2,charIndex:3785},{id:"tohaveaccessiblename",text:"`toHaveAccessibleName()`",depth:3,charIndex:3801},{id:"tohaveprop",text:"`toHaveProp()`",depth:3,charIndex:4696}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/jest-matchers.mdx",description:"This guide covers the built-in Jest matchers. These matchers make your tests easier to read and work better with accessibility features."},{title:"Accessibility",routePath:"/14.x/docs/api/misc/accessibility",lang:"en",toc:[{id:"ishiddenfromaccessibility",text:"`isHiddenFromAccessibility`",depth:2,charIndex:0}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/accessibility.mdx"},{title:"Async utilities",routePath:"/14.x/docs/api/misc/async",lang:"en",toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2,charIndex:0},{id:"waitfor",text:"`waitFor`",depth:2,charIndex:181},{id:"options",text:"Options",depth:3,charIndex:3297},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2,charIndex:3593}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/async.mdx"},{title:"Configuration",routePath:"/14.x/docs/api/misc/config",lang:"en",toc:[{id:"configure",text:"`configure`",depth:2,charIndex:0},{id:"asyncutiltimeout-option",text:"`asyncUtilTimeout` option",depth:3,charIndex:526},{id:"defaultincludehiddenelements-option",text:"`defaultIncludeHiddenElements` option",depth:3,charIndex:682},{id:"defaultdebugoptions-option",text:"`defaultDebugOptions` option",depth:3,charIndex:1068},{id:"resettodefaults",text:"`resetToDefaults()`",depth:2,charIndex:1248},{id:"environment-variables",text:"Environment variables",depth:2,charIndex:1298},{id:"rntl_skip_auto_cleanup",text:"`RNTL_SKIP_AUTO_CLEANUP`",depth:3,charIndex:1321},{id:"rntl_skip_auto_detect_fake_timers",text:"`RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS`",depth:3,charIndex:1570}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/config.mdx"},{title:"Other helpers",routePath:"/14.x/docs/api/misc/other",lang:"en",toc:[{id:"within",text:"`within`",depth:2,charIndex:0},{id:"act",text:"`act`",depth:2,charIndex:824},{id:"cleanup",text:"`cleanup`",depth:2,charIndex:1683}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/other.mdx"},{title:"`renderHook` function",routePath:"/14.x/docs/api/misc/render-hook",lang:"en",toc:[{id:"renderhook",text:"`renderHook`",depth:2,charIndex:0},{id:"options",text:"`options`",depth:3,charIndex:1701},{id:"initial-props",text:"`initialProps`",depth:4,charIndex:1776},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:1971},{id:"result",text:"Result",depth:3,charIndex:2106},{id:"result-1",text:"`result`",depth:4,charIndex:2370},{id:"rerender",text:"`rerender`",depth:4,charIndex:2633},{id:"unmount",text:"`unmount`",depth:4,charIndex:2967},{id:"examples",text:"Examples",depth:3,charIndex:3156},{id:"with-initialprops",text:"With `initialProps`",depth:4,charIndex:3208},{id:"with-wrapper",text:"With `wrapper`",depth:4,charIndex:3882},{id:"with-react-suspense",text:"With React Suspense",depth:4,charIndex:4175}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/render-hook.mdx"},{title:"Queries",routePath:"/14.x/docs/api/queries",lang:"en",toc:[{id:"accessing-queries",text:"Accessing queries",depth:2,charIndex:223},{id:"using-screen-object",text:"Using `screen` object",depth:3,charIndex:379},{id:"using-render-result",text:"Using `render` result",depth:3,charIndex:710},{id:"query-parts",text:"Query parts",depth:2,charIndex:1020},{id:"query-variant",text:"Query variant",depth:2,charIndex:1276},{id:"get-by",text:"`getBy*` queries",depth:3,charIndex:1936},{id:"get-all-by",text:"`getAllBy*` queries",depth:3,charIndex:2191},{id:"query-by",text:"`queryBy*` queries",depth:3,charIndex:2369},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3,charIndex:2648},{id:"find-by",text:"`findBy*` queries",depth:3,charIndex:2845},{id:"find-all-by",text:"`findAllBy*` queries",depth:3,charIndex:3251},{id:"query-predicates",text:"Query predicates",depth:2,charIndex:4009},{id:"by-role",text:"`*ByRole`",depth:3,charIndex:4293},{id:"by-role-options",text:"Options",depth:4,charIndex:5479},{id:"by-label-text",text:"`*ByLabelText`",depth:3,charIndex:8147},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3,charIndex:9029},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3,charIndex:9595},{id:"by-text",text:"`*ByText`",depth:3,charIndex:10135},{id:"by-hint-text",text:"`*ByHintText`",depth:3,charIndex:10808},{id:"by-test-id",text:"`*ByTestId`",depth:3,charIndex:11610},{id:"common-options",text:"Common options",depth:3,charIndex:12434},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4,charIndex:12690},{id:"textmatch-type",text:"TextMatch type",depth:2,charIndex:13525},{id:"examples",text:"Examples",depth:3,charIndex:13691},{id:"text-match-options",text:"Options",depth:3,charIndex:14501},{id:"precision",text:"Precision",depth:4,charIndex:14532},{id:"normalization",text:"Normalization",depth:4,charIndex:15378}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/queries.mdx",description:"Queries are one of the main building blocks for the React Native Testing Library. They enable you to find relevant elements in the element tree, which represents your application's user interface when running under tests."},{title:"`render` API",routePath:"/14.x/docs/api/render",lang:"en",toc:[{id:"render",text:"`render` function",depth:2,charIndex:0},{id:"options",text:"Options",depth:3,charIndex:853},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:942},{id:"result",text:"Result",depth:3,charIndex:1654}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/render.mdx"},{title:"`screen` object",routePath:"/14.x/docs/api/screen",lang:"en",toc:[{id:"queries",text:"`...queries`",depth:3,charIndex:575},{id:"example",text:"Example",depth:4,charIndex:708},{id:"rerender",text:"`rerender`",depth:3,charIndex:854},{id:"unmount",text:"`unmount`",depth:3,charIndex:1644},{id:"debug",text:"`debug`",depth:3,charIndex:2113},{id:"debug-message-option",text:"`message` option",depth:4,charIndex:2263},{id:"debug-map-props-option",text:"`mapProps` option",depth:4,charIndex:2567},{id:"tojson",text:"`toJSON`",depth:3,charIndex:3574},{id:"container",text:"`container`",depth:3,charIndex:3698},{id:"root",text:"`root`",depth:3,charIndex:4242}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/screen.mdx",description:"The screen object provides access to queries and utilities for the currently rendered UI. This object is assigned after the render call and cleared after each test by calling cleanup. If no render call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access. ...queries The main feature of screen is its queries for finding elements in the view hierarchy. See Queries for a complete list. Example rerender Re-render the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and key) as the previous element, the tree will be updated; otherwise, it will re-mount a new tree, in both cases triggering the appropriate lifecycle events. This method is async and uses async act internally to execute all pending React updates during updating. This works with async React features like Suspense boundaries and the use() hook. unmount Unmount the in-memory tree, triggering the appropriate lifecycle events. This method is async and uses async act internally to execute all pending React updates during unmounting. This works with async React features like Suspense boundaries and the use() hook. debug Pretty prints deeply rendered component passed to render. message option {#debug-message-option} You can provide a message that will be printed on top. logs optional message and colored JSX: mapProps option {#debug-map-props-option} You can use the mapProps option to transform the props that will be printed : This will log the rendered JSX without the style props. The children prop cannot be filtered out so the following will print all rendered components with all props but children filtered out. This option can be used to target specific props when debugging a query (for instance, keeping only the children prop when debugging a getByText query). You can also transform prop values so that they are more readable (e.g., flatten styles). Or remove props that have little value when debugging tests, e.g. path prop for svgs toJSON Get the rendered component JSON representation, e.g. for snapshot testing. container Returns a pseudo-element container whose children are the elements you asked to render. This is the root container element from Test Renderer. The container provides access to the entire rendered tree. Use it to query or manipulate the rendered output, similar to how container works in React Testing Library. root Returns the rendered root host element, or null if nothing was rendered. This is the first child of the container, which represents the actual root element you rendered. This API is useful for component tests where you need to access the root host view without using *ByTestId queries or similar methods."},{title:"Common Mistakes with React Native Testing Library",routePath:"/14.x/docs/guides/common-mistakes",lang:"en",toc:[{id:"using-the-wrong-query",text:"Using the wrong query",depth:2,charIndex:630},{id:"not-using-byrole-most-of-the-time",text:"Not using `*ByRole` query most of the time",depth:2,charIndex:1652},{id:"using-the-wrong-assertion",text:"Using the wrong assertion",depth:2,charIndex:2785},{id:"using-query-variants-for-anything-except-checking-for-non-existence",text:"Using `query*` variants for anything except checking for non-existence",depth:2,charIndex:3655},{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",text:"Using `waitFor` to wait for elements that can be queried with `find*`",depth:2,charIndex:4416},{id:"performing-side-effects-in-waitfor",text:"Performing side-effects in `waitFor`",depth:2,charIndex:5231},{id:"using-container-to-query-for-elements",text:"Using `container` to query for elements",depth:2,charIndex:6199},{id:"passing-an-empty-callback-to-waitfor",text:"Passing an empty callback to `waitFor`",depth:2,charIndex:6986},{id:"not-using-screen",text:"Not using `screen`",depth:2,charIndex:7445},{id:"wrapping-things-in-act-unnecessarily",text:"Wrapping things in `act` unnecessarily",depth:2,charIndex:8165},{id:"not-using-user-event-api",text:"Not using User Event API",depth:2,charIndex:9101},{id:"not-querying-by-text",text:"Not querying by text",depth:2,charIndex:10267},{id:"not-using-testing-library-eslint-plugins",text:"Not using Testing Library ESLint plugins",depth:2,charIndex:10840},{id:"using-cleanup",text:"Using `cleanup`",depth:2,charIndex:11500},{id:"using-get-variants-as-assertions",text:"Using `get*` variants as assertions",depth:2,charIndex:12109},{id:"having-multiple-assertions-in-a-single-waitfor-callback",text:"Having multiple assertions in a single `waitFor` callback",depth:2,charIndex:12934},{id:"using-wrapper-as-the-variable-name",text:"Using `wrapper` as the variable name",depth:2,charIndex:13997},{id:"summary",text:"Summary",depth:2,charIndex:14863}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/common-mistakes.mdx",description:'Note: This guide is adapted from Kent C. Dodds\' article "Common mistakes with React Testing Library" for React Native Testing Library v14. The original article focuses on web React, but the principles apply to React Native as well. This adaptation includes React Native-specific examples, async API usage (v14), and ARIA-compatible accessibility attributes. React Native Testing Library guiding principle is: "The more your tests resemble the way your software is used, the more confidence they can give you." This guide outlines some common mistakes people make when using React Native Testing Library and how to avoid them.'},{title:"Community resources",routePath:"/14.x/docs/guides/community-resources",lang:"en",toc:[{id:"recommended-content",text:"Recommended content",depth:2,charIndex:0},{id:"older-potentially-outdated-content",text:"Older, potentially outdated content",depth:2,charIndex:569}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/community-resources.mdx"},{title:"FAQ",routePath:"/14.x/docs/guides/faq",lang:"en",toc:[{id:"can-i-test-the-native-features-of-react-native-apps",text:"Can I test the native features of React Native apps?",depth:2,charIndex:0},{id:"should-i-usemigrate-to-screen-queries",text:"Should I use/migrate to `screen` queries?",depth:2,charIndex:1097},{id:"should-i-usemigrate-to-user-event-interactions",text:"Should I use/migrate to User Event interactions?",depth:2,charIndex:1405}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/faq.mdx"},{title:"How should I query?",routePath:"/14.x/docs/guides/how-to-query",lang:"en",toc:[{id:"query-parts",text:"Query parts",depth:2,charIndex:196},{id:"query-variant",text:"Query variant",depth:2,charIndex:454},{id:"idiomatic-query-variants",text:"Idiomatic query variants",depth:3,charIndex:1114},{id:"query-predicate",text:"Query predicate",depth:2,charIndex:2036},{id:"idiomatic-query-predicates",text:"Idiomatic query predicates",depth:3,charIndex:2617},{id:"by-role-query",text:"1. By Role query",depth:3,charIndex:3034},{id:"by-role-query-name-option",text:"Name option",depth:4,charIndex:4039},{id:"text-input-queries",text:"2. Text input queries",depth:3,charIndex:4578},{id:"other-accessible-queries",text:"3. Other accessible queries",depth:3,charIndex:5375},{id:"test-id-query",text:"4. Test ID query",depth:3,charIndex:5804}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/how-to-query.mdx",description:"React Native Testing Library provides various query types for finding views in tests. The number of queries can be confusing. This guide helps you pick the right queries for your test scenarios."},{title:"LLM Guidelines for React Native Testing Library",routePath:"/14.x/docs/guides/llm-guidelines",lang:"en",toc:[{id:"core-apis",text:"Core APIs",depth:2,charIndex:87},{id:"render",text:"render",depth:3,charIndex:98},{id:"screen",text:"screen",depth:3,charIndex:584},{id:"renderhook",text:"renderHook",depth:3,charIndex:781},{id:"query-selection",text:"Query Selection",depth:2,charIndex:1162},{id:"assertions",text:"Assertions",depth:2,charIndex:1692},{id:"jest-matchers-reference",text:"Jest Matchers Reference",depth:2,charIndex:1918},{id:"user-interactions",text:"User Interactions",depth:2,charIndex:3382},{id:"userevent-preferred",text:"userEvent (Preferred)",depth:3,charIndex:3555},{id:"fireevent-low-level",text:"fireEvent (Low-level)",depth:3,charIndex:4079},{id:"asyncawait-v14",text:"Async/Await (v14)",depth:2,charIndex:4463},{id:"waitfor-usage",text:"waitFor Usage",depth:2,charIndex:4673},{id:"code-organization",text:"Code Organization",depth:2,charIndex:5012},{id:"quick-checklist",text:"Quick Checklist",depth:2,charIndex:5352},{id:"example-good-pattern",text:"Example: Good Pattern",depth:2,charIndex:5737},{id:"example-anti-patterns",text:"Example: Anti-Patterns",depth:2,charIndex:6857}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/llm-guidelines.mdx",description:"Actionable guidelines for writing tests with React Native Testing Library (RNTL) v14."},{title:"Troubleshooting",routePath:"/14.x/docs/guides/troubleshooting",lang:"en",toc:[{id:"example-repository",text:"Example repository",depth:2,charIndex:113},{id:"undefined-component-error",text:"Undefined component error",depth:2,charIndex:320},{id:"mocking-react-native",text:"Mocking React Native",depth:3,charIndex:1383},{id:"act-warnings",text:"Act warnings",depth:2,charIndex:1659}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/troubleshooting.mdx",description:"This guide describes common issues found by users when integrating React Native Test Library to their projects:"},{title:"Introduction",routePath:"/14.x/docs/start/intro",lang:"en",toc:[{id:"the-problem",text:"The problem",depth:2,charIndex:0},{id:"this-solution",text:"This solution",depth:2,charIndex:474},{id:"example",text:"Example",depth:2,charIndex:981}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/start/intro.md"},{title:"Migration to 14.x",routePath:"/14.x/docs/start/migration-v14",lang:"en",toc:[{id:"overview",text:"Overview",depth:2,charIndex:98},{id:"quick-migration",text:"Quick Migration",depth:2,charIndex:690},{id:"breaking-changes",text:"Breaking Changes",depth:2,charIndex:1726},{id:"supported-react-react-native-and-nodejs-versions",text:"Supported React, React Native, and Node.js versions",depth:3,charIndex:1744},{id:"test-renderer-replaces-react-test-renderer",text:"Test Renderer replaces React Test Renderer",depth:3,charIndex:2087},{id:"recommended-test-renderer-versions",text:"Recommended Test Renderer versions",depth:4,charIndex:2706},{id:"1-update-dependencies",text:"1. Update dependencies",depth:4,charIndex:3404},{id:"2-update-type-imports-if-needed",text:"2. Update type imports (if needed)",depth:4,charIndex:4500},{id:"async-apis-by-default",text:"Async APIs by Default",depth:3,charIndex:4845},{id:"render-async-default",text:"`render` is now async",depth:4,charIndex:5557},{id:"renderhook-is-now-async",text:"`renderHook` is now async",depth:4,charIndex:6058},{id:"fireevent-is-now-async",text:"`fireEvent` is now async",depth:4,charIndex:6506},{id:"act-is-now-async",text:"`act` is now async",depth:4,charIndex:7570},{id:"why-async-apis",text:"Why async APIs?",depth:4,charIndex:8393},{id:"removed-apis",text:"Removed APIs",depth:3,charIndex:8598},{id:"update-alias-removed",text:"`update` alias removed",depth:4,charIndex:8612},{id:"getqueriesforelement-export-removed",text:"`getQueriesForElement` export removed",depth:4,charIndex:8980},{id:"unsafe_root-removed",text:"`UNSAFE_root` removed",depth:4,charIndex:9349},{id:"legacy-unsafe_-queries-removed",text:"Legacy `UNSAFE_*` queries removed",depth:4,charIndex:9699},{id:"concurrentroot-option-removed",text:"`concurrentRoot` option removed",depth:4,charIndex:10430},{id:"createnodemock-option-removed",text:"`createNodeMock` option removed",depth:4,charIndex:11290},{id:"container-api-reintroduced",text:"`container` API reintroduced",depth:3,charIndex:11908},{id:"text-string-validation-enforced-by-default",text:"Text string validation enforced by default",depth:3,charIndex:12950},{id:"hidden-suspense-and-activity-content",text:"Hidden Suspense and Activity content",depth:3,charIndex:14210},{id:"accessible-name-changes",text:"Accessible name changes",depth:3,charIndex:14808},{id:"unknown-options-now-warn",text:"Unknown options now warn",depth:3,charIndex:15595},{id:"codemods",text:"Codemods",depth:2,charIndex:15990},{id:"rntl-v14-update-deps",text:"`rntl-v14-update-deps`",depth:3,charIndex:16149},{id:"rntl-v14-async-functions",text:"`rntl-v14-async-functions`",depth:3,charIndex:16755},{id:"custom-render-functions",text:"Custom render functions",depth:4,charIndex:17295},{id:"limitations",text:"Limitations",depth:4,charIndex:18288},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:18426}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/start/migration-v14.mdx",description:"This guide describes the migration to React Native Testing Library version 14 from version 13.x."},{title:"Quick Start",routePath:"/14.x/docs/start/quick-start",lang:"en",toc:[{id:"installation",text:"Installation",depth:2,charIndex:0},{id:"agent-docs-in-the-package",text:"Agent docs in the package",depth:2,charIndex:711},{id:"jest-matchers",text:"Jest matchers",depth:3,charIndex:1432},{id:"eslint-plugin",text:"ESLint plugin",depth:3,charIndex:1664}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/start/quick-start.mdx"},{title:"",routePath:"/14.x/",lang:"en",toc:[],frontmatter:{pageType:"home",hero:{image:{src:{light:"/img/logo-light.svg",dark:"/img/logo-dark.svg"}},name:"JavaScript Integration testing for React Native",tagline:"The more your tests resemble the way your software is used, the more confidence they can give you.
      — Kent C. Dodds",actions:[{theme:"brand",text:"Quick Start",link:"/14.x/docs/start/quick-start"},{theme:"alt",text:"Explore API",link:"/14.x/docs/api"}]},features:[{title:"Maintainable",details:"Write maintainable tests for your React Native apps.",icon:''},{title:"Reliable",details:"Promotes testing public APIs and avoiding implementation details.",icon:''},{title:"Community Driven",details:"Supported by React Native community and its core contributors.",icon:''}]},version:"14.x",_relativePath:"14.x/index.md"},{title:"",routePath:"/404",lang:"en",toc:[],frontmatter:{pageType:"custom"},version:"13.x",_relativePath:"404.mdx"}]},a={"12.x###en":"8f008cec","13.x###en":"0560a7bf","14.x###en":"712e4ef5"}},1014(e,t,n){n.d(t,{A:()=>i});let i={github:''}},2650(e,t,n){n.d(t,{A:()=>i});let i={languagesText:{en:"Languages"},themeText:{en:"Theme"},versionsText:{en:"Versions"},menuTitle:{en:"Menu"},outlineTitle:{en:"Contents"},scrollToTopText:{en:"Back to top"},lastUpdatedText:{en:"Last Updated"},prevPageText:{en:"Previous page"},nextPageText:{en:"Next page"},sourceCodeText:{en:"Source Code"},searchPlaceholderText:{en:"Search"},searchPanelCancelText:{en:"Cancel"},searchNoResultsText:{en:"No results found, try something different than"},searchSuggestedQueryText:{en:" "},"overview.filterNameText":{en:" "},"overview.filterPlaceholderText":{en:"Search API"},"overview.filterNoResultText":{en:"No matching API found"},openInText:{en:"Open in {{name}}"},copyMarkdownText:{en:"Copy Markdown"},copyMarkdownLinkText:{en:"Copy Markdown link"},editLinkText:{en:"Edit this page on GitHub"},codeButtonGroupCopyButtonText:{en:"Copy code"},notFoundText:{en:"PAGE NOT FOUND"},takeMeHomeText:{en:"Take me home"}}},8369(e,t,n){n.d(t,{A:()=>i});let i=[[n(4595).A,{}]]},5344(e,t,n){n(9995),n(1569)},948(e,t,n){n.r(t),n.d(t,{onSearch:()=>i});let i=()=>{}},3974(e,t,n){n.d(t,{J:()=>ez});var i=n(6540),a=n(4764);let r=(0,a.YZ)(()=>n.e("1008").then(n.bind(n,3779))),o=(0,a.YZ)(()=>n.e("5816").then(n.bind(n,7483))),d=(0,a.YZ)(()=>n.e("8750").then(n.bind(n,9645))),s=(0,a.YZ)(()=>n.e("8648").then(n.bind(n,9083))),c=(0,a.YZ)(()=>n.e("8397").then(n.bind(n,8220))),h=(0,a.YZ)(()=>n.e("7351").then(n.bind(n,6138))),l=(0,a.YZ)(()=>n.e("8810").then(n.bind(n,6193))),p=(0,a.YZ)(()=>n.e("1858").then(n.bind(n,3257))),x=(0,a.YZ)(()=>n.e("4936").then(n.bind(n,4107))),u=(0,a.YZ)(()=>n.e("5507").then(n.bind(n,3870))),m=(0,a.YZ)(()=>n.e("6137").then(n.bind(n,4384))),g=(0,a.YZ)(()=>n.e("1038").then(n.bind(n,6589))),v=(0,a.YZ)(()=>n.e("8146").then(n.bind(n,2377))),y=(0,a.YZ)(()=>n.e("6156").then(n.bind(n,3319))),f=(0,a.YZ)(()=>n.e("1304").then(n.bind(n,9867))),b=(0,a.YZ)(()=>n.e("9826").then(n.bind(n,3689))),I=(0,a.YZ)(()=>n.e("4819").then(n.bind(n,862))),w=(0,a.YZ)(()=>n.e("9377").then(n.bind(n,8888))),k=(0,a.YZ)(()=>n.e("9277").then(n.bind(n,940))),P=(0,a.YZ)(()=>n.e("631").then(n.bind(n,9098))),T=(0,a.YZ)(()=>n.e("9782").then(n.bind(n,6469))),q=(0,a.YZ)(()=>n.e("7623").then(n.bind(n,1082))),E=(0,a.YZ)(()=>n.e("836").then(n.bind(n,7103))),R=(0,a.YZ)(()=>n.e("4397").then(n.bind(n,1724))),A=(0,a.YZ)(()=>n.e("1607").then(n.bind(n,8810))),N=(0,a.YZ)(()=>n.e("8129").then(n.bind(n,7288))),_=(0,a.YZ)(()=>n.e("9914").then(n.bind(n,2209))),S=(0,a.YZ)(()=>n.e("8748").then(n.bind(n,3127))),C=(0,a.YZ)(()=>n.e("3990").then(n.bind(n,8261))),B=(0,a.YZ)(()=>n.e("4889").then(n.bind(n,2608))),j=(0,a.YZ)(()=>n.e("9273").then(n.bind(n,9712))),L=(0,a.YZ)(()=>n.e("8358").then(n.bind(n,7861))),Y=(0,a.YZ)(()=>n.e("9667").then(n.bind(n,6750))),O=(0,a.YZ)(()=>n.e("8617").then(n.bind(n,8672))),U=(0,a.YZ)(()=>n.e("3783").then(n.bind(n,7130))),M=(0,a.YZ)(()=>n.e("8187").then(n.bind(n,6822))),Z=(0,a.YZ)(()=>n.e("4800").then(n.bind(n,211))),F=(0,a.YZ)(()=>n.e("2864").then(n.bind(n,5667))),H=(0,a.YZ)(()=>n.e("5957").then(n.bind(n,9428))),J=(0,a.YZ)(()=>n.e("8293").then(n.bind(n,3476))),Q=(0,a.YZ)(()=>n.e("7497").then(n.bind(n,2336))),D=(0,a.YZ)(()=>n.e("2721").then(n.bind(n,4536))),W=(0,a.YZ)(()=>n.e("7262").then(n.bind(n,3949))),G=(0,a.YZ)(()=>n.e("4152").then(n.bind(n,2731))),V=(0,a.YZ)(()=>n.e("8353").then(n.bind(n,2936))),K=(0,a.YZ)(()=>n.e("8481").then(n.bind(n,7608))),z=(0,a.YZ)(()=>n.e("8901").then(n.bind(n,2084))),X=(0,a.YZ)(()=>n.e("6047").then(n.bind(n,1794))),$=(0,a.YZ)(()=>n.e("3453").then(n.bind(n,9004))),ee=(0,a.YZ)(()=>n.e("9150").then(n.bind(n,8285))),et=(0,a.YZ)(()=>n.e("6958").then(n.bind(n,1389))),en=(0,a.YZ)(()=>n.e("8222").then(n.bind(n,4061))),ei=(0,a.YZ)(()=>n.e("4460").then(n.bind(n,7991))),ea=(0,a.YZ)(()=>n.e("328").then(n.bind(n,3083))),er=(0,a.YZ)(()=>n.e("4553").then(n.bind(n,6032))),eo=(0,a.YZ)(()=>n.e("9950").then(n.bind(n,7341))),ed=(0,a.YZ)(()=>n.e("3974").then(n.bind(n,3285))),es=(0,a.YZ)(()=>n.e("3527").then(n.bind(n,2266))),ec=(0,a.YZ)(()=>n.e("4359").then(n.bind(n,4474))),eh=(0,a.YZ)(()=>n.e("4756").then(n.bind(n,3055))),el=(0,a.YZ)(()=>n.e("2184").then(n.bind(n,2139))),ep=(0,a.YZ)(()=>n.e("9637").then(n.bind(n,8900))),ex=(0,a.YZ)(()=>n.e("9408").then(n.bind(n,4979))),eu=(0,a.YZ)(()=>n.e("1359").then(n.bind(n,6050))),em=(0,a.YZ)(()=>n.e("6341").then(n.bind(n,660))),eg=(0,a.YZ)(()=>n.e("5868").then(n.bind(n,8103))),ev=(0,a.YZ)(()=>n.e("7146").then(n.bind(n,750))),ey=(0,a.YZ)(()=>n.e("7240").then(n.bind(n,507))),ef=(0,a.YZ)(()=>n.e("7863").then(n.bind(n,3258))),eb=(0,a.YZ)(()=>n.e("2222").then(n.bind(n,1725))),eI=(0,a.YZ)(()=>n.e("7340").then(n.bind(n,1511))),ew=(0,a.YZ)(()=>n.e("92").then(n.bind(n,6087))),ek=(0,a.YZ)(()=>n.e("7562").then(n.bind(n,3809))),eP=(0,a.YZ)(()=>n.e("3107").then(n.bind(n,9038))),eT=(0,a.YZ)(()=>n.e("5197").then(n.bind(n,2076))),eq=(0,a.YZ)(()=>n.e("4064").then(n.bind(n,2912))),eE=(0,a.YZ)(()=>n.e("7296").then(n.bind(n,163))),eR=(0,a.YZ)(()=>n.e("2196").then(n.bind(n,5535))),eA=(0,a.YZ)(()=>n.e("594").then(n.bind(n,1961))),eN=(0,a.YZ)(()=>n.e("8885").then(n.bind(n,4180))),e_=(0,a.YZ)(()=>n.e("7759").then(n.bind(n,5826))),eS=(0,a.YZ)(()=>n.e("3508").then(n.bind(n,2079))),eC=(0,a.YZ)(()=>n.e("9808").then(n.bind(n,9795))),eB=(0,a.YZ)(()=>n.e("1782").then(n.bind(n,8597))),ej=(0,a.YZ)(()=>n.e("130").then(n.bind(n,3017))),eL=(0,a.YZ)(()=>n.e("1236").then(n.bind(n,3519))),eY=(0,a.YZ)(()=>n.e("221").then(n.bind(n,2140))),eO=(0,a.YZ)(()=>n.e("7515").then(n.bind(n,3510))),eU=(0,a.YZ)(()=>n.e("9419").then(n.bind(n,3078))),eM=(0,a.YZ)(()=>n.e("1153").then(n.bind(n,3992))),eZ=(0,a.YZ)(()=>n.e("7721").then(n.bind(n,6144))),eF=(0,a.YZ)(()=>n.e("8632").then(n.bind(n,9099))),eH=(0,a.YZ)(()=>n.e("7753").then(n.bind(n,5184))),eJ=(0,a.YZ)(()=>n.e("9873").then(n.bind(n,6312))),eQ=(0,a.YZ)(()=>n.e("6930").then(n.bind(n,7513))),eD=(0,a.YZ)(()=>n.e("2755").then(n.bind(n,2190))),eW=(0,a.YZ)(()=>n.e("543").then(n.bind(n,898))),eG=(0,a.YZ)(()=>n.e("6811").then(n.bind(n,6454))),eV=(0,a.YZ)(()=>n.e("5608").then(n.bind(n,4091))),eK=(0,a.YZ)(()=>n.e("6466").then(n.bind(n,7049))),ez=[{path:"/12.x/cookbook/advanced/network-requests",element:i.createElement(r),filePath:"12.x/cookbook/advanced/network-requests.md",preload:async()=>(await r.preload(),n.e("1008").then(n.bind(n,3779))),lang:"en",version:"12.x"},{path:"/12.x/cookbook/basics/async-tests",element:i.createElement(o),filePath:"12.x/cookbook/basics/async-tests.md",preload:async()=>(await o.preload(),n.e("5816").then(n.bind(n,7483))),lang:"en",version:"12.x"},{path:"/12.x/cookbook/basics/custom-render",element:i.createElement(d),filePath:"12.x/cookbook/basics/custom-render.md",preload:async()=>(await d.preload(),n.e("8750").then(n.bind(n,9645))),lang:"en",version:"12.x"},{path:"/12.x/cookbook/",element:i.createElement(s),filePath:"12.x/cookbook/index.md",preload:async()=>(await s.preload(),n.e("8648").then(n.bind(n,9083))),lang:"en",version:"12.x"},{path:"/12.x/cookbook/state-management/jotai",element:i.createElement(c),filePath:"12.x/cookbook/state-management/jotai.md",preload:async()=>(await c.preload(),n.e("8397").then(n.bind(n,8220))),lang:"en",version:"12.x"},{path:"/12.x/docs/advanced/testing-env",element:i.createElement(h),filePath:"12.x/docs/advanced/testing-env.mdx",preload:async()=>(await h.preload(),n.e("7351").then(n.bind(n,6138))),lang:"en",version:"12.x"},{path:"/12.x/docs/advanced/understanding-act",element:i.createElement(l),filePath:"12.x/docs/advanced/understanding-act.mdx",preload:async()=>(await l.preload(),n.e("8810").then(n.bind(n,6193))),lang:"en",version:"12.x"},{path:"/12.x/docs/api",element:i.createElement(p),filePath:"12.x/docs/api.md",preload:async()=>(await p.preload(),n.e("1858").then(n.bind(n,3257))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/events/fire-event",element:i.createElement(x),filePath:"12.x/docs/api/events/fire-event.mdx",preload:async()=>(await x.preload(),n.e("4936").then(n.bind(n,4107))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/events/user-event",element:i.createElement(u),filePath:"12.x/docs/api/events/user-event.mdx",preload:async()=>(await u.preload(),n.e("5507").then(n.bind(n,3870))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/jest-matchers",element:i.createElement(m),filePath:"12.x/docs/api/jest-matchers.mdx",preload:async()=>(await m.preload(),n.e("6137").then(n.bind(n,4384))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/misc/accessibility",element:i.createElement(g),filePath:"12.x/docs/api/misc/accessibility.mdx",preload:async()=>(await g.preload(),n.e("1038").then(n.bind(n,6589))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/misc/async",element:i.createElement(v),filePath:"12.x/docs/api/misc/async.mdx",preload:async()=>(await v.preload(),n.e("8146").then(n.bind(n,2377))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/misc/config",element:i.createElement(y),filePath:"12.x/docs/api/misc/config.mdx",preload:async()=>(await y.preload(),n.e("6156").then(n.bind(n,3319))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/misc/other",element:i.createElement(f),filePath:"12.x/docs/api/misc/other.mdx",preload:async()=>(await f.preload(),n.e("1304").then(n.bind(n,9867))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/misc/render-hook",element:i.createElement(b),filePath:"12.x/docs/api/misc/render-hook.mdx",preload:async()=>(await b.preload(),n.e("9826").then(n.bind(n,3689))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/queries",element:i.createElement(I),filePath:"12.x/docs/api/queries.mdx",preload:async()=>(await I.preload(),n.e("4819").then(n.bind(n,862))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/render",element:i.createElement(w),filePath:"12.x/docs/api/render.mdx",preload:async()=>(await w.preload(),n.e("9377").then(n.bind(n,8888))),lang:"en",version:"12.x"},{path:"/12.x/docs/api/screen",element:i.createElement(k),filePath:"12.x/docs/api/screen.mdx",preload:async()=>(await k.preload(),n.e("9277").then(n.bind(n,940))),lang:"en",version:"12.x"},{path:"/12.x/docs/guides/community-resources",element:i.createElement(P),filePath:"12.x/docs/guides/community-resources.mdx",preload:async()=>(await P.preload(),n.e("631").then(n.bind(n,9098))),lang:"en",version:"12.x"},{path:"/12.x/docs/guides/faq",element:i.createElement(T),filePath:"12.x/docs/guides/faq.mdx",preload:async()=>(await T.preload(),n.e("9782").then(n.bind(n,6469))),lang:"en",version:"12.x"},{path:"/12.x/docs/guides/how-to-query",element:i.createElement(q),filePath:"12.x/docs/guides/how-to-query.mdx",preload:async()=>(await q.preload(),n.e("7623").then(n.bind(n,1082))),lang:"en",version:"12.x"},{path:"/12.x/docs/guides/troubleshooting",element:i.createElement(E),filePath:"12.x/docs/guides/troubleshooting.mdx",preload:async()=>(await E.preload(),n.e("836").then(n.bind(n,7103))),lang:"en",version:"12.x"},{path:"/12.x/docs/migration/jest-matchers",element:i.createElement(R),filePath:"12.x/docs/migration/jest-matchers.mdx",preload:async()=>(await R.preload(),n.e("4397").then(n.bind(n,1724))),lang:"en",version:"12.x"},{path:"/12.x/docs/migration/previous/v11",element:i.createElement(A),filePath:"12.x/docs/migration/previous/v11.mdx",preload:async()=>(await A.preload(),n.e("1607").then(n.bind(n,8810))),lang:"en",version:"12.x"},{path:"/12.x/docs/migration/previous/v2",element:i.createElement(N),filePath:"12.x/docs/migration/previous/v2.mdx",preload:async()=>(await N.preload(),n.e("8129").then(n.bind(n,7288))),lang:"en",version:"12.x"},{path:"/12.x/docs/migration/previous/v7",element:i.createElement(_),filePath:"12.x/docs/migration/previous/v7.mdx",preload:async()=>(await _.preload(),n.e("9914").then(n.bind(n,2209))),lang:"en",version:"12.x"},{path:"/12.x/docs/migration/previous/v9",element:i.createElement(S),filePath:"12.x/docs/migration/previous/v9.mdx",preload:async()=>(await S.preload(),n.e("8748").then(n.bind(n,3127))),lang:"en",version:"12.x"},{path:"/12.x/docs/migration/v12",element:i.createElement(C),filePath:"12.x/docs/migration/v12.mdx",preload:async()=>(await C.preload(),n.e("3990").then(n.bind(n,8261))),lang:"en",version:"12.x"},{path:"/12.x/docs/start/intro",element:i.createElement(B),filePath:"12.x/docs/start/intro.md",preload:async()=>(await B.preload(),n.e("4889").then(n.bind(n,2608))),lang:"en",version:"12.x"},{path:"/12.x/docs/start/quick-start",element:i.createElement(j),filePath:"12.x/docs/start/quick-start.mdx",preload:async()=>(await j.preload(),n.e("9273").then(n.bind(n,9712))),lang:"en",version:"12.x"},{path:"/12.x/",element:i.createElement(L),filePath:"12.x/index.md",preload:async()=>(await L.preload(),n.e("8358").then(n.bind(n,7861))),lang:"en",version:"12.x"},{path:"/cookbook/advanced/network-requests",element:i.createElement(Y),filePath:"13.x/cookbook/advanced/network-requests.md",preload:async()=>(await Y.preload(),n.e("9667").then(n.bind(n,6750))),lang:"en",version:"13.x"},{path:"/cookbook/basics/async-tests",element:i.createElement(O),filePath:"13.x/cookbook/basics/async-tests.md",preload:async()=>(await O.preload(),n.e("8617").then(n.bind(n,8672))),lang:"en",version:"13.x"},{path:"/cookbook/basics/custom-render",element:i.createElement(U),filePath:"13.x/cookbook/basics/custom-render.md",preload:async()=>(await U.preload(),n.e("3783").then(n.bind(n,7130))),lang:"en",version:"13.x"},{path:"/cookbook/",element:i.createElement(M),filePath:"13.x/cookbook/index.md",preload:async()=>(await M.preload(),n.e("8187").then(n.bind(n,6822))),lang:"en",version:"13.x"},{path:"/cookbook/state-management/jotai",element:i.createElement(Z),filePath:"13.x/cookbook/state-management/jotai.md",preload:async()=>(await Z.preload(),n.e("4800").then(n.bind(n,211))),lang:"en",version:"13.x"},{path:"/docs/advanced/testing-env",element:i.createElement(F),filePath:"13.x/docs/advanced/testing-env.mdx",preload:async()=>(await F.preload(),n.e("2864").then(n.bind(n,5667))),lang:"en",version:"13.x"},{path:"/docs/advanced/third-party-integration",element:i.createElement(H),filePath:"13.x/docs/advanced/third-party-integration.mdx",preload:async()=>(await H.preload(),n.e("5957").then(n.bind(n,9428))),lang:"en",version:"13.x"},{path:"/docs/advanced/understanding-act",element:i.createElement(J),filePath:"13.x/docs/advanced/understanding-act.mdx",preload:async()=>(await J.preload(),n.e("8293").then(n.bind(n,3476))),lang:"en",version:"13.x"},{path:"/docs/api",element:i.createElement(Q),filePath:"13.x/docs/api.md",preload:async()=>(await Q.preload(),n.e("7497").then(n.bind(n,2336))),lang:"en",version:"13.x"},{path:"/docs/api/events/fire-event",element:i.createElement(D),filePath:"13.x/docs/api/events/fire-event.mdx",preload:async()=>(await D.preload(),n.e("2721").then(n.bind(n,4536))),lang:"en",version:"13.x"},{path:"/docs/api/events/user-event",element:i.createElement(W),filePath:"13.x/docs/api/events/user-event.mdx",preload:async()=>(await W.preload(),n.e("7262").then(n.bind(n,3949))),lang:"en",version:"13.x"},{path:"/docs/api/jest-matchers",element:i.createElement(G),filePath:"13.x/docs/api/jest-matchers.mdx",preload:async()=>(await G.preload(),n.e("4152").then(n.bind(n,2731))),lang:"en",version:"13.x"},{path:"/docs/api/misc/accessibility",element:i.createElement(V),filePath:"13.x/docs/api/misc/accessibility.mdx",preload:async()=>(await V.preload(),n.e("8353").then(n.bind(n,2936))),lang:"en",version:"13.x"},{path:"/docs/api/misc/async",element:i.createElement(K),filePath:"13.x/docs/api/misc/async.mdx",preload:async()=>(await K.preload(),n.e("8481").then(n.bind(n,7608))),lang:"en",version:"13.x"},{path:"/docs/api/misc/config",element:i.createElement(z),filePath:"13.x/docs/api/misc/config.mdx",preload:async()=>(await z.preload(),n.e("8901").then(n.bind(n,2084))),lang:"en",version:"13.x"},{path:"/docs/api/misc/other",element:i.createElement(X),filePath:"13.x/docs/api/misc/other.mdx",preload:async()=>(await X.preload(),n.e("6047").then(n.bind(n,1794))),lang:"en",version:"13.x"},{path:"/docs/api/misc/render-hook",element:i.createElement($),filePath:"13.x/docs/api/misc/render-hook.mdx",preload:async()=>(await $.preload(),n.e("3453").then(n.bind(n,9004))),lang:"en",version:"13.x"},{path:"/docs/api/queries",element:i.createElement(ee),filePath:"13.x/docs/api/queries.mdx",preload:async()=>(await ee.preload(),n.e("9150").then(n.bind(n,8285))),lang:"en",version:"13.x"},{path:"/docs/api/render",element:i.createElement(et),filePath:"13.x/docs/api/render.mdx",preload:async()=>(await et.preload(),n.e("6958").then(n.bind(n,1389))),lang:"en",version:"13.x"},{path:"/docs/api/screen",element:i.createElement(en),filePath:"13.x/docs/api/screen.mdx",preload:async()=>(await en.preload(),n.e("8222").then(n.bind(n,4061))),lang:"en",version:"13.x"},{path:"/docs/guides/common-mistakes",element:i.createElement(ei),filePath:"13.x/docs/guides/common-mistakes.mdx",preload:async()=>(await ei.preload(),n.e("4460").then(n.bind(n,7991))),lang:"en",version:"13.x"},{path:"/docs/guides/community-resources",element:i.createElement(ea),filePath:"13.x/docs/guides/community-resources.mdx",preload:async()=>(await ea.preload(),n.e("328").then(n.bind(n,3083))),lang:"en",version:"13.x"},{path:"/docs/guides/faq",element:i.createElement(er),filePath:"13.x/docs/guides/faq.mdx",preload:async()=>(await er.preload(),n.e("4553").then(n.bind(n,6032))),lang:"en",version:"13.x"},{path:"/docs/guides/how-to-query",element:i.createElement(eo),filePath:"13.x/docs/guides/how-to-query.mdx",preload:async()=>(await eo.preload(),n.e("9950").then(n.bind(n,7341))),lang:"en",version:"13.x"},{path:"/docs/guides/llm-guidelines",element:i.createElement(ed),filePath:"13.x/docs/guides/llm-guidelines.mdx",preload:async()=>(await ed.preload(),n.e("3974").then(n.bind(n,3285))),lang:"en",version:"13.x"},{path:"/docs/guides/react-19",element:i.createElement(es),filePath:"13.x/docs/guides/react-19.mdx",preload:async()=>(await es.preload(),n.e("3527").then(n.bind(n,2266))),lang:"en",version:"13.x"},{path:"/docs/guides/troubleshooting",element:i.createElement(ec),filePath:"13.x/docs/guides/troubleshooting.mdx",preload:async()=>(await ec.preload(),n.e("4359").then(n.bind(n,4474))),lang:"en",version:"13.x"},{path:"/docs/migration/jest-matchers",element:i.createElement(eh),filePath:"13.x/docs/migration/jest-matchers.mdx",preload:async()=>(await eh.preload(),n.e("4756").then(n.bind(n,3055))),lang:"en",version:"13.x"},{path:"/docs/migration/previous/v11",element:i.createElement(el),filePath:"13.x/docs/migration/previous/v11.mdx",preload:async()=>(await el.preload(),n.e("2184").then(n.bind(n,2139))),lang:"en",version:"13.x"},{path:"/docs/migration/previous/v12",element:i.createElement(ep),filePath:"13.x/docs/migration/previous/v12.mdx",preload:async()=>(await ep.preload(),n.e("9637").then(n.bind(n,8900))),lang:"en",version:"13.x"},{path:"/docs/migration/previous/v2",element:i.createElement(ex),filePath:"13.x/docs/migration/previous/v2.mdx",preload:async()=>(await ex.preload(),n.e("9408").then(n.bind(n,4979))),lang:"en",version:"13.x"},{path:"/docs/migration/previous/v7",element:i.createElement(eu),filePath:"13.x/docs/migration/previous/v7.mdx",preload:async()=>(await eu.preload(),n.e("1359").then(n.bind(n,6050))),lang:"en",version:"13.x"},{path:"/docs/migration/previous/v9",element:i.createElement(em),filePath:"13.x/docs/migration/previous/v9.mdx",preload:async()=>(await em.preload(),n.e("6341").then(n.bind(n,660))),lang:"en",version:"13.x"},{path:"/docs/migration/v13",element:i.createElement(eg),filePath:"13.x/docs/migration/v13.mdx",preload:async()=>(await eg.preload(),n.e("5868").then(n.bind(n,8103))),lang:"en",version:"13.x"},{path:"/docs/start/intro",element:i.createElement(ev),filePath:"13.x/docs/start/intro.md",preload:async()=>(await ev.preload(),n.e("7146").then(n.bind(n,750))),lang:"en",version:"13.x"},{path:"/docs/start/quick-start",element:i.createElement(ey),filePath:"13.x/docs/start/quick-start.mdx",preload:async()=>(await ey.preload(),n.e("7240").then(n.bind(n,507))),lang:"en",version:"13.x"},{path:"/",element:i.createElement(ef),filePath:"13.x/index.md",preload:async()=>(await ef.preload(),n.e("7863").then(n.bind(n,3258))),lang:"en",version:"13.x"},{path:"/14.x/cookbook/advanced/network-requests",element:i.createElement(eb),filePath:"14.x/cookbook/advanced/network-requests.md",preload:async()=>(await eb.preload(),n.e("2222").then(n.bind(n,1725))),lang:"en",version:"14.x"},{path:"/14.x/cookbook/basics/async-events",element:i.createElement(eI),filePath:"14.x/cookbook/basics/async-events.md",preload:async()=>(await eI.preload(),n.e("7340").then(n.bind(n,1511))),lang:"en",version:"14.x"},{path:"/14.x/cookbook/basics/custom-render",element:i.createElement(ew),filePath:"14.x/cookbook/basics/custom-render.md",preload:async()=>(await ew.preload(),n.e("92").then(n.bind(n,6087))),lang:"en",version:"14.x"},{path:"/14.x/cookbook/",element:i.createElement(ek),filePath:"14.x/cookbook/index.md",preload:async()=>(await ek.preload(),n.e("7562").then(n.bind(n,3809))),lang:"en",version:"14.x"},{path:"/14.x/cookbook/state-management/jotai",element:i.createElement(eP),filePath:"14.x/cookbook/state-management/jotai.md",preload:async()=>(await eP.preload(),n.e("3107").then(n.bind(n,9038))),lang:"en",version:"14.x"},{path:"/14.x/docs/advanced/testing-env",element:i.createElement(eT),filePath:"14.x/docs/advanced/testing-env.mdx",preload:async()=>(await eT.preload(),n.e("5197").then(n.bind(n,2076))),lang:"en",version:"14.x"},{path:"/14.x/docs/advanced/third-party-integration",element:i.createElement(eq),filePath:"14.x/docs/advanced/third-party-integration.mdx",preload:async()=>(await eq.preload(),n.e("4064").then(n.bind(n,2912))),lang:"en",version:"14.x"},{path:"/14.x/docs/advanced/understanding-act",element:i.createElement(eE),filePath:"14.x/docs/advanced/understanding-act.mdx",preload:async()=>(await eE.preload(),n.e("7296").then(n.bind(n,163))),lang:"en",version:"14.x"},{path:"/14.x/docs/api",element:i.createElement(eR),filePath:"14.x/docs/api.md",preload:async()=>(await eR.preload(),n.e("2196").then(n.bind(n,5535))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/events/fire-event",element:i.createElement(eA),filePath:"14.x/docs/api/events/fire-event.mdx",preload:async()=>(await eA.preload(),n.e("594").then(n.bind(n,1961))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/events/user-event",element:i.createElement(eN),filePath:"14.x/docs/api/events/user-event.mdx",preload:async()=>(await eN.preload(),n.e("8885").then(n.bind(n,4180))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/jest-matchers",element:i.createElement(e_),filePath:"14.x/docs/api/jest-matchers.mdx",preload:async()=>(await e_.preload(),n.e("7759").then(n.bind(n,5826))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/misc/accessibility",element:i.createElement(eS),filePath:"14.x/docs/api/misc/accessibility.mdx",preload:async()=>(await eS.preload(),n.e("3508").then(n.bind(n,2079))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/misc/async",element:i.createElement(eC),filePath:"14.x/docs/api/misc/async.mdx",preload:async()=>(await eC.preload(),n.e("9808").then(n.bind(n,9795))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/misc/config",element:i.createElement(eB),filePath:"14.x/docs/api/misc/config.mdx",preload:async()=>(await eB.preload(),n.e("1782").then(n.bind(n,8597))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/misc/other",element:i.createElement(ej),filePath:"14.x/docs/api/misc/other.mdx",preload:async()=>(await ej.preload(),n.e("130").then(n.bind(n,3017))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/misc/render-hook",element:i.createElement(eL),filePath:"14.x/docs/api/misc/render-hook.mdx",preload:async()=>(await eL.preload(),n.e("1236").then(n.bind(n,3519))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/queries",element:i.createElement(eY),filePath:"14.x/docs/api/queries.mdx",preload:async()=>(await eY.preload(),n.e("221").then(n.bind(n,2140))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/render",element:i.createElement(eO),filePath:"14.x/docs/api/render.mdx",preload:async()=>(await eO.preload(),n.e("7515").then(n.bind(n,3510))),lang:"en",version:"14.x"},{path:"/14.x/docs/api/screen",element:i.createElement(eU),filePath:"14.x/docs/api/screen.mdx",preload:async()=>(await eU.preload(),n.e("9419").then(n.bind(n,3078))),lang:"en",version:"14.x"},{path:"/14.x/docs/guides/common-mistakes",element:i.createElement(eM),filePath:"14.x/docs/guides/common-mistakes.mdx",preload:async()=>(await eM.preload(),n.e("1153").then(n.bind(n,3992))),lang:"en",version:"14.x"},{path:"/14.x/docs/guides/community-resources",element:i.createElement(eZ),filePath:"14.x/docs/guides/community-resources.mdx",preload:async()=>(await eZ.preload(),n.e("7721").then(n.bind(n,6144))),lang:"en",version:"14.x"},{path:"/14.x/docs/guides/faq",element:i.createElement(eF),filePath:"14.x/docs/guides/faq.mdx",preload:async()=>(await eF.preload(),n.e("8632").then(n.bind(n,9099))),lang:"en",version:"14.x"},{path:"/14.x/docs/guides/how-to-query",element:i.createElement(eH),filePath:"14.x/docs/guides/how-to-query.mdx",preload:async()=>(await eH.preload(),n.e("7753").then(n.bind(n,5184))),lang:"en",version:"14.x"},{path:"/14.x/docs/guides/llm-guidelines",element:i.createElement(eJ),filePath:"14.x/docs/guides/llm-guidelines.mdx",preload:async()=>(await eJ.preload(),n.e("9873").then(n.bind(n,6312))),lang:"en",version:"14.x"},{path:"/14.x/docs/guides/troubleshooting",element:i.createElement(eQ),filePath:"14.x/docs/guides/troubleshooting.mdx",preload:async()=>(await eQ.preload(),n.e("6930").then(n.bind(n,7513))),lang:"en",version:"14.x"},{path:"/14.x/docs/start/intro",element:i.createElement(eD),filePath:"14.x/docs/start/intro.md",preload:async()=>(await eD.preload(),n.e("2755").then(n.bind(n,2190))),lang:"en",version:"14.x"},{path:"/14.x/docs/start/migration-v14",element:i.createElement(eW),filePath:"14.x/docs/start/migration-v14.mdx",preload:async()=>(await eW.preload(),n.e("543").then(n.bind(n,898))),lang:"en",version:"14.x"},{path:"/14.x/docs/start/quick-start",element:i.createElement(eG),filePath:"14.x/docs/start/quick-start.mdx",preload:async()=>(await eG.preload(),n.e("6811").then(n.bind(n,6454))),lang:"en",version:"14.x"},{path:"/14.x/",element:i.createElement(eV),filePath:"14.x/index.md",preload:async()=>(await eV.preload(),n.e("5608").then(n.bind(n,4091))),lang:"en",version:"14.x"},{path:"/404",element:i.createElement(eK),filePath:"404.mdx",preload:async()=>(await eK.preload(),n.e("6466").then(n.bind(n,7049))),lang:"en",version:"13.x"}]},6701(e,t,n){n.d(t,{A:()=>i});let i={base:"/react-native-testing-library/",title:"React Native Testing Library",description:"Helps you to write better tests with less effort.",icon:"/logo-light.png",route:{cleanUrls:!0},themeConfig:{enableContentAnimation:!0,enableScrollToTop:!0,outlineTitle:"Contents",footer:{message:"Copyright © 2026 Callstack Open Source"},socialLinks:[{icon:"github",mode:"link",content:"https://github.com/callstack/react-native-testing-library"}],nav:[{text:"Docs",link:"/docs/start/intro.html",activeMatch:"^/docs/"},{text:"Cookbook",link:"/cookbook/index.html",activeMatch:"^/cookbook/"},{text:"Examples",link:"https://github.com/callstack/react-native-testing-library/tree/main/examples"}],sidebar:{"/docs/":[{text:"Getting started",items:[{text:"Introduction",link:"/docs/start/intro.html"},{text:"Quick Start",link:"/docs/start/quick-start.html"}],collapsed:!1,collapsible:!0},{text:"API reference",items:[{text:"Render function",link:"/docs/api/render.html"},{text:"Screen object",link:"/docs/api/screen.html"},{text:"Queries",link:"/docs/api/queries.html"},{text:"Jest Matchers",link:"/docs/api/jest-matchers.html"},{text:"Triggering events",items:[{text:"Fire Event",link:"/docs/api/events/fire-event.html"},{text:"User Event",link:"/docs/api/events/user-event.html"}],collapsed:!1,collapsible:!0},{text:"Miscellaneous",items:[{text:"Accessibility",link:"/docs/api/misc/accessibility.html"},{text:"Async utilities",link:"/docs/api/misc/async.html"},{text:"Config",link:"/docs/api/misc/config.html"},{text:"Other",link:"/docs/api/misc/other.html"},{text:"Render Hook",link:"/docs/api/misc/render-hook.html"}],collapsed:!1,collapsible:!0}],collapsed:!1,collapsible:!0},{text:"Guides",items:[{text:"How to Query",link:"/docs/guides/how-to-query.html"},{text:"Common Mistakes",link:"/docs/guides/common-mistakes.html"},{text:"LLM Guidelines",link:"/docs/guides/llm-guidelines.html"},{text:"React 19",link:"/docs/guides/react-19.html"},{text:"Troubleshooting",link:"/docs/guides/troubleshooting.html"},{text:"FAQ",link:"/docs/guides/faq.html"},{text:"Community Resources",link:"/docs/guides/community-resources.html"}],collapsed:!1,collapsible:!0},{text:"Advanced Guides",items:[{text:"Testing Environment",link:"/docs/advanced/testing-env.html"},{text:"Third-party Integration",link:"/docs/advanced/third-party-integration.html"},{text:"Understanding Act",link:"/docs/advanced/understanding-act.html"}],collapsed:!1,collapsible:!0},{text:"Migration Guides",collapsed:!0,items:[{text:"v13 Migration",link:"/docs/migration/v13.html"},{text:"Jest Matchers",link:"/docs/migration/jest-matchers.html"},{text:"Previous versions",collapsed:!0,items:[{text:"v12",link:"/docs/migration/previous/v12.html"},{text:"v11",link:"/docs/migration/previous/v11.html"},{text:"v9",link:"/docs/migration/previous/v9.html"},{text:"v7",link:"/docs/migration/previous/v7.html"},{text:"v2",link:"/docs/migration/previous/v2.html"}],collapsible:!0}],collapsible:!0}],"/cookbook/":[{text:"Cookbook",link:"/cookbook/index.html"},{text:"Basic Recipes",items:[{text:"Async Tests",link:"/cookbook/basics/async-tests.html"},{text:"Custom Render",link:"/cookbook/basics/custom-render.html"}],collapsed:!1,collapsible:!0},{text:"Advanced Recipes",items:[{text:"Network Requests",link:"/cookbook/advanced/network-requests.html"}],collapsed:!1,collapsible:!0},{text:"State Management Recipes",items:[{text:"Jotai",link:"/cookbook/state-management/jotai.html"}],collapsed:!1,collapsible:!0}],"/12.x/docs/":[{text:"Getting started",items:[{text:"Introduction",link:"/12.x/docs/start/intro.html"},{text:"Quick Start",link:"/12.x/docs/start/quick-start.html"}],collapsed:!1,collapsible:!0},{text:"API reference",items:[{text:"Render function",link:"/12.x/docs/api/render.html"},{text:"Screen object",link:"/12.x/docs/api/screen.html"},{text:"Queries",link:"/12.x/docs/api/queries.html"},{text:"Jest Matchers",link:"/12.x/docs/api/jest-matchers.html"},{text:"Triggering events",items:[{text:"Fire Event",link:"/12.x/docs/api/events/fire-event.html"},{text:"User Event",link:"/12.x/docs/api/events/user-event.html"}],collapsed:!1,collapsible:!0},{text:"Miscellaneous",items:[{text:"Accessibility",link:"/12.x/docs/api/misc/accessibility.html"},{text:"Async utilities",link:"/12.x/docs/api/misc/async.html"},{text:"Config",link:"/12.x/docs/api/misc/config.html"},{text:"Other",link:"/12.x/docs/api/misc/other.html"},{text:"Render Hook",link:"/12.x/docs/api/misc/render-hook.html"}],collapsed:!1,collapsible:!0}],collapsed:!1,collapsible:!0},{text:"Guides",items:[{text:"How to Query",link:"/12.x/docs/guides/how-to-query.html"},{text:"Troubleshooting",link:"/12.x/docs/guides/troubleshooting.html"},{text:"FAQ",link:"/12.x/docs/guides/faq.html"},{text:"Community Resources",link:"/12.x/docs/guides/community-resources.html"}],collapsed:!1,collapsible:!0},{text:"Advanced Guides",items:[{text:"Testing Environment",link:"/12.x/docs/advanced/testing-env.html"},{text:"Understanding Act",link:"/12.x/docs/advanced/understanding-act.html"}],collapsed:!1,collapsible:!0},{text:"Migration Guides",collapsed:!0,items:[{text:"v12 Migration",link:"/12.x/docs/migration/v12.html"},{text:"Jest Matchers",link:"/12.x/docs/migration/jest-matchers.html"},{text:"Previous versions",collapsed:!0,items:[{text:"v11",link:"/12.x/docs/migration/previous/v11.html"},{text:"v9",link:"/12.x/docs/migration/previous/v9.html"},{text:"v7",link:"/12.x/docs/migration/previous/v7.html"},{text:"v2",link:"/12.x/docs/migration/previous/v2.html"}],collapsible:!0}],collapsible:!0}],"/12.x/cookbook/":[{text:"Cookbook",link:"/12.x/cookbook/index.html"},{text:"Basic Recipes",items:[{text:"Async Tests",link:"/12.x/cookbook/basics/async-tests.html"},{text:"Custom Render",link:"/12.x/cookbook/basics/custom-render.html"}],collapsed:!1,collapsible:!0},{text:"Advanced Recipes",items:[{text:"Network Requests",link:"/12.x/cookbook/advanced/network-requests.html"}],collapsed:!1,collapsible:!0},{text:"State Management Recipes",items:[{text:"Jotai",link:"/12.x/cookbook/state-management/jotai.html"}],collapsed:!1,collapsible:!0}],"/14.x/docs/":[{text:"Getting started",items:[{text:"Introduction",link:"/14.x/docs/start/intro.html"},{text:"Quick Start",link:"/14.x/docs/start/quick-start.html"},{text:"v14 Migration",link:"/14.x/docs/start/migration-v14.html"}],collapsed:!1,collapsible:!0},{text:"API reference",items:[{text:"Render function",link:"/14.x/docs/api/render.html"},{text:"Screen object",link:"/14.x/docs/api/screen.html"},{text:"Queries",link:"/14.x/docs/api/queries.html"},{text:"Jest Matchers",link:"/14.x/docs/api/jest-matchers.html"},{text:"Triggering events",items:[{text:"Fire Event",link:"/14.x/docs/api/events/fire-event.html"},{text:"User Event",link:"/14.x/docs/api/events/user-event.html"}],collapsed:!1,collapsible:!0},{text:"Miscellaneous",items:[{text:"Accessibility",link:"/14.x/docs/api/misc/accessibility.html"},{text:"Async utilities",link:"/14.x/docs/api/misc/async.html"},{text:"Config",link:"/14.x/docs/api/misc/config.html"},{text:"Other",link:"/14.x/docs/api/misc/other.html"},{text:"Render Hook",link:"/14.x/docs/api/misc/render-hook.html"}],collapsed:!1,collapsible:!0}],collapsed:!1,collapsible:!0},{text:"Guides",items:[{text:"How to Query",link:"/14.x/docs/guides/how-to-query.html"},{text:"Common Mistakes",link:"/14.x/docs/guides/common-mistakes.html"},{text:"LLM Guidelines",link:"/14.x/docs/guides/llm-guidelines.html"},{text:"Troubleshooting",link:"/14.x/docs/guides/troubleshooting.html"},{text:"FAQ",link:"/14.x/docs/guides/faq.html"},{text:"Community Resources",link:"/14.x/docs/guides/community-resources.html"}],collapsed:!1,collapsible:!0},{text:"Advanced Guides",items:[{text:"Testing Environment",link:"/14.x/docs/advanced/testing-env.html"},{text:"Third-party Integration",link:"/14.x/docs/advanced/third-party-integration.html"},{text:"Understanding Act",link:"/14.x/docs/advanced/understanding-act.html"}],collapsed:!1,collapsible:!0}],"/14.x/cookbook/":[{text:"Cookbook",link:"/14.x/cookbook/index.html"},{text:"Basic Recipes",items:[{text:"Async Events",link:"/14.x/cookbook/basics/async-events.html"},{text:"Custom Render",link:"/14.x/cookbook/basics/custom-render.html"}],collapsed:!1,collapsible:!0},{text:"Advanced Recipes",items:[{text:"Network Requests",link:"/14.x/cookbook/advanced/network-requests.html"}],collapsed:!1,collapsible:!0},{text:"State Management Recipes",items:[{text:"Jotai",link:"/14.x/cookbook/state-management/jotai.html"}],collapsed:!1,collapsible:!0}]}},lang:"en",locales:[],logo:{light:"/img/logo-light.svg",dark:"/img/logo-dark.svg"},logoText:"",logoHref:"",multiVersion:{default:"13.x",versions:["12.x","13.x","14.x"]},search:{versioned:!0},markdown:{showLineNumbers:!1,defaultWrapCode:!1,shiki:{}}}},7425(e,t,n){n.d(t,{Ab:()=>r.Ab,G5:()=>r.G5,N_:()=>r.N_,PE:()=>c,Pq:()=>r.Pq,RP:()=>r.RP,ZZ:()=>r.ZZ,bL:()=>r.bL,nl:()=>r.nl});var i=n(4848),a=n(7099),r=n(4424);let o=()=>(0,i.jsx)("div",{className:"pre-release-banner",children:(0,i.jsxs)("span",{children:["You are viewing documentation for ",(0,i.jsx)("strong",{children:"v14 RC"}),"."]})}),d=e=>{let{version:t}=e;return(0,i.jsxs)("div",{className:"old-version-banner",children:[(0,i.jsxs)("span",{children:["You're viewing the documentation for ",(0,i.jsx)("strong",{children:t}),". Current latest version is"," ",(0,i.jsx)("strong",{children:"13.x"}),"."]}),(0,i.jsxs)(r.N_,{href:"/react-native-testing-library/docs/start/intro",className:"old-version-banner-link",children:["View latest version ",(0,i.jsx)("strong",{children:"here"}),"."]})]})},s=()=>{let{pathname:e}=(0,a.zy)();return e.includes("/14.x/")?(0,i.jsx)(o,{}):e.includes("/12.x/")?(0,i.jsx)(d,{version:"12.x"}):null},c=()=>(0,i.jsx)(r.PE,{beforeNav:(0,i.jsx)(s,{})})}},s={};function c(e){var t=s[e];if(void 0!==t)return t.exports;var n=s[e]={exports:{}};return d[e].call(n.exports,n,n.exports,c),n.exports}c.m=d,c.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return c.d(t,{a:t}),t},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,c.t=function(n,i){if(1&i&&(n=this(n)),8&i||"object"==typeof n&&n&&(4&i&&n.__esModule||16&i&&"function"==typeof n.then))return n;var a=Object.create(null);c.r(a);var r={};e=e||[null,t({}),t([]),t(t)];for(var o=2&i&&n;("object"==typeof o||"function"==typeof o)&&!~e.indexOf(o);o=t(o))Object.getOwnPropertyNames(o).forEach(e=>{r[e]=()=>n[e]});return r.default=()=>n,c.d(a,r),a},c.d=(e,t)=>{for(var n in t)c.o(t,n)&&!c.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},c.f={},c.e=e=>Promise.all(Object.keys(c.f).reduce((t,n)=>(c.f[n](e,t),t),[])),c.u=e=>"static/js/async/"+e+"."+({1008:"b1f0dda175",1038:"eb6a84e7c4",1153:"27973036d7",1236:"a2f6a778ae",130:"ad4b731a31",1304:"851d5f63f0",1359:"e7cd54103a",1607:"d89d662a1e",1782:"39730e1b26",1858:"9cacb9f18a",2184:"e84c7edf97",2196:"b85f1e33c6",221:"8844b669bd",2222:"e4219197a5",2721:"d7340edd68",2755:"e189cf0d84",2864:"620134a1f9",3107:"2fe9eca60f",328:"342b028aa7",3435:"3658110b0b",3453:"58705d67d5",3508:"ec869e079e",3527:"735015dc16",3783:"96e811e090",3974:"5afbd7ac76",3990:"33356aa775",4064:"51bb89469f",4152:"0f4f486f83",4359:"4ce3992c8f",4397:"63c8110b9e",4460:"a8103b0bae",4553:"252778f9e6",4756:"ec1ea1489f",4800:"5d5431129d",4819:"fd5144df7d",4889:"73af98e385",4936:"e8c067c941",5197:"b12b147b48",543:"5216745632",5507:"7697238262",5608:"9745905e0c",5816:"f41e3e5e16",5868:"d20715eda8",594:"89ce3c8362",5957:"54d54b0d67",6047:"c368b58ff2",6137:"4f8bcdd711",6156:"36f094c15a",631:"5943a4bdf3",6341:"e5811d8661",6466:"161bfed80d",6811:"0c9214f3ea",6930:"570ea35492",6958:"d6f25cfe87",7146:"96cf008c15",7240:"aa6941637a",7262:"891f23ef0b",7296:"e9154a3c13",7340:"c8b1cc6572",7351:"5ac093b30d",7497:"6df9901b3b",7515:"867e15b578",7562:"0746b461e5",7623:"31e696a01f",7721:"aafd3d35b1",7753:"9825f7bd57",7759:"dea7c10e5a",7863:"25db6455c2",8129:"1520c4f94a",8146:"4f162de74c",8187:"f3a75de1cb",8222:"2c5ffb0fc0",8293:"1b919addf6",8353:"5bbb73cd64",8358:"adc771bfb4",836:"8b5f5c552b",8397:"faa3635b29",8481:"dd9a311183",8617:"fa2aa60b4d",8632:"5efd81696e",8648:"8b66180249",8748:"309406a692",8750:"3a76bcc032",8810:"8f39c110a3",8885:"d76583d43d",8901:"ca0d5e9ff2",9150:"ffe0823137",92:"5cb099690f",9273:"66447e6e6c",9277:"1f140afe65",9377:"c7a2de4a08",9408:"a5e068033f",9419:"8f891425ca",9637:"4ee3fa727a",9667:"094d339b43",9782:"4f0472abe1",9808:"f8a777a222",9826:"3cfceae583",9873:"64bf349afa",9914:"08c1c2547c",9950:"643c38eb89"})[e]+".js",c.miniCssF=e=>""+e+".css",c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n={},c.l=function(e,t,i,a){if(n[e])return void n[e].push(t);if(void 0!==i)for(var r,o,d=document.getElementsByTagName("script"),s=0;s{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i=[],c.O=(e,t,n,a)=>{if(t){a=a||0;for(var r=i.length;r>0&&i[r-1][2]>a;r--)i[r]=i[r-1];i[r]=[t,n,a];return}for(var o=1/0,r=0;r=a)&&Object.keys(c.O).every(e=>c.O[e](t[s]))?t.splice(s--,1):(d=!1,an=a[e]=[t,i]);t.push(n[2]=i);var r=c.p+c.u(e),o=Error();c.l(r,function(t){if(c.o(a,e)&&(0!==(n=a[e])&&(a[e]=void 0),n)){var i=t&&("load"===t.type?"missing":t.type),r=t&&t.target&&t.target.src;o.message="Loading chunk "+e+" failed.\n("+i+": "+r+")",o.name="ChunkLoadError",o.type=i,o.request=r,n[1](o)}},"chunk-"+e,e)}},c.O.j=e=>0===a[e],r=(e,t)=>{var n,i,[r,o,d]=t,s=0;if(r.some(e=>0!==a[e])){for(n in o)c.o(o,n)&&(c.m[n]=o[n]);if(d)var h=d(c)}for(e&&e(t);sc(2531)),c.O(void 0,["4014","9783","9535","2482"],()=>c(5344)),c.O(void 0,["4014","9783","9535","2482"],()=>c(7425));var h=c.O(void 0,["4014","9783","9535","2482"],()=>c(2581));h=c.O(h)})(); \ No newline at end of file diff --git a/static/search_index.12_x.en.69408bab.json b/static/search_index.12_x.en.69408bab.json deleted file mode 100644 index c8b85c9c..00000000 --- a/static/search_index.12_x.en.69408bab.json +++ /dev/null @@ -1 +0,0 @@ -[{"title":"Network Requests","content":"Introduction\n\nMocking network requests is an essential part of testing React Native applications. By mocking\nnetwork\nrequests, you can control the data that is returned from the server and test how your application\nbehaves in different scenarios, such as when the request is successful or when it fails.\n\nIn this guide, we will show you how to mock network requests and guard your test suits from unwanted\nand unmocked/unhandled network requests\n\n:::info\nTo simulate a real-world scenario, we will use the Random User Generator API that provides random user data.\n:::\n\nPhonebook Example\n\nLet's assume we have a simple phonebook application that\nuses fetch for fetching Data from a server.\nIn our case, we have a list of contacts and favorites that we want to display in our application.\n\nThis is how the root of the application looks like:\n\nexport default () => {\n const [usersData, setUsersData] = useState([]);\n const [favoritesData, setFavoritesData] = useState([]);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n const _getAllContacts = async () => {\n const _data = await getAllContacts();\n setUsersData(_data);\n };\n const _getAllFavorites = async () => {\n const _data = await getAllFavorites();\n setFavoritesData(_data);\n };\n\n const run = async () => {\n try {\n await Promise.all([_getAllContacts(), _getAllFavorites()]);\n } catch (e) {\n const message = isErrorWithMessage(e) ? e.message : 'Something went wrong';\n setError(message);\n }\n };\n\n void run();\n }, []);\n\n if (error) {\n return An error occurred: {error};\n }\n\n return (\n <>\n \n \n \n );\n};\n\nWe fetch the contacts from the server using the getAllFavorites function that utilizes fetch.\n\nexport default async (): Promise => {\n const res = await fetch('https://randomuser.me/api/?results=25');\n if (!res.ok) {\n throw new Error(`Error fetching contacts`);\n }\n const json = await res.json();\n return json.results;\n};\n\nWe have similar function for fetching the favorites, but this time limiting the results to 10.\n\nexport default async (): Promise => {\n const res = await fetch('https://randomuser.me/api/?results=10');\n if (!res.ok) {\n throw new Error(`Error fetching favorites`);\n }\n const json = await res.json();\n return json.results;\n};\n\nOur FavoritesList component is a simple component that displays the list of favorite contacts and\ntheir avatars horizontally.\n\nexport default ({users}: { users: User[] }) => {\n const renderItem: ListRenderItem = useCallback(({item: {picture}}) => {\n return (\n \n \n \n );\n }, []);\n\n if (users.length === 0) return (\n \n Figuring out your favorites...\n \n );\n\n return (\n \n ⭐My Favorites\n \n horizontal\n showsHorizontalScrollIndicator={false}\n data={users}\n renderItem={renderItem}\n keyExtractor={(item, index) => `${index}-${item.id.value}`}\n />\n \n );\n};\n\n// Looking for styles?\n// Check examples/cookbook/app/advanced/components/FavoritesList.tsx\nconst styles =\n...\n\nOur ContactsList component is similar to the FavoritesList component, but it displays the list\nof\nall contacts vertically.\n\nexport default ({ users }: { users: User[] }) => {\n const renderItem: ListRenderItem = useCallback(\n ({ item: { name, email, picture, cell }, index }) => {\n const { title, first, last } = name;\n const backgroundColor = index % 2 === 0 ? '#f9f9f9' : '#fff';\n return (\n \n \n \n \n Name: {title} {first} {last}\n \n Email: {email}\n Mobile: {cell}\n \n \n );\n },\n [],\n );\n\n if (users.length === 0) return ;\n\n return (\n \n \n data={users}\n renderItem={renderItem}\n keyExtractor={(item, index) => `${index}-${item.id.value}`}\n />\n \n );\n};\n\n// Looking for styles or FullScreenLoader component?\n// Check examples/cookbook/app/advanced/components/ContactsList.tsx\nconst FullScreenLoader = () => ...\nconst styles = ...\n\nStart testing with a simple test\n\nIn our initial test we would like to test if the PhoneBook component renders the FavoritesList\nand ContactsList components correctly.\nWe will need to mock the network requests and their corresponding responses to ensure that the component behaves as\nexpected. To mock the network requests we will use MSW (Mock Service Worker).\n\n:::note\nWe recommend using the Mock Service Worker (MSW) library to declaratively mock API communication in your tests instead of stubbing fetch, or relying on third-party adapters.\n:::\n\n:::info\nYou can install MSW by running npm install msw --save-dev or yarn add msw --dev.\nMore info regarding installation can be found in MSW's getting started guide.\n\nPlease make sure you're also aware of MSW's setup guide.\nPlease be minded that the MSW's setup guide is potentially incomplete and might contain discrepancies/missing pieces.\n:::\n\n// Define request handlers and response resolvers for random user API.\n// By default, we always return the happy path response.\nconst handlers = [\n http.get('https://randomuser.me/api/*', () => {\n return HttpResponse.json(DATA);\n }),\n];\n\n// Setup a request interception server with the given request handlers.\nconst server = setupServer(...handlers);\n\n// Enable API mocking via Mock Service Worker (MSW)\nbeforeAll(() => server.listen());\n// Reset any runtime request handlers we may add during the tests\nafterEach(() => server.resetHandlers());\n// Disable API mocking after the tests are done\nafterAll(() => server.close());\n\ndescribe('PhoneBook', () => {\n it('fetches all contacts and favorites successfully and renders lists in sections correctly', async () => {\n render();\n\n await waitForElementToBeRemoved(() => screen.getByText(/users data not quite there yet/i));\n expect(await screen.findByText('Name: Mrs Ida Kristensen')).toBeOnTheScreen();\n expect(await screen.findByText('Email: ida.kristensen@example.com')).toBeOnTheScreen();\n expect(await screen.findAllByText(/name/i)).toHaveLength(3);\n expect(await screen.findByText(/my favorites/i)).toBeOnTheScreen();\n expect(await screen.findAllByLabelText('favorite-contact-avatar')).toHaveLength(3);\n });\n});\n\nconst DATA: { results: User[] } = {\n results: [\n {\n name: {\n title: 'Mrs',\n first: 'Ida',\n last: 'Kristensen',\n },\n email: 'ida.kristensen@example.com',\n id: {\n name: 'CPR',\n value: '250562-5730',\n },\n picture: {\n large: 'https://randomuser.me/api/portraits/women/26.jpg',\n medium: 'https://randomuser.me/api/portraits/med/women/26.jpg',\n thumbnail: 'https://randomuser.me/api/portraits/thumb/women/26.jpg',\n },\n cell: '123-4567-890',\n },\n // For brevity, we have omitted the rest of the users, you can still find them in\n // examples/cookbook/app/network-requests/__tests__/test-utils.ts\n ...\n ],\n};\n\n:::info\nMore info regarding how to describe the network using request handlers, intercepting a request and handling its response can be found in the MSW's documentation.\n:::\n\nTesting error handling\n\nAs we are dealing with network requests, and things can go wrong, we should also cover the case when\nthe API request fails. In this case, we would like to test how our application behaves when the API request fails.\n\n:::info\nThe nature of the network can be highly dynamic, which makes it challenging to describe it completely in a fixed list of request handlers.\nMSW provides us the means to override any particular network behavior using the designated .use() API.\nMore info can be found in MSW's Network behavior overrides documentation\n:::\n\n...\n\nconst mockServerFailureForGetAllContacts = () => {\n server.use(\n http.get('https://randomuser.me/api/', ({ request }) => {\n // Construct a URL instance out of the intercepted request.\n const url = new URL(request.url);\n // Read the \"results\" URL query parameter using the \"URLSearchParams\" API.\n const resultsLength = url.searchParams.get('results');\n // Simulate a server error for the get all contacts request.\n // We check if the \"results\" query parameter is set to \"25\"\n // to know it's the correct request to mock, in our case get all contacts.\n if (resultsLength === '25') {\n return new HttpResponse(null, { status: 500 });\n }\n // Return the default response for all other requests that match URL and verb. (in our case get favorites)\n return HttpResponse.json(DATA);\n }),\n );\n};\n\ndescribe('PhoneBook', () => {\n...\n it('fails to fetch all contacts and renders error message', async () => {\n mockServerFailureForGetAllContacts();\n render();\n\n await waitForElementToBeRemoved(() => screen.getByText(/users data not quite there yet/i));\n expect(\n await screen.findByText(/an error occurred: error fetching contacts/i),\n ).toBeOnTheScreen();\n });\n});\n\nGlobal guarding against unwanted API requests\n\nAs mistakes may happen, we might forget to mock a network request in one of our tests in the future.\nTo prevent us from happening, and alert when a certain network request is left unhandled, you may choose to\nmove MSW's server management from PhoneBook.test.tsx to Jest's setup file via setupFilesAfterEnv.\n\n// Enable API mocking via Mock Service Worker (MSW)\nbeforeAll(() => server.listen());\n// Reset any runtime request handlers we may add during the tests\nafterEach(() => server.resetHandlers());\n// Disable API mocking after the tests are done\nafterAll(() => server.close());\n\n// ... rest of your setup file\n\nThis setup will ensure you have the MSW server running before any test suite starts and stops it after all tests are done.\nWhich will result in a warning in the console if you forget to mock an API request in your test suite.\n\n[MSW] Warning: intercepted a request without a matching request handler:\n • GET https://randomuser.me/api/?results=25?results=25\n\nConclusion\n\nTesting a component that makes network requests in combination with MSW takes some initial preparation to configure and describe the overridden networks.\nWe can achieve that by using MSW's request handlers and intercepting APIs.\n\nOnce up and running we gain full grip over the network requests, their responses, statuses.\nDoing so is crucial to be able to test how our application behaves in different\nscenarios, such as when the request is successful or when it fails.\n\nWhen global configuration is in place, MSW's will also warn us when an unhandled network requests has occurred throughout a test suite.\n\nFurther Reading and Alternatives\n\nExplore more advanced scenarios for mocking network requests with MSW:\n\nMSW's Basics - Intercepting requests and/or Mocking responses\n\nMSW's Network behavior - how to describe REST and/or GraphQL APIs","routePath":"/12.x/cookbook/advanced/network-requests","lang":"en","toc":[{"id":"introduction","text":"Introduction","depth":2,"charIndex":0},{"id":"phonebook-example","text":"Phonebook Example","depth":2,"charIndex":569},{"id":"start-testing-with-a-simple-test","text":"Start testing with a simple test","depth":2,"charIndex":4791},{"id":"testing-error-handling","text":"Testing error handling","depth":2,"charIndex":7885},{"id":"global-guarding-against-unwanted-api-requests","text":"Global guarding against unwanted API requests","depth":2,"charIndex":9718},{"id":"conclusion","text":"Conclusion","depth":2,"charIndex":10736},{"id":"further-reading-and-alternatives","text":"Further Reading and Alternatives","depth":2,"charIndex":11356}],"frontmatter":{},"version":"12.x"},{"title":"Async tests","content":"Summary\n\nTypically, you would write synchronous tests, as they are simple and get the work done. However, there are cases when using asynchronous (async) tests might be necessary or beneficial. The two most common cases are:\n\nTesting Code with asynchronous operations: When your code relies on asynchronous operations, such as network calls or database queries, async tests are essential. Even though you should mock these network calls, the mock should act similarly to the actual behavior and hence by async.\n\nUserEvent API: Using the User Event API in your tests creates more realistic event handling. These interactions introduce delays (even though these are typically event-loop ticks with 0 ms delays), requiring async tests to handle the timing correctly.\n\nUsing async tests when needed ensures your tests are reliable and simulate real-world conditions accurately.\n\nExample\n\nConsider a basic asynchronous test for a user signing in with correct credentials:\n\ntest('User can sign in with correct credentials', async () => {\n // Typical test setup\n const user = userEvent.setup();\n render();\n\n // No need to use async here, components are already rendered\n expect(screen.getByRole('header', { name: 'Sign in to Hello World App!' })).toBeOnTheScreen();\n\n // Using await as User Event requires it\n await user.type(screen.getByLabelText('Username'), 'admin');\n await user.type(screen.getByLabelText('Password'), 'admin1');\n await user.press(screen.getByRole('button', { name: 'Sign In' }));\n\n // Using await as sign in operation is asynchronous\n expect(await screen.findByRole('header', { name: 'Welcome admin!' })).toBeOnTheScreen();\n\n // Follow-up assertions do not need to be async, as we already waited for sign in operation to complete\n expect(\n screen.queryByRole('header', { name: 'Sign in to Hello World App' })\n ).not.toBeOnTheScreen();\n expect(screen.queryByLabelText('Username')).not.toBeOnTheScreen();\n expect(screen.queryByLabelText('Password')).not.toBeOnTheScreen();\n});\n\nAsync utilities\n\nThere are several asynchronous utilities you might use in your tests.\n\nfindBy* queries\n\nThe most common are the findBy* queries. These are useful when waiting for a matching element to appear. They can be understood as a getBy* queries used in conjunction with a waitFor function.\n\nThey accept the same predicates as getBy* queries like findByRole, findByTest, etc. They also have a multiple elements variant called findAllBy*.\n\nfunction findByRole: (\n role: TextMatch,\n queryOptions?: {\n // Query specific options\n }\n waitForOptions?: {\n timeout?: number;\n interval?: number;\n // ..\n }\n): Promise;\n\nEach query has a default timeout value of 1000 ms and a default interval of 50 ms. Custom timeout and check intervals can be specified if needed, as shown below:\n\nExample\n\nconst button = await screen.findByRole('button'), { name: 'Start' }, { timeout: 1000, interval: 50 });\n\nAlternatively, a default global timeout value can be set using the configure function:\n\nconfigure({ asyncUtilTimeout: timeout });\n\nwaitFor function\n\nThe waitFor function is another option, serving as a lower-level utility in more advanced cases.\n\nfunction waitFor(\n expectation: () => T,\n options?: {\n timeout: number;\n interval: number;\n }\n): Promise;\n\nIt accepts an expectation to be validated and repeats the check every defined interval until it no longer throws an error. Similarly to findBy* queries they accept timeout and interval options and have the same default values of 1000ms for timeout, and a checking interval of 50 ms.\n\nExample\n\nawait waitFor(() => expect(mockAPI).toHaveBeenCalledTimes(1));\n\nIf you want to use it with getBy* queries, use the findBy* queries instead, as they essentially do the same, but offer better developer experience.\n\nwaitForElementToBeRemoved function\n\nA specialized function, waitForElementToBeRemoved, is used to verify that a matching element was present but has since been removed.\n\nfunction waitForElementToBeRemoved(\n expectation: () => T,\n options?: {\n timeout: number;\n interval: number;\n }\n): Promise {}\n\nThis function is, in a way, the negation of waitFor 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 timeout and interval parameters as findBy* queries and waitFor.\n\nExample\n\nawait waitForElementToBeRemoved(() => getByText('Hello World'));\n\nFake Timers\n\nAsynchronous tests can take long to execute due to the delays introduced by asynchronous operations. To mitigate this, fake timers can be used. These are particularly useful when delays are mere waits, such as the 130 milliseconds wait introduced by the UserEvent press() event due to React Native runtime behavior or simulated 1000 wait in a API call mock. Fake timers allow for precise fast-forwarding through these wait periods.\n\nHere are the basics of using Jest fake timers:\n\nEnable fake timers with: jest.useFakeTimers()\n\nDisable fake timers with: jest.useRealTimers()\n\nAdvance fake timers forward with: jest.advanceTimersByTime(interval)\n\nRun all timers to completion with: jest.runAllTimers()\n\nRun currently pending timers to completion with: jest.runOnlyPendingTimers()\n\nBe cautious when running all timers to completion as it might create an infinite loop if these timers schedule follow-up timers. In such cases, it's safer to use jest.runOnlyPendingTimers() to avoid ending up in an infinite loop of scheduled tasks.\n\nYou can use both built-in Jest fake timers, as well as Sinon.JS fake timers.\n\nNote: you do not need to advance timers by hand when using User Event API, as it's automatically.","routePath":"/12.x/cookbook/basics/async-tests","lang":"en","toc":[{"id":"summary","text":"Summary","depth":2,"charIndex":0},{"id":"example","text":"Example","depth":3,"charIndex":875},{"id":"async-utilities","text":"Async utilities","depth":2,"charIndex":2017},{"id":"findby-queries","text":"`findBy*` queries","depth":3,"charIndex":2105},{"id":"example-1","text":"Example","depth":4,"charIndex":2833},{"id":"waitfor-function","text":"`waitFor` function","depth":3,"charIndex":3077},{"id":"example-2","text":"Example","depth":4,"charIndex":3599},{"id":"waitforelementtoberemoved-function","text":"`waitForElementToBeRemoved` function","depth":3,"charIndex":3821},{"id":"example-3","text":"Example","depth":4,"charIndex":4413},{"id":"fake-timers","text":"Fake Timers","depth":2,"charIndex":4488}],"frontmatter":{},"version":"12.x"},{"title":"Custom `render` function","content":"Summary\n\nRNTL exposes the render function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests.\n\nExample\n\n// ...\n\ninterface RenderWithProvidersProps {\n user?: User | null;\n theme?: Theme;\n}\n\nexport function renderWithProviders(\n ui: React.ReactElement,\n options?: RenderWithProvidersProps\n) {\n return render(\n \n {ui}\n \n );\n}\n\n// ...\n\ntest('renders WelcomeScreen with user', () => {\n renderWithProviders(, { user: { name: 'Jar-Jar' } });\n expect(screen.getByText(/hello Jar-Jar/i)).toBeOnTheScreen();\n});\n\ntest('renders WelcomeScreen without user', () => {\n renderWithProviders(, { user: null });\n expect(screen.getByText(/hello stranger/i)).toBeOnTheScreen();\n});\n\nExample full source code.\n\nMore info\n\nAdditional params\n\nA custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management.\n\ntest('renders SomeScreen for logged in user', () => {\n renderScreen(, { state: loggedInState });\n // ...\n});\n\nMultiple functions\n\nDepending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens.\n\nfunction renderNavigator(ui, options);\nfunction renderScreen(ui, options);\n\nAsync function\n\nMake it async if you want to put some async setup in your custom render function.\n\ntest('renders SomeScreen', async () => {\n await renderWithAsync();\n // ...\n});","routePath":"/12.x/cookbook/basics/custom-render","lang":"en","toc":[{"id":"summary","text":"Summary","depth":3,"charIndex":0},{"id":"example","text":"Example","depth":3,"charIndex":291},{"id":"more-info","text":"More info","depth":3,"charIndex":1107},{"id":"additional-params","text":"Additional params","depth":4,"charIndex":1118},{"id":"multiple-functions","text":"Multiple functions","depth":4,"charIndex":1440},{"id":"async-function","text":"Async function","depth":4,"charIndex":1729}],"frontmatter":{},"version":"12.x","description":"Summary RNTL exposes the render function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests. Example Example full source code. More info Additional params A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management. Multiple functions Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens. Async function Make it async if you want to put some async setup in your custom render function."},{"title":"Introduction","content":"Welcome to the React Native Testing Library (RNTL) Cookbook!\nThis app is your go-to resource for learning how to effectively test React Native applications.\nIt provides a collection of best practices, ready-made recipes, and tips & tricks to\nsimplify and improve your testing workflow. Whether you’re a beginner just getting started or a\nseasoned developer looking to sharpen your\nskills, the Cookbook has something for everyone.\n\nWhat's Inside the Cookbook?\n\nThe Cookbook is currently organized into three main chapters:\n\nBasic Recipes: A great starting point, covering essential testing scenarios such as async\noperations and custom render functions.\n\nAdvanced Recipes: More complex scenarios like network requests and in the future, navigation\ntesting and more.\n\nState Management Recipes: Best practices for testing state management libraries\n\nEach recipe includes a clear explanation along with a corresponding code example to help you get\nhands-on with testing. Checkout\nthe Cookbook App to see the\nrecipes in action.\n\nWhat's Next?\n\nJoin the conversation\non GitHub here to discuss\nideas, ask questions, or provide feedback.","routePath":"/12.x/cookbook/","lang":"en","toc":[{"id":"whats-inside-the-cookbook","text":"What's Inside the Cookbook?","depth":2,"charIndex":431},{"id":"whats-next","text":"What's Next?","depth":2,"charIndex":1024}],"frontmatter":{},"version":"12.x","description":"Welcome to the React Native Testing Library (RNTL) Cookbook! This app is your go-to resource for learning how to effectively test React Native applications. It provides a collection of best practices, ready-made recipes, and tips & tricks to simplify and improve your testing workflow. Whether you’re a beginner just getting started or a seasoned developer looking to sharpen your skills, the Cookbook has something for everyone."},{"title":"Jotai","content":"Introduction\n\nJotai is a global state management library for React that uses an atomic approach to optimize\nrenders and solve issues like extra re-renders and the need for memoization. It scales from simple\nstate management to complex enterprise applications, offering utilities and extensions to enhance\nthe developer experience.\n\nTask List Example\n\nLet's assume we have a simple task list component that uses Jotai for state management. The\ncomponent has a list of tasks, a text input for typing new task name and a button to add a new task to the list.\n\nexport function TaskList() {\n const [tasks, setTasks] = useAtom(tasksAtom);\n const [newTaskTitle, setNewTaskTitle] = useAtom(newTaskTitleAtom);\n\n const handleAddTask = () => {\n setTasks((tasks) => [\n ...tasks,\n {\n id: nanoid(),\n title: newTaskTitle,\n },\n ]);\n setNewTaskTitle('');\n };\n\n return (\n \n {tasks.map((task) => (\n \n {task.title}\n \n ))}\n\n {!tasks.length ? No tasks, start by adding one... : null}\n\n setNewTaskTitle(text)}\n />\n\n \n Add Task\n \n \n );\n}\n\nStarting with a Simple Test\n\nWe can test our TaskList component using React Native Testing Library's (RNTL) regular render\nfunction. Although it is sufficient to test the empty state of the TaskList component, it is not\nenough to test the component with initial tasks present in the list.\n\njest.useFakeTimers();\n\ntest('renders an empty task list', () => {\n render();\n expect(screen.getByText(/no tasks, start by adding one/i)).toBeOnTheScreen();\n});\n\nCustom Render Function to populate Jotai Atoms with Initial Values\n\nTo test the TaskList component with initial tasks, we need to be able to populate the tasksAtom with\ninitial values. We can create a custom render function that uses Jotai's useHydrateAtoms hook to\nhydrate the atoms with initial values. This function will accept the initial atoms and their\ncorresponding values as an argument.\n\n// Jotai types are not well exported, so we will make our life easier by using `any`.\nexport type AtomInitialValueTuple = [PrimitiveAtom, T];\n\nexport interface RenderWithAtomsOptions {\n initialValues: AtomInitialValueTuple[];\n}\n\n/**\n * Renders a React component with Jotai atoms for testing purposes.\n *\n * @param component - The React component to render.\n * @param options - The render options including the initial atom values.\n * @returns The render result from `@testing-library/react-native`.\n */\nexport const renderWithAtoms = (\n component: React.ReactElement,\n options: RenderWithAtomsOptions\n) => {\n return render(\n {component}\n );\n};\n\nexport type HydrateAtomsWrapperProps = React.PropsWithChildren<{\n initialValues: AtomInitialValueTuple[];\n}>;\n\n/**\n * A wrapper component that hydrates Jotai atoms with initial values.\n *\n * @param initialValues - The initial values for the Jotai atoms.\n * @param children - The child components to render.\n * @returns The rendered children.\n\n */\nfunction HydrateAtomsWrapper({ initialValues, children }: HydrateAtomsWrapperProps) {\n useHydrateAtoms(initialValues);\n return children;\n}\n\nTesting the TaskList Component with initial tasks\n\nWe can now use the renderWithAtoms function to render the TaskList component with initial tasks. The\ninitialValues property will contain the tasksAtom, newTaskTitleAtom and their initial values. We can then test the component to ensure that the initial tasks are rendered correctly.\n\n:::info\nIn our test, we populated only one atom and its initial value, but you can add other Jotai atoms and their corresponding values to the initialValues array as needed.\n:::\n\n=======\nconst INITIAL_TASKS: Task[] = [{ id: '1', title: 'Buy bread' }];\n\ntest('renders a to do list with 1 items initially, and adds a new item', async () => {\n renderWithAtoms(, {\n initialValues: [\n [tasksAtom, INITIAL_TASKS],\n [newTaskTitleAtom, ''],\n ],\n });\n\n expect(screen.getByText(/buy bread/i)).toBeOnTheScreen();\n expect(screen.getAllByTestId('task-item')).toHaveLength(1);\n\n const user = userEvent.setup();\n await user.type(screen.getByPlaceholderText(/new task/i), 'Buy almond milk');\n await user.press(screen.getByRole('button', { name: /add task/i }));\n\n expect(screen.getByText(/buy almond milk/i)).toBeOnTheScreen();\n expect(screen.getAllByTestId('task-item')).toHaveLength(2);\n});\n\nModifying atom outside of React components\n\nIn several cases, you might need to change an atom's state outside a React component. In our case,\nwe have a set of functions to get tasks and set tasks, which change the state of the task list atom.\n\nexport const tasksAtom = atom([]);\nexport const newTaskTitleAtom = atom('');\n\n// Available for use outside React components\nexport const store = createStore();\n\n// Selectors\nexport function getAllTasks(): Task[] {\n return store.get(tasksAtom);\n}\n\n// Actions\nexport function addTask(task: Task) {\n store.set(tasksAtom, [...getAllTasks(), task]);\n}\n\nTesting atom outside of React components\n\nYou can test the getAllTasks and addTask functions outside the React component's scope by setting\nthe initial to-do items in the store and then checking if the functions work as expected.\nNo special setup is required to test these functions, as store.set is available by default by\nJotai.\n\n//...\n\ntest('modify store outside of React component', () => {\n // Set the initial to do items in the store\n store.set(tasksAtom, INITIAL_TASKS);\n expect(getAllTasks()).toEqual(INITIAL_TASKS);\n\n const NEW_TASK = { id: '2', title: 'Buy almond milk' };\n addTask(NEW_TASK);\n expect(getAllTasks()).toEqual([...INITIAL_TASKS, NEW_TASK]);\n});\n\nConclusion\n\nTesting a component or a function that depends on Jotai atoms is straightforward with the help of\nthe useHydrateAtoms hook. We've seen how to create a custom render function renderWithAtoms that\nsets up atoms and their initial values for testing purposes. We've also seen how to test functions\nthat change the state of atoms outside React components. This approach allows us to test components\nin different states and scenarios, ensuring they behave as expected.","routePath":"/12.x/cookbook/state-management/jotai","lang":"en","toc":[{"id":"introduction","text":"Introduction","depth":2,"charIndex":0},{"id":"task-list-example","text":"Task List Example","depth":2,"charIndex":332},{"id":"starting-with-a-simple-test","text":"Starting with a Simple Test","depth":2,"charIndex":1433},{"id":"custom-render-function-to-populate-jotai-atoms-with-initial-values","text":"Custom Render Function to populate Jotai Atoms with Initial Values","depth":2,"charIndex":1898},{"id":"testing-the-tasklist-component-with-initial-tasks","text":"Testing the `TaskList` Component with initial tasks","depth":2,"charIndex":3543},{"id":"modifying-atom-outside-of-react-components","text":"Modifying atom outside of React components","depth":2,"charIndex":4793},{"id":"testing-atom-outside-of-react-components","text":"Testing atom outside of React components","depth":2,"charIndex":5396},{"id":"conclusion","text":"Conclusion","depth":2,"charIndex":6072}],"frontmatter":{},"version":"12.x"},{"title":"Testing environment","content":":::info\n\nThis document is intended for a more advanced audience who want to understand the internals of our testing environment better, e.g., to contribute to the codebase. You should be able to write integration or component tests without reading this.\n\n:::\n\nReact Native Testing Library allows you to write integration and component tests for your React Native app or library. While the JSX code used in tests closely resembles your React Native app, things are not as simple as they might appear. This document will describe the key elements of our testing environment and highlight things to be aware of when writing more advanced tests or diagnosing issues.\n\nReact renderers\n\nReact allows you to write declarative code using JSX, write function or class components, or use hooks like useState. You need to use a renderer to output the results of your components. Every React app uses some renderer:\n\nReact Native is a renderer for mobile apps,\n\nReact DOM is a renderer for web apps,\n\nThere are other more specialized renderers that can e.g., render to console or HTML canvas.\n\nWhen you run your tests in the React Native Testing Library, somewhat contrary to what the name suggests, they are actually not using React Native renderer. This is because this renderer needs to be run on an iOS or Android operating system, so it would need to run on a device or simulator.\n\nReact Test Renderer\n\nInstead, RNTL uses React Test Renderer, a specialized renderer that allows rendering to pure JavaScript objects without access to mobile OS and can run in a Node.js environment using Jest (or any other JavaScript test runner).\n\nUsing React Test Renderer has pros and cons.\n\nBenefits:\n\ntests can run on most CIs (Linux, etc) and do not require a mobile device or emulator\n\nfaster test execution\n\nlight runtime environment\n\nDisadvantages:\n\nTests do not execute native code\n\nTests are unaware of the view state that would be managed by native components, e.g., focus, unmanaged text boxes, etc.\n\nAssertions do not operate on native view hierarchy\n\nRuntime behaviors are simulated, sometimes imperfectly\n\nIt's worth noting that the React Testing Library (web one) works a bit differently. While RTL also runs in Jest, it has access to a simulated browser DOM environment from the jsdom package, which allows it to use a regular React DOM renderer. Unfortunately, there is no similar React Native runtime environment package. This is probably because while the browser environment is well-defined and highly standardized, the React Native environment constantly evolves in sync with the evolution of underlying OS-es. Maintaining such an environment would require duplicating countless React Native behaviors and keeping them in sync as React Native develops.\n\nElement tree\n\nCalling the render() function creates an element tree. This is done internally by invoking TestRenderer.create() method. The output tree represents your React Native component tree, and each node of that tree is an \"instance\" of some React component (to be more precise, each node represents a React fiber, and only class components have instances, while function components store the hook state using fibers).\n\nThese tree elements are represented by ReactTestInstance type:\n\ninterface ReactTestInstance {\n type: ElementType;\n props: { [propName: string]: any };\n parent: ReactTestInstance | null;\n children: Array;\n\n // Other props and methods\n}\n\nBased on: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-test-renderer/index.d.ts\n\nHost and composite components\n\nOne of the most important aspects of the element tree is that it is composed of both host and composite components:\n\nHost components will have direct counterparts in the native view tree. Typical examples are , , , and from React Native. You can think of these as an analog of
      , etc on the Web. You can also create custom host views as native modules or import them from 3rd party libraries, like React Navigation or React Native Gesture Handler.\n\nComposite components are React code organization units that exist only on the JavaScript side of your app. Typical examples are components you create (function and class components), components imported from React Native (View, Text, etc.), or 3rd party packages.\n\nThat might initially sound confusing since we put React Native's View in both categories. There are two View components: composite and host. The relation between them is as follows:\n\ncomposite View is the type imported from the react-native package. It is a JavaScript component that renders the host View as its only child in the element tree.\n\nhost View, which you do not render directly. React Native takes the props you pass to the composite View, does some processing on them and passes them to the host View.\n\nThe part of the tree looks as follows:\n\n* (composite)\n * (host)\n * children prop passed in JSX\n\nA similar relation exists between other composite and host pairs: e.g. Text , TextInput, and Image components:\n\n* (composite)\n * (host)\n * string (or mixed) content\n\nNot all React Native components are organized this way, e.g., when you use Pressable (or TouchableOpacity), there is no host Pressable, but composite Pressable is rendering a host View with specific props being set:\n\n* (composite)\n * (host)\n * children prop passed in JSX\n\nDifferentiating between host and composite elements\n\nAny easy way to differentiate between host and composite elements is the type prop of ReactTestInstance:\n\nfor host components, it's always a string value representing a component name, e.g., \"View\"\n\nfor composite components, it's a function or class corresponding to the component\n\nYou can use the following code to check if a given element is a host one:\n\nfunction isHostElement(element: ReactTestInstance) {\n return typeof element.type === 'string';\n}\n\nTree nodes\n\nWe encourage you to only assert values on host views in your tests because they represent the user interface view and controls which the user can see and interact with. Users cannot see or interact with composite views as they exist purely in the JavaScript domain and do not generate any visible UI.\n\nAsserting props\n\nFor example, suppose you assert a style prop of a composite element. In that case, there is no guarantee that the style will be visible to the user, as the component author can forget to pass this prop to some underlying View or other host component. Similarly onPress event handler on a composite prop can be unreachable by the user.\n\nfunction ForgotToPassPropsButton({ title, onPress, style }) {\n return (\n \n {title}\n \n );\n}\n\nIn the above example, user-defined components accept both onPress and style props but do not pass them (through Pressable) to host views, so they will not affect the user interface. Additionally, React Native and other libraries might pass some of the props under different names or transform their values between composite and host components.\n\nTree navigation\n\n:::caution\nYou should avoid navigating over the element tree, as this makes your testing code fragile and may result in false positives. This section is more relevant for people who want to contribute to our codebase.\n:::\n\nYou will encounter host and composite elements when navigating a tree of react elements using parent or children props of a ReactTestInstance element. You should be careful when navigating the element tree, as the tree structure for third-party components can change independently from your code and cause unexpected test failures.\n\nInside RNTL, we have various tree navigation helpers: getHostParent, getHostChildren, etc. These are intentionally not exported, as using them is not recommended.\n\nQueries\n\nAll recommended Testing Library queries return host components to encourage the best practices described above.\n\nOnly UNSAFE_*ByType and UNSAFE_*ByProps queries can return both host and composite components depending on used predicates. They are marked as unsafe precisely because testing composite components makes your test more fragile.","routePath":"/12.x/docs/advanced/testing-env","lang":"en","toc":[{"id":"react-renderers","text":"React renderers","depth":2,"charIndex":664},{"id":"react-test-renderer","text":"React Test Renderer","depth":2,"charIndex":1375},{"id":"element-tree","text":"Element tree","depth":2,"charIndex":2752},{"id":"host-and-composite-components","text":"Host and composite components","depth":2,"charIndex":3558},{"id":"differentiating-between-host-and-composite-elements","text":"Differentiating between host and composite elements","depth":3,"charIndex":5480},{"id":"tree-nodes","text":"Tree nodes","depth":2,"charIndex":5989},{"id":"asserting-props","text":"Asserting props","depth":3,"charIndex":6303},{"id":"tree-navigation","text":"Tree navigation","depth":2,"charIndex":7143},{"id":"queries","text":"Queries","depth":2,"charIndex":7880}],"frontmatter":{},"version":"12.x","description":"React Native Testing Library allows you to write integration and component tests for your React Native app or library. While the JSX code used in tests closely resembles your React Native app, things are not as simple as they might appear. This document will describe the key elements of our testing environment and highlight things to be aware of when writing more advanced tests or diagnosing issues."},{"title":"Understanding `act` function","content":"When writing RNTL tests one of the things that confuses developers the most are cryptic act() function errors logged into console. In this article I will try to build an understanding of the purpose and behaviour of act() so you can build your tests with more confidence.\n\nact warnings\n\nLet’s start with typical act() warnings logged to console. There are two kinds of these issues, let’s call the first one the \"sync act()\" warning:\n\nWarning: An update to Component inside a test was not wrapped in act(...).\n\nWhen testing, code that causes React state updates should be wrapped into act(...):\n\nact(() => {\n /* fire events that update state */\n});\n/* assert on the output */\n\nThe second one relates to async usage of act so let’s call it the \"async act\" error:\n\nWarning: You called act(async () => ...) without await. This could lead to unexpected\ntesting behaviour, interleaving multiple act calls and mixing their scopes. You should\n- await act(async () => ...);\n\nSynchronous act\n\nResponsibility\n\nThis function is intended only for using in automated tests and works only in development mode. Attempting to use it in production build will throw an error.\n\nThe responsibility for act function is to make React renders and updates work in tests in a similar way they work in real application by grouping and executing related units of interaction (e.g. renders, effects, etc) together.\n\nTo showcase that behaviour let make a small experiment. First we define a function component that uses useEffect hook in a trivial way.\n\nfunction TestComponent() {\n const [count, setCount] = React.useState(0);\n React.useEffect(() => {\n setCount((c) => c + 1);\n }, []);\n\n return Count {count};\n}\n\nIn the following tests we will directly use ReactTestRenderer instead of RNTL render function to render our component for tests. In order to expose familiar queries like getByText we will use within function from RNTL.\n\ntest('render without act', () => {\n const renderer = TestRenderer.create();\n\n // Bind RNTL queries for root element.\n const view = within(renderer.root);\n expect(view.getByText('Count 0')).toBeOnTheScreen();\n});\n\nWhen testing without act call wrapping rendering call, we see that the assertion runs just after the rendering but before useEffecthooks effects are applied. Which is not what we expected in our tests.\n\ntest('render with act', () => {\n let renderer: ReactTestRenderer;\n act(() => {\n renderer = TestRenderer.create();\n });\n\n // Bind RNTL queries for root element.\n const view = within(renderer!.root);\n expect(view.getByText('Count 1')).toBeOnTheScreen();\n});\n\nWhen wrapping rendering call with act we see that the changes caused by useEffect hook have been applied as we would expect.\n\nWhen to use act\n\nThe name act comes from Arrange-Act-Assert unit testing pattern. Which means it’s related to part of the test when we execute some actions on the component tree.\n\nSo far we learned that act function allows tests to wait for all pending React interactions to be applied before we make our assertions. When using act we get guarantee that any state updates will be executed as well as any enqueued effects will be executed.\n\nTherefore, we should use act whenever there is some action that causes element tree to render, particularly:\n\ninitial render call - ReactTestRenderer.create call\n\nre-rendering of component -renderer.update call\n\ntriggering any event handlers that cause component tree render\n\nThankfully, for these basic cases RNTL has got you covered as our render, update and fireEvent methods already wrap their calls in sync act so that you do not have to do it explicitly.\n\nNote that act calls can be safely nested and internally form a stack of calls. However, overlapping act calls, which can be achieved using async version of act, are not supported.\n\nImplementation\n\nAs of React version of 18.1.0, the act implementation is defined in the ReactAct.js source file inside React repository. This implementation has been fairly stable since React 17.0.\n\nRNTL exports act for convenience of the users as defined in the act.ts source file. That file refers to ReactTestRenderer.js source file from React Test Renderer package, which finally leads to React act implementation in ReactAct.js (already mentioned above).\n\nAsynchronous act\n\nSo far we have seen synchronous version of act which runs its callback immediately. This can deal with things like synchronous effects or mocks using already resolved promises. However, not all component code is synchronous. Frequently our components or mocks contain some asynchronous behaviours like setTimeout calls or network calls. Starting from React 16.9, act can also be called in asynchronous mode. In such case act implementation checks that the passed callback returns object resembling promise.\n\nAsynchronous code\n\nAsynchronous version of act also is executed immediately, but the callback is not yet completed because of some asynchronous operations inside.\n\nLets look at a simple example with component using setTimeout call to simulate asynchronous behaviour:\n\nfunction TestAsyncComponent() {\n const [count, setCount] = React.useState(0);\n React.useEffect(() => {\n setTimeout(() => {\n setCount((c) => c + 1);\n }, 50);\n }, []);\n\n return Count {count};\n}\n\ntest('render async natively', () => {\n render();\n expect(screen.getByText('Count 0')).toBeOnTheScreen();\n});\n\nIf we test our component in a native way without handling its asynchronous behaviour we will end up with sync act warning:\n\nWarning: An update to TestAsyncComponent inside a test was not wrapped in act(...).\n\nWhen testing, code that causes React state updates should be wrapped into act(...):\n\nact(() => {\n /* fire events that update state */\n});\n/* assert on the output */\n\nNote that this is not yet the infamous async act warning. It only asks us to wrap our event code with act calls. However, this time our immediate state change does not originate from externally triggered events but rather forms an internal part of the component. So how can we apply act in such scenario?\n\nSolution with fake timers\n\nFirst solution is to use Jest's fake timers inside out tests:\n\ntest('render with fake timers', () => {\n jest.useFakeTimers();\n render();\n\n act(() => {\n jest.runAllTimers();\n });\n expect(screen.getByText('Count 1')).toBeOnTheScreen();\n});\n\nThat way we can wrap jest.runAllTimers() call which triggers the setTimeout updates inside an act call, hence resolving the act warning. Note that this whole code is synchronous thanks to usage of Jest fake timers.\n\nSolution with real timers\n\nIf we wanted to stick with real timers then things get a bit more complex. Let’s start by applying a crude solution of opening async act() call for the expected duration of components updates:\n\ntest('render with real timers - sleep', async () => {\n render();\n await act(() => sleep(100)); // Wait a bit longer than setTimeout in `TestAsyncComponent`\n\n expect(screen.getByText('Count 1')).toBeOnTheScreen();\n});\n\nThis works correctly as we use an explicit async act() call that resolves the console error. However, it relies on our knowledge of exact implementation details which is a bad practice.\n\nLet’s try more elegant solution using waitFor that will wait for our desired state:\n\ntest('render with real timers - waitFor', async () => {\n render();\n\n await waitFor(() => screen.getByText('Count 1'));\n expect(screen.getByText('Count 1')).toBeOnTheScreen();\n});\n\nThis also works correctly, because waitFor call executes async act() call internally.\n\nThe above code can be simplified using findBy query:\n\ntest('render with real timers - findBy', async () => {\n render();\n\n expect(await screen.findByText('Count 1')).toBeOnTheScreen();\n});\n\nThis also works since findByText internally calls waitFor which uses async act().\n\nNote that all of the above examples are async tests using & awaiting async act() function call.\n\nAsync act warning\n\nIf we modify any of the above async tests and remove await keyword, then we will trigger the notorious async act()warning:\n\nWarning: You called act(async () => ...) without await. This could lead to unexpected\ntesting behaviour, interleaving multiple act calls and mixing their scopes. You should\n- await act(async () => ...);\n\nReact decides to show this error whenever it detects that async act()call has not been awaited.\n\nThe exact reasons why you might see async act() warnings vary, but finally it means that act() has been called with callback that returns Promise-like object, but it has not been waited on.\n\nReferences\n\nReact act implementation source\n\nReact testing recipes: act()","routePath":"/12.x/docs/advanced/understanding-act","lang":"en","toc":[{"id":"act-warnings","text":"`act` warnings","depth":2,"charIndex":273},{"id":"synchronous-act","text":"Synchronous `act`","depth":2,"charIndex":968},{"id":"responsibility","text":"Responsibility","depth":3,"charIndex":985},{"id":"when-to-use-act","text":"When to use act","depth":3,"charIndex":2771},{"id":"implementation","text":"Implementation","depth":3,"charIndex":3854},{"id":"asynchronous-act","text":"Asynchronous `act`","depth":2,"charIndex":4315},{"id":"asynchronous-code","text":"Asynchronous code","depth":3,"charIndex":4841},{"id":"solution-with-fake-timers","text":"Solution with fake timers","depth":3,"charIndex":6146},{"id":"solution-with-real-timers","text":"Solution with real timers","depth":3,"charIndex":6658},{"id":"async-act-warning","text":"Async act warning","depth":3,"charIndex":8079},{"id":"references","text":"References","depth":2,"charIndex":8714}],"frontmatter":{},"version":"12.x","description":"When writing RNTL tests one of the things that confuses developers the most are cryptic act() function errors logged into console. In this article I will try to build an understanding of the purpose and behaviour of act() so you can build your tests with more confidence."},{"title":"API Overview","content":"React Native Testing Library consists of following APIs:\n\nrender function - render your UI components for testing purposes\n\nscreen object - access rendered UI:\nQueries - find relevant components by various predicates: role, text, test ids, etc\n\nLifecycle methods: rerender, unmount\n\nHelpers: debug, toJSON, root\n\n\nJest matchers - validate assumptions about your UI\n\nUser Event - simulate common user interactions like press or type in a realistic way\n\nFire Event - simulate any component event in a simplified way purposes\n\nMisc APIs:\nrenderHook function - render hooks for testing\n\nAsync utils: findBy* queries, wait, waitForElementToBeRemoved\n\nConfiguration: configure, resetToDefaults\n\nAccessibility: isHiddenFromAccessibility\n\nOther: within, act, cleanup","routePath":"/12.x/docs/api","lang":"en","toc":[],"frontmatter":{"uri":"/api"},"version":"12.x","description":"React Native Testing Library consists of following APIs: render function - render your UI components for testing purposesscreen object - access rendered UI:Queries - find relevant components by various predicates: role, text, test ids, etcLifecycle methods: rerender, unmountHelpers: debug, toJSON, rootJest matchers - validate assumptions about your UIUser Event - simulate common user interactions like press or type in a realistic wayFire Event - simulate any component event in a simplified way purposesMisc APIs:renderHook function - render hooks for testingAsync utils: findBy* queries, wait, waitForElementToBeRemovedConfiguration: configure, resetToDefaultsAccessibility: isHiddenFromAccessibilityOther: within, act, cleanup"},{"title":"Fire Event API","content":"function fireEvent(element: ReactTestInstance, eventName: string, ...data: unknown[]): void;\n\n:::note\nFor common events like press or type it's recommended to use User Event API as it offers\nmore realistic event simulation by emitting a sequence of events with proper event objects that mimic React Native runtime behavior.\n\nUse Fire Event for cases not supported by User Event and for triggering event handlers on composite components.\n:::\n\nThe fireEvent API allows you to trigger all kinds of event handlers on both host and composite components. It will try to invoke a single event handler traversing the component tree bottom-up from passed element and trying to find enabled event handler named onXxx when xxx is the name of the event passed.\n\nUnlike User Event, this API does not automatically pass event object to event handler, this is responsibility of the user to construct such object.\n\ntest('fire changeText event', () => {\n const onEventMock = jest.fn();\n render(\n // MyComponent renders TextInput which has a placeholder 'Enter details'\n // and with `onChangeText` bound to handleChangeText\n \n );\n\n fireEvent(screen.getByPlaceholderText('change'), 'onChangeText', 'ab');\n expect(onEventMock).toHaveBeenCalledWith('ab');\n});\n\n:::note\nPlease note that from version 7.0 fireEvent performs checks that should prevent events firing on disabled elements.\n:::\n\nAn example using fireEvent with native events that aren't already aliased by the fireEvent api.\n\nconst onBlurMock = jest.fn();\n\nrender(\n \n \n \n);\n\n// you can omit the `on` prefix\nfireEvent(screen.getByPlaceholderText('my placeholder'), 'blur');\n\nFireEvent exposes convenience methods for common events like: press, changeText, scroll.\n\nfireEvent.press {#press}\n\nfireEvent.press: (element: ReactTestInstance, ...data: Array) => void\n\n:::note\nIt is recommended to use the User Event press() helper instead as it offers more realistic simulation of press interaction, including pressable support.\n:::\n\nInvokes press event handler on the element or parent element in the tree.\n\nconst onPressMock = jest.fn();\nconst eventData = {\n nativeEvent: {\n pageX: 20,\n pageY: 30,\n },\n};\n\nrender(\n \n \n Press me\n \n \n);\n\nfireEvent.press(screen.getByText('Press me'), eventData);\nexpect(onPressMock).toHaveBeenCalledWith(eventData);\n\nfireEvent.changeText {#change-text}\n\nfireEvent.changeText: (element: ReactTestInstance, ...data: Array) => void\n\n:::note\nIt is recommended to use the User Event type() helper instead as it offers more realistic simulation of text change interaction, including key-by-key typing, element focus, and other editing events.\n:::\n\nInvokes changeText event handler on the element or parent element in the tree.\n\nconst onChangeTextMock = jest.fn();\nconst CHANGE_TEXT = 'content';\n\nrender(\n \n \n \n);\n\nfireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT);\n\nfireEvent.scroll {#scroll}\n\nfireEvent.scroll: (element: ReactTestInstance, ...data: Array) => void\n\nInvokes scroll event handler on the element or parent element in the tree.\n\nOn a ScrollView\n\nconst onScrollMock = jest.fn();\nconst eventData = {\n nativeEvent: {\n contentOffset: {\n y: 200,\n },\n },\n};\n\nrender(\n \n XD\n \n);\n\nfireEvent.scroll(screen.getByText('scroll-view'), eventData);\n\n:::note\n\nPrefer using user.scrollTo over fireEvent.scroll for ScrollView, FlatList, and SectionList components. User Event provides a more realistic event simulation based on React Native runtime behavior.\n\n:::","routePath":"/12.x/docs/api/events/fire-event","lang":"en","toc":[{"id":"press","text":"`fireEvent.press`","depth":3,"charIndex":1844},{"id":"change-text","text":"`fireEvent.changeText`","depth":3,"charIndex":2534},{"id":"scroll","text":"`fireEvent.scroll`","depth":3,"charIndex":3197},{"id":"on-a-scrollview","text":"On a `ScrollView`","depth":4,"charIndex":3378}],"frontmatter":{},"version":"12.x","description":"The fireEvent API allows you to trigger all kinds of event handlers on both host and composite components. It will try to invoke a single event handler traversing the component tree bottom-up from passed element and trying to find enabled event handler named onXxx when xxx is the name of the event passed. Unlike User Event, this API does not automatically pass event object to event handler, this is responsibility of the user to construct such object. An example using fireEvent with native events that aren't already aliased by the fireEvent api. FireEvent exposes convenience methods for common events like: press, changeText, scroll. fireEvent.press {#press} Invokes press event handler on the element or parent element in the tree. fireEvent.changeText {#change-text} Invokes changeText event handler on the element or parent element in the tree. fireEvent.scroll {#scroll} Invokes scroll event handler on the element or parent element in the tree. On a ScrollView"},{"title":"User Event interactions","content":":::info RNTL minimal version\n\nUser Event interactions require RNTL v12.2.0 or later.\n\n:::\n\nComparison with Fire Event API\n\nFire Event is our original event simulation API. It can invoke any event handler declared on either host or composite elements. Suppose the element does not have onEventName event handler for the passed eventName event, or the element is disabled. In that case, Fire Event will traverse up the component tree, looking for an event handler on both host and composite elements along the way. By default, it will not pass any event data, but the user might provide it in the last argument.\n\nIn contrast, User Event provides realistic event simulation for user interactions like press or type. Each interaction will trigger a sequence of events corresponding to React Native runtime behavior. These events will be invoked only on host elements, and will automatically receive event data corresponding to each event.\n\nIf User Event supports a given interaction, you should always prefer it over the Fire Event counterpart, as it will make your tests much more realistic and, hence, reliable. In other cases, e.g., when User Event does not support the given event or when invoking event handlers on composite elements, you have to use Fire Event as the only available option.\n\nsetup()\n\nuserEvent.setup(options?: {\n delay: number;\n advanceTimers: (delay: number) => Promise | void;\n})\n\nExample\n\nconst user = userEvent.setup();\n\nCreates a User Event object instance, which can be used to trigger events.\n\nOptions {#setup-options}\n\ndelay controls the default delay between subsequent events, e.g., keystrokes.\n\nadvanceTimers is a time advancement utility function that should be used for fake timers. The default setup handles both real timers and Jest fake timers.\n\npress()\n\npress(\n element: ReactTestInstance,\n): Promise\n\nExample\n\nconst user = userEvent.setup();\nawait user.press(element);\n\nThis helper simulates a press on any pressable element, e.g. Pressable, TouchableOpacity, Text, TextInput, etc. Unlike fireEvent.press(), a more straightforward API that will only call the onPress prop, this function simulates the entire press interaction in a more realistic way by reproducing the event sequence emitted by React Native runtime. This helper will trigger additional events like pressIn and pressOut.\n\nThis event will take a minimum of 130 ms to run due to the internal React Native logic. Consider using fake timers to speed up test execution for tests involving press and longPress interactions.\n\nlongPress()\n\nlongPress(\n element: ReactTestInstance,\n options: { duration: number } = { duration: 500 }\n): Promise\n\nExample\n\nconst user = userEvent.setup();\nawait user.longPress(element);\n\nSimulates a long press user interaction. In React Native, the longPress event is emitted when the press duration exceeds the long press threshold (by default, 500 ms). In other aspects, this action behaves similarly to regular press action, e.g., by emitting pressIn and pressOut events. The press duration is customizable through the options. This should be useful if you use the delayLongPress prop.\n\nThis event will, by default, take 500 ms to run. Due to internal React Native logic, it will take at least 130 ms regardless of the duration option passed. Consider using fake timers to speed up test execution for tests involving press and longPress interactions.\n\nOptions {#longpress-options}\n\nduration - duration of the press in milliseconds. The default value is 500 ms.\n\ntype()\n\ntype(\n element: ReactTestInstance,\n text: string,\n options?: {\n skipPress?: boolean;\n skipBlur?: boolean;\n submitEditing?: boolean;\n }\n\nExample\n\nconst user = userEvent.setup();\nawait user.type(textInput, 'Hello world!');\n\nThis helper simulates the user focusing on a TextInput element, typing text one character at a time, and leaving the element.\n\nThis function supports only host TextInput elements. Passing other element types will result in throwing an error.\n\n:::note\nThis function will add text to the text already present in the text input (as specified by value or defaultValue props). To replace existing text, use clear() helper first.\n:::\n\nOptions {#type-options}\n\nskipPress - if true, pressIn and pressOut events will not be triggered.\n\nskipBlur - if true, endEditing and blur events will not be triggered when typing is complete.\n\nsubmitEditing - if true, submitEditing event will be triggered after typing the text.\n\nSequence of events {#type-sequence}\n\nThe sequence of events depends on the multiline prop and the passed options.\n\nEvents will not be emitted if the editable prop is set to false.\n\nEntering the element:\n\npressIn (optional)\n\nfocus\n\npressOut (optional)\n\nThe pressIn and pressOut events are sent by default but can be skipped by passing the skipPress: true option.\n\nTyping (for each character):\n\nkeyPress\n\nchange\n\nchangeText\n\nselectionChange\n\ncontentSizeChange (only multiline)\n\nLeaving the element:\n\nsubmitEditing (optional)\n\nendEditing\n\nblur\n\nThe submitEditing event is skipped by default. It can sent by setting the submitEditing: true option.\nThe endEditing and blur events can be skipped by passing the skipBlur: true option.\n\nclear()\n\nclear(\n element: ReactTestInstance,\n)\n\nExample\n\nconst user = userEvent.setup();\nawait user.clear(textInput);\n\nThis helper simulates the user clearing the content of a TextInput element.\n\nThis function supports only host TextInput elements. Passing other element types will result in throwing an error.\n\nSequence of events {#clear-sequence}\n\nEvents will not be emitted if the editable prop is set to false.\n\nEntering the element:\n\nfocus\n\nSelecting all content:\n\nselectionChange\n\nPressing backspace:\n\nkeyPress\n\nchange\n\nchangeText\n\nselectionChange\n\nLeaving the element:\n\nendEditing\n\nblur\n\npaste()\n\npaste(\n element: ReactTestInstance,\n text: string,\n)\n\nExample\n\nconst user = userEvent.setup();\nawait user.paste(textInput, 'Text to paste');\n\nThis helper simulates the user pasting given text to a TextInput element.\n\nThis function supports only host TextInput elements. Passing other element types will result in throwing an error.\n\nSequence of events {#paste-sequence}\n\nEvents will not be emitted if the editable prop is set to false.\n\nEntering the element:\n\nfocus\n\nSelecting all content:\n\nselectionChange\n\nPasting the text:\n\nchange\n\nchangeText\n\nselectionChange\n\nLeaving the element:\n\nendEditing\n\nblur\n\nscrollTo() {#scroll-to}\n\n:::note\nscrollTo interaction has been introduced in RNTL v12.4.0.\n:::\n\nscrollTo(\n element: ReactTestInstance,\n options: {\n y: number,\n momentumY?: number,\n contentSize?: { width: number, height: number },\n layoutMeasurement?: { width: number, height: number },\n } | {\n x: number,\n momentumX?: number,\n contentSize?: { width: number, height: number },\n layoutMeasurement?: { width: number, height: number },\n }\n\nExample\n\nconst user = userEvent.setup();\nawait user.scrollTo(scrollView, { y: 100, momentumY: 200 });\n\nThis helper simulates the user scrolling a host ScrollView element.\n\nThis function supports only host ScrollView elements, passing other element types will result in an error. Note that FlatList is accepted as it renders to a host ScrollView element.\n\nScroll interaction should match the ScrollView element direction:\n\nfor a vertical scroll view (default or horizontal={false}), you should pass only the y option (and optionally also momentumY).\n\nfor a horizontal scroll view (horizontal={true}), you should pass only the x option (and optionally momentumX).\n\nEach scroll interaction consists of a mandatory drag scroll part, which simulates the user dragging the scroll view with his finger (the y or x option). This may optionally be followed by a momentum scroll movement, which simulates the inertial movement of scroll view content after the user lifts his finger (momentumY or momentumX options).\n\nOptions {#scroll-to-options}\n\ny - target vertical drag scroll offset\n\nx - target horizontal drag scroll offset\n\nmomentumY - target vertical momentum scroll offset\n\nmomentumX - target horizontal momentum scroll offset\n\ncontentSize - passed to ScrollView events and enabling FlatList updates\n\nlayoutMeasurement - passed to ScrollView events and enabling FlatList updates\n\nUser Event will generate several intermediate scroll steps to simulate user scroll interaction. You should not rely on exact number or values of these scrolls steps as they might be change in the future version.\n\nThis function will remember where the last scroll ended, so subsequent scroll interaction will starts from that position. The initial scroll position will be assumed to be { y: 0, x: 0 }.\n\nTo simulate a FlatList (and other controls based on VirtualizedList) scrolling, you should pass the contentSize and layoutMeasurement options, which enable the underlying logic to update the currently visible window.\n\nSequence of events {#scroll-sequence}\n\nThe sequence of events depends on whether the scroll includes an optional momentum scroll component.\n\nDrag scroll:\n\ncontentSizeChange\n\nscrollBeginDrag\n\nscroll (multiple events)\n\nscrollEndDrag\n\nMomentum scroll (optional):\n\nmomentumScrollBegin\n\nscroll (multiple events)\n\nmomentumScrollEnd","routePath":"/12.x/docs/api/events/user-event","lang":"en","toc":[{"id":"comparison-with-fire-event-api","text":"Comparison with Fire Event API","depth":2,"charIndex":91},{"id":"setup","text":"`setup()`","depth":2,"charIndex":1294},{"id":"setup-options","text":"Options","depth":3,"charIndex":1528},{"id":"press","text":"`press()`","depth":2,"charIndex":1789},{"id":"longpress","text":"`longPress()`","depth":2,"charIndex":2537},{"id":"longpress-options","text":"Options","depth":3,"charIndex":3402},{"id":"type","text":"`type()`","depth":2,"charIndex":3512},{"id":"type-options","text":"Options","depth":3,"charIndex":4184},{"id":"type-sequence","text":"Sequence of events","depth":3,"charIndex":4464},{"id":"clear","text":"`clear()`","depth":2,"charIndex":5193},{"id":"clear-sequence","text":"Sequence of events","depth":3,"charIndex":5506},{"id":"paste","text":"`paste()`","depth":2,"charIndex":5789},{"id":"paste-sequence","text":"Sequence of events","depth":3,"charIndex":6133},{"id":"scroll-to","text":"`scrollTo()`","depth":2,"charIndex":6404},{"id":"scroll-to-options","text":"Options","depth":3,"charIndex":7875},{"id":"scroll-sequence","text":"Sequence of events","depth":3,"charIndex":8865}],"frontmatter":{},"version":"12.x"},{"title":"Jest matchers","content":":::info RNTL minimal version\n\nBuilt-in Jest matchers require RNTL v12.4.0 or later.\n\n:::\n\nThis guide describes built-in Jest matchers, we recommend using these matchers as they provide readable tests, accessibility support, and a better developer experience.\n\nSetup\n\nYou can use the built-in matchers by adding the following line to your jest-setup.ts file (configured using setupFilesAfterEnv):\n\nimport '@testing-library/react-native/extend-expect';\n\nAlternatively, you can add above script to your Jest configuration (usually located either in the jest.config.js file or in the package.json file under the \"jest\" key):\n\n{\n \"preset\": \"react-native\",\n \"setupFilesAfterEnv\": [\"@testing-library/react-native/extend-expect\"]\n}\n\nMigration from legacy Jest Native matchers.\n\nIf you are already using legacy Jest Native matchers we have a migration guide for moving to the built-in matchers.\n\nChecking element existence\n\ntoBeOnTheScreen()\n\nexpect(element).toBeOnTheScreen();\n\nThis allows you to assert whether an element is attached to the element tree or not. If you hold a reference to an element and it gets unmounted during the test it will no longer pass this assertion.\n\nElement Content\n\ntoHaveTextContent()\n\nexpect(element).toHaveTextContent(\n text: string | RegExp,\n options?: {\n exact?: boolean;\n normalizer?: (text: string) => string;\n },\n)\n\nThis allows you to assert whether the given element has the given text content or not. It accepts either string or RegExp matchers, as well as text match options of exact and normalizer.\n\ntoContainElement()\n\nexpect(container).toContainElement(\n element: ReactTestInstance | null,\n)\n\nThis allows you to assert whether the given container element does contain another host element.\n\ntoBeEmptyElement()\n\nexpect(element).toBeEmptyElement();\n\nThis allows you to assert whether the given element does not have any host child elements or text content.\n\nChecking element state\n\ntoHaveDisplayValue()\n\nexpect(element).toHaveDisplayValue(\n value: string | RegExp,\n options?: {\n exact?: boolean;\n normalizer?: (text: string) => string;\n },\n)\n\nThis allows you to assert whether the given TextInput element has a specified display value. It accepts either string or RegExp matchers, as well as text match options of exact and normalizer.\n\ntoHaveAccessibilityValue()\n\nexpect(element).toHaveAccessibilityValue(\n value: {\n min?: number;\n max?: number;\n now?: number;\n text?: string | RegExp;\n },\n)\n\nThis allows you to assert whether the given element has a specified accessible value.\n\nThis matcher will assert accessibility value based on aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext and accessibilityValue props. Only defined value entries will be used in the assertion, the element might have additional accessibility value entries and still be matched.\n\nWhen querying by text entry a string or RegExp might be used.\n\ntoBeEnabled() / toBeDisabled {#tobeenabled}\n\nexpect(element).toBeEnabled();\nexpect(element).toBeDisabled();\n\nThese allow you to assert whether the given element is enabled or disabled from the user's perspective. It relies on the accessibility disabled state as set by aria-disabled or accessibilityState.disabled props. It will consider a given element disabled when it or any of its ancestors is disabled.\n\n:::note\nThese matchers are the negation of each other, and both are provided to avoid double negations in your assertions.\n:::\n\ntoBeSelected()\n\nexpect(element).toBeSelected();\n\nThis allows you to assert whether the given element is selected from the user's perspective. It relies on the accessibility selected state as set by aria-selected or accessibilityState.selected props.\n\ntoBeChecked() / toBePartiallyChecked() {#tobechecked}\n\nexpect(element).toBeChecked();\nexpect(element).toBePartiallyChecked();\n\nThese allow you to assert whether the given element is checked or partially checked from the user's perspective. It relies on the accessibility checked state as set by aria-checked or accessibilityState.checked props.\n\n:::note\n\ntoBeChecked() matcher works only on Switch host elements and accessibility elements with checkbox, radio or switch role.\n\ntoBePartiallyChecked() matcher works only on elements with checkbox role.\n\n:::\n\ntoBeExpanded() / toBeCollapsed() {#tobeexpanded}\n\nexpect(element).toBeExpanded();\nexpect(element).toBeCollapsed();\n\nThese allows you to assert whether the given element is expanded or collapsed from the user's perspective. It relies on the accessibility disabled state as set by aria-expanded or accessibilityState.expanded props.\n\n:::note\nThese matchers are the negation of each other for expandable elements (elements with explicit aria-expanded or accessibilityState.expanded props). However, both won't pass for non-expandable elements (ones without explicit aria-expanded or accessibilityState.expanded props).\n:::\n\ntoBeBusy()\n\nexpect(element).toBeBusy();\n\nThis allows you to assert whether the given element is busy from the user's perspective. It relies on the accessibility selected state as set by aria-busy or accessibilityState.busy props.\n\nChecking element style\n\ntoBeVisible()\n\nexpect(element).toBeVisible();\n\nThis allows you to assert whether the given element is visible from the user's perspective.\n\nThe element is considered invisible when itself or any of its ancestors has display: none or opacity: 0 styles, as well as when it's hidden from accessibility.\n\ntoHaveStyle()\n\nexpect(element).toHaveStyle(\n style: StyleProp