diff --git a/12.x/cookbook/advanced/network-requests.html b/12.x/cookbook/advanced/network-requests.html index c8591201..a2bc9e5a 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 26270e6d..f843eaa4 100644 --- a/12.x/cookbook/basics/async-tests.html +++ b/12.x/cookbook/basics/async-tests.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/cookbook/basics/custom-render.html b/12.x/cookbook/basics/custom-render.html index f4891d04..7ab93266 100644 --- a/12.x/cookbook/basics/custom-render.html +++ b/12.x/cookbook/basics/custom-render.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/cookbook/index.html b/12.x/cookbook/index.html index 09452300..52f891d3 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 9229256e..971cfa51 100644 --- a/12.x/cookbook/state-management/jotai.html +++ b/12.x/cookbook/state-management/jotai.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/advanced/testing-env.html b/12.x/docs/advanced/testing-env.html index 846e3ce2..7010a79c 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 4799c0a4..57aee6d3 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 3937545d..4bcfc4db 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 e45531c0..f67130b8 100644 --- a/12.x/docs/api/events/fire-event.html +++ b/12.x/docs/api/events/fire-event.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/api/events/user-event.html b/12.x/docs/api/events/user-event.html index d50127c7..2c550aec 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 4c7f594e..301d030b 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 a0777405..7d2cbfb9 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 a635dbf6..4c3bf5ad 100644 --- a/12.x/docs/api/misc/async.html +++ b/12.x/docs/api/misc/async.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/api/misc/config.html b/12.x/docs/api/misc/config.html index 072f4015..2090c544 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 2f5d9d03..a4767e54 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 fd503ae3..dc1e2aec 100644 --- a/12.x/docs/api/misc/render-hook.html +++ b/12.x/docs/api/misc/render-hook.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/api/queries.html b/12.x/docs/api/queries.html index 005eeb91..1609acea 100644 --- a/12.x/docs/api/queries.html +++ b/12.x/docs/api/queries.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/api/render.html b/12.x/docs/api/render.html index e92d76a1..31ad712b 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 d869d501..0a531665 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 6ced16ee..f19101e0 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 1d9b856b..876bdf1f 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 5d4cab5a..e05e2791 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 eae37809..88bfb1b3 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 49a65636..3cdd3ca3 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 7944c471..13a1af38 100644 --- a/12.x/docs/migration/previous/v11.html +++ b/12.x/docs/migration/previous/v11.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/migration/previous/v2.html b/12.x/docs/migration/previous/v2.html index f34b2e0f..284be53f 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 cc936a09..d55777b2 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 f886cce5..843873a9 100644 --- a/12.x/docs/migration/previous/v9.html +++ b/12.x/docs/migration/previous/v9.html @@ -9,7 +9,7 @@ - + diff --git a/12.x/docs/migration/v12.html b/12.x/docs/migration/v12.html index 4b92db10..e4bfe07d 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 09c2cee6..390275f9 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 10fdc181..6c22f33e 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 d464537d..072b50e8 100644 --- a/12.x/index.html +++ b/12.x/index.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/cookbook/advanced/network-requests.html b/14.x/cookbook/advanced/network-requests.html index f8af561d..24ebd940 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 61d2eaa7..67a34995 100644 --- a/14.x/cookbook/basics/async-events.html +++ b/14.x/cookbook/basics/async-events.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/cookbook/basics/custom-render.html b/14.x/cookbook/basics/custom-render.html index f067c143..126cafee 100644 --- a/14.x/cookbook/basics/custom-render.html +++ b/14.x/cookbook/basics/custom-render.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/cookbook/index.html b/14.x/cookbook/index.html index 1b4878a1..f0d9fa55 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 15874844..d88d4926 100644 --- a/14.x/cookbook/state-management/jotai.html +++ b/14.x/cookbook/state-management/jotai.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/docs/advanced/testing-env.html b/14.x/docs/advanced/testing-env.html index 7a65aec4..94004525 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 7e705712..53448445 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 95645f7f..375c96d4 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 d07cee34..0181c9ec 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 b7de9cb4..771ee502 100644 --- a/14.x/docs/api/events/fire-event.html +++ b/14.x/docs/api/events/fire-event.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/docs/api/events/user-event.html b/14.x/docs/api/events/user-event.html index 33f3b64b..7c8ed11e 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 1a0dd93f..49a35d26 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 ae67c50e..7e095e60 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 2e704222..7febea46 100644 --- a/14.x/docs/api/misc/async.html +++ b/14.x/docs/api/misc/async.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/docs/api/misc/config.html b/14.x/docs/api/misc/config.html index b5ebbc3b..08fc97d4 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 e7f2a4c0..5ccff645 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 a5a91a36..b0d189d6 100644 --- a/14.x/docs/api/misc/render-hook.html +++ b/14.x/docs/api/misc/render-hook.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/docs/api/queries.html b/14.x/docs/api/queries.html index 39a99aa0..4a391891 100644 --- a/14.x/docs/api/queries.html +++ b/14.x/docs/api/queries.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/docs/api/render.html b/14.x/docs/api/render.html index ada3b2d5..ef3b8dce 100644 --- a/14.x/docs/api/render.html +++ b/14.x/docs/api/render.html @@ -9,7 +9,7 @@ - + @@ -41,15 +41,12 @@

wrapper

wrapper?: React.ComponentType<any>,

Wraps the tested component in an additional wrapper component. Use this to create custom render functions for common React Context providers.

-

createNodeMock

-
createNodeMock?: (element: React.ReactElement) => object,
-

Passes createNodeMock to the renderer's create() method for custom mock refs. This option is passed through to Test Renderer.

Text string validation

Test Renderer enforces React Native's requirement that text strings must be rendered within a <Text> component. If you render a string value under components other than <Text> (e.g., under <View>), it throws an Invariant Violation: Text strings must be rendered within a <Text> component error. This matches React Native's runtime behavior.

This validation is always enabled and cannot be disabled. Your tests will catch the same text rendering errors that would occur in production.

Result

The render function returns a promise that resolves to the same queries and utilities as the screen object. Use screen for queries and the lifecycle methods from the render result when needed.

See this article from Kent C. Dodds for more details.

Type information

Query results and element references use the TestInstance type from Test Renderer. If you need to type element variables, import this type directly from test-renderer.

Need React or React Native -expertise you can count on?

Let's talk
+expertise you can count on?
Let's talk
diff --git a/14.x/docs/api/render.md b/14.x/docs/api/render.md index 5d46d73f..be9c2b6b 100644 --- a/14.x/docs/api/render.md +++ b/14.x/docs/api/render.md @@ -34,14 +34,6 @@ wrapper?: React.ComponentType, Wraps the tested component in an additional wrapper component. Use this to create custom render functions for common React Context providers. -#### `createNodeMock` \{#create-node-mock} - -```ts -createNodeMock?: (element: React.ReactElement) => object, -``` - -Passes `createNodeMock` to the renderer's `create()` method for custom mock refs. This option is passed through to [Test Renderer](https://github.com/mdjastrzebski/test-renderer). - :::note Text string validation Test Renderer enforces React Native's requirement that text strings must be rendered within a `` component. If you render a `string` value under components other than `` (e.g., under ``), it throws an `Invariant Violation: Text strings must be rendered within a component` error. This matches React Native's runtime behavior. diff --git a/14.x/docs/api/screen.html b/14.x/docs/api/screen.html index d453fcc0..8ff7f4a3 100644 --- a/14.x/docs/api/screen.html +++ b/14.x/docs/api/screen.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/docs/guides/common-mistakes.html b/14.x/docs/guides/common-mistakes.html index 564392e1..18ce1de8 100644 --- a/14.x/docs/guides/common-mistakes.html +++ b/14.x/docs/guides/common-mistakes.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/docs/guides/community-resources.html b/14.x/docs/guides/community-resources.html index 1c7ad0e3..1704beda 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 a839b0b4..656b5542 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 7e4d3a06..18c6433b 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 a2cf3a34..65602afa 100644 --- a/14.x/docs/guides/llm-guidelines.html +++ b/14.x/docs/guides/llm-guidelines.html @@ -9,7 +9,7 @@ - + @@ -25,7 +25,7 @@

Core APIs

render

const result = await render(<Component />, options?);
-
OptionDescription
wrapperReact component to wrap the rendered component (e.g., providers)
createNodeMockFunction to create mock refs
+
OptionDescription
wrapperReact component to wrap the rendered component (e.g., providers)
ReturnDescription
rerender(component)Re-render with a new component (async)
unmount()Unmount the rendered component (async)
toJSON()Get JSON representation for snapshots
debug(options?)Print the component tree to console
containerRoot host element of the rendered tree
rootFirst child host element (your component's root)

screen

Prefer screen over destructuring from render(). Provides all query methods after render() is called.

diff --git a/14.x/docs/guides/llm-guidelines.md b/14.x/docs/guides/llm-guidelines.md index 35c9942a..583ffe45 100644 --- a/14.x/docs/guides/llm-guidelines.md +++ b/14.x/docs/guides/llm-guidelines.md @@ -10,10 +10,9 @@ Actionable guidelines for writing tests with React Native Testing Library (RNTL) const result = await render(, options?); ``` -| Option | Description | -| ---------------- | ---------------------------------------------------------------- | -| `wrapper` | React component to wrap the rendered component (e.g., providers) | -| `createNodeMock` | Function to create mock refs | +| Option | Description | +| --------- | ---------------------------------------------------------------- | +| `wrapper` | React component to wrap the rendered component (e.g., providers) | | Return | Description | | --------------------- | ------------------------------------------------ | diff --git a/14.x/docs/guides/troubleshooting.html b/14.x/docs/guides/troubleshooting.html index d8347b10..510c178c 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 35c4fab0..2b659d73 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 a85b8565..5cb35c0f 100644 --- a/14.x/docs/start/migration-v14.html +++ b/14.x/docs/start/migration-v14.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/docs/start/quick-start.html b/14.x/docs/start/quick-start.html index ec33c608..5f5f3866 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 998696cf..8f516071 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 f6e05e82..cdf66df2 100644 --- a/14.x/llms-full.txt +++ b/14.x/llms-full.txt @@ -3091,14 +3091,6 @@ wrapper?: React.ComponentType, Wraps the tested component in an additional wrapper component. Use this to create custom render functions for common React Context providers. -#### `createNodeMock` \{#create-node-mock} - -```ts -createNodeMock?: (element: React.ReactElement) => object, -``` - -Passes `createNodeMock` to the renderer's `create()` method for custom mock refs. This option is passed through to [Test Renderer](https://github.com/mdjastrzebski/test-renderer). - :::note Text string validation Test Renderer enforces React Native's requirement that text strings must be rendered within a `` component. If you render a `string` value under components other than `` (e.g., under ``), it throws an `Invariant Violation: Text strings must be rendered within a component` error. This matches React Native's runtime behavior. @@ -4132,10 +4124,9 @@ Actionable guidelines for writing tests with React Native Testing Library (RNTL) const result = await render(, options?); ``` -| Option | Description | -| ---------------- | ---------------------------------------------------------------- | -| `wrapper` | React component to wrap the rendered component (e.g., providers) | -| `createNodeMock` | Function to create mock refs | +| Option | Description | +| --------- | ---------------------------------------------------------------- | +| `wrapper` | React component to wrap the rendered component (e.g., providers) | | Return | Description | | --------------------- | ------------------------------------------------ | diff --git a/404.html b/404.html index 70bfd257..77725223 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 bc98530e..5dadf2b3 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 16285477..2cedadd1 100644 --- a/cookbook/basics/async-tests.html +++ b/cookbook/basics/async-tests.html @@ -9,7 +9,7 @@ - + diff --git a/cookbook/basics/custom-render.html b/cookbook/basics/custom-render.html index 4c0a4310..41b3d49c 100644 --- a/cookbook/basics/custom-render.html +++ b/cookbook/basics/custom-render.html @@ -9,7 +9,7 @@ - + diff --git a/cookbook/index.html b/cookbook/index.html index 40fe3a7d..c26566a2 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 f30635a0..7725a82b 100644 --- a/cookbook/state-management/jotai.html +++ b/cookbook/state-management/jotai.html @@ -9,7 +9,7 @@ - + diff --git a/docs/advanced/testing-env.html b/docs/advanced/testing-env.html index d4cc5a4c..e38f83dd 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 b23d6b5b..0bf37bca 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 e8dd5999..41092b6e 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 3f232712..0f21c635 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 f339bdd8..030add0d 100644 --- a/docs/api/events/fire-event.html +++ b/docs/api/events/fire-event.html @@ -9,7 +9,7 @@ - + diff --git a/docs/api/events/user-event.html b/docs/api/events/user-event.html index a6d9162a..08cd058a 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 e7874944..a8309d77 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 f73248fa..3304692b 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 52f1e0ba..8cbc317e 100644 --- a/docs/api/misc/async.html +++ b/docs/api/misc/async.html @@ -9,7 +9,7 @@ - + diff --git a/docs/api/misc/config.html b/docs/api/misc/config.html index d53c8e33..fe0b27e3 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 d58f51b6..708f356b 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 2739a724..5b0485ee 100644 --- a/docs/api/misc/render-hook.html +++ b/docs/api/misc/render-hook.html @@ -9,7 +9,7 @@ - + diff --git a/docs/api/queries.html b/docs/api/queries.html index 8f5acc8b..dbe36f10 100644 --- a/docs/api/queries.html +++ b/docs/api/queries.html @@ -9,7 +9,7 @@ - + diff --git a/docs/api/render.html b/docs/api/render.html index e5df955c..d99c9c05 100644 --- a/docs/api/render.html +++ b/docs/api/render.html @@ -9,7 +9,7 @@ - + diff --git a/docs/api/screen.html b/docs/api/screen.html index 96c63598..8b3d9a83 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 183c3711..d10571af 100644 --- a/docs/guides/common-mistakes.html +++ b/docs/guides/common-mistakes.html @@ -9,7 +9,7 @@ - + diff --git a/docs/guides/community-resources.html b/docs/guides/community-resources.html index df4a8bf0..875b75ba 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 576c0fcd..1bdc8b38 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 028b7dc7..37993351 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 0bf0ac68..03082351 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 983dbb3a..4c1c1467 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 afcf7c5d..42f7f07a 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 b5116d03..c3eb80dc 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 366004f1..90eba95c 100644 --- a/docs/migration/previous/v11.html +++ b/docs/migration/previous/v11.html @@ -9,7 +9,7 @@ - + diff --git a/docs/migration/previous/v12.html b/docs/migration/previous/v12.html index 33fdbade..e2c76481 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 dcc5d123..75430164 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 a2a50ca4..9ce74795 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 0c23ba23..f258b823 100644 --- a/docs/migration/previous/v9.html +++ b/docs/migration/previous/v9.html @@ -9,7 +9,7 @@ - + diff --git a/docs/migration/v13.html b/docs/migration/v13.html index ffc36736..7c25a12c 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 6d3ca087..02ad04c6 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 cbe1480c..67f77e8a 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 af0cf2b5..9700aba8 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - + diff --git a/static/js/async/7515.5693e03abb.js b/static/js/async/7515.21bfaf1f22.js similarity index 66% rename from static/js/async/7515.5693e03abb.js rename to static/js/async/7515.21bfaf1f22.js index 3d6e5fb7..dd43bdcd 100644 --- a/static/js/async/7515.5693e03abb.js +++ b/static/js/async/7515.21bfaf1f22.js @@ -1 +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),o=s(8453),i=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,o.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)(r.h4,{id:"create-node-mock",children:[(0,n.jsx)(r.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#create-node-mock",children:"#"}),(0,n.jsx)(r.code,{children:"createNodeMock"})]}),"\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:"createNodeMock"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-keyword)"},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-keyword)"},children:"=>"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-foreground)"},children:" object"}),(0,n.jsx)(r.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]})})})}),"\n",(0,n.jsxs)(r.p,{children:["Passes ",(0,n.jsx)(r.code,{children:"createNodeMock"})," to the renderer's ",(0,n.jsx)(r.code,{children:"create()"})," method for custom mock refs. This option is passed through to ",(0,n.jsx)(r.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"}),"."]}),"\n",(0,n.jsxs)(i.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)(i.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,o.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:"create-node-mock",text:"`createNodeMock`",depth:4},{id:"result",text:"Result",depth:3}],title:"`render` API",headingTitle:"`render` API",frontmatter:{}}}}]); \ No newline at end of file +"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/9873.64bf349afa.js b/static/js/async/9873.64bf349afa.js new file mode 100644 index 00000000..6fbc4399 --- /dev/null +++ b/static/js/async/9873.64bf349afa.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["9873"],{6312(e,s,n){n.r(s),n.d(s,{default:()=>o});var r=n(4848),i=n(8453);function l(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",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:"llm-guidelines-for-react-native-testing-library",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#llm-guidelines-for-react-native-testing-library",children:"#"}),"LLM Guidelines for React Native Testing Library"]}),"\n",(0,r.jsx)(s.p,{children:"Actionable guidelines for writing tests with React Native Testing Library (RNTL) v14."}),"\n",(0,r.jsxs)(s.h2,{id:"core-apis",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#core-apis",children:"#"}),"Core APIs"]}),"\n",(0,r.jsxs)(s.h3,{id:"render",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render",children:"#"}),"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:"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:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(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-constant)"},children:"Component"}),(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:" 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.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Option"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsx)(s.tbody,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"wrapper"})}),(0,r.jsx)(s.td,{children:"React component to wrap the rendered component (e.g., providers)"})]})})]}),"\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:"Return"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"rerender(component)"})}),(0,r.jsx)(s.td,{children:"Re-render with a new component (async)"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"unmount()"})}),(0,r.jsx)(s.td,{children:"Unmount the rendered component (async)"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toJSON()"})}),(0,r.jsx)(s.td,{children:"Get JSON representation for snapshots"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"debug(options?)"})}),(0,r.jsx)(s.td,{children:"Print the component tree to console"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"container"})}),(0,r.jsx)(s.td,{children:"Root host element of the rendered tree"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"root"})}),(0,r.jsx)(s.td,{children:"First child host element (your component's root)"})]})]})]}),"\n",(0,r.jsxs)(s.h3,{id:"screen",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#screen",children:"#"}),"screen"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsxs)(s.strong,{children:["Prefer ",(0,r.jsx)(s.code,{children:"screen"})]})," over destructuring from ",(0,r.jsx)(s.code,{children:"render()"}),". Provides all query methods after ",(0,r.jsx)(s.code,{children:"render()"})," is called."]}),"\n",(0,r.jsx)(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:"Component"}),(0,r.jsx)(s.span,{style:{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:".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:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Access queries via screen"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"renderhook",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook",children:"#"}),"renderHook"]}),"\n",(0,r.jsx)(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:"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-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" unmount"}),(0,r.jsx)(s.span,{style:{color:"var(--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:"()"}),(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-foreground)"},children:");"})]})})})}),"\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:"Option"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"initialProps"})}),(0,r.jsx)(s.td,{children:"Initial props passed to the hook"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"wrapper"})}),(0,r.jsx)(s.td,{children:"React component to wrap the hook (e.g., providers)"})]})]})]}),"\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:"Return"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"result.current"})}),(0,r.jsx)(s.td,{children:"Current return value of the hook"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"rerender(props?)"})}),(0,r.jsx)(s.td,{children:"Re-render hook with new props (async)"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"unmount()"})}),(0,r.jsx)(s.td,{children:"Unmount the hook (async)"})]})]})]}),"\n",(0,r.jsxs)(s.h2,{id:"query-selection",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-selection",children:"#"}),"Query Selection"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Prefer ",(0,r.jsx)(s.code,{children:"getByRole"})]})," as first choice for querying elements"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Query priority"}),": ",(0,r.jsx)(s.code,{children:"getByRole"})," → ",(0,r.jsx)(s.code,{children:"getByLabelText"})," → ",(0,r.jsx)(s.code,{children:"getByPlaceholderText"})," → ",(0,r.jsx)(s.code,{children:"getByText"})," → ",(0,r.jsx)(s.code,{children:"getByDisplayValue"})," → ",(0,r.jsx)(s.code,{children:"getByTestId"})," (last resort)"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Use ",(0,r.jsx)(s.code,{children:"findBy*"})]})," for elements that appear asynchronously (after API calls, timeouts, state updates)"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Use ",(0,r.jsx)(s.code,{children:"queryBy*"})," ONLY"]})," for checking non-existence (with ",(0,r.jsx)(s.code,{children:".not.toBeOnTheScreen()"}),")"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Never use ",(0,r.jsx)(s.code,{children:"getBy*"})]})," for non-existence checks"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Avoid ",(0,r.jsx)(s.code,{children:"container.queryAll()"})]})," - use ",(0,r.jsx)(s.code,{children:"screen"})," queries instead"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Query by visible text"}),", not ",(0,r.jsx)(s.code,{children:"testID"})," when text is available"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"assertions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#assertions",children:"#"}),"Assertions"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Use RNTL matchers"})," - prefer semantic matchers over prop assertions"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Combine queries with matchers"}),": ",(0,r.jsx)(s.code,{children:"expect(screen.getByText('Hello')).toBeOnTheScreen()"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"No redundant null checks"})," - ",(0,r.jsx)(s.code,{children:"getBy*"})," already throws if not found"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"jest-matchers-reference",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#jest-matchers-reference",children:"#"}),"Jest Matchers Reference"]}),"\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:"Matcher"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeOnTheScreen()"})}),(0,r.jsx)(s.td,{children:"Element is present in the element tree"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeVisible()"})}),(0,r.jsxs)(s.td,{children:["Element is visible (checks style, ",(0,r.jsx)(s.code,{children:"aria-hidden"}),", ",(0,r.jsx)(s.code,{children:"accessibilityElementsHidden"}),", ancestors)"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeEmptyElement()"})}),(0,r.jsx)(s.td,{children:"Element has no children or text content"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toContainElement(element)"})}),(0,r.jsx)(s.td,{children:"Element contains another element"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeEnabled()"})}),(0,r.jsxs)(s.td,{children:["Element is not disabled (checks ",(0,r.jsx)(s.code,{children:"aria-disabled"}),", ",(0,r.jsx)(s.code,{children:"accessibilityState"}),", ancestors)"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeDisabled()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:"aria-disabled"})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ disabled: true }}"})," (checks ancestors)"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeBusy()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:"aria-busy"})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ busy: true }}"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeChecked()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:"aria-checked"})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ checked: true }}"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBePartiallyChecked()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:'aria-checked="mixed"'})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ checked: 'mixed' }}"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeSelected()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:"aria-selected"})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ selected: true }}"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeExpanded()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:"aria-expanded"})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ expanded: true }}"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeCollapsed()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:"aria-expanded={false}"})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ expanded: false }}"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toHaveTextContent(text)"})}),(0,r.jsx)(s.td,{children:"Element has matching text content"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toHaveDisplayValue(value)"})}),(0,r.jsx)(s.td,{children:"TextInput has matching display value"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toHaveAccessibleName(name?)"})}),(0,r.jsxs)(s.td,{children:["Element has matching ",(0,r.jsx)(s.code,{children:"aria-label"}),", ",(0,r.jsx)(s.code,{children:"accessibilityLabel"}),", or text content"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toHaveAccessibilityValue(value)"})}),(0,r.jsxs)(s.td,{children:["Element has matching ",(0,r.jsx)(s.code,{children:"aria-value*"})," or ",(0,r.jsx)(s.code,{children:"accessibilityValue"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toHaveStyle(style)"})}),(0,r.jsx)(s.td,{children:"Element has matching style"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toHaveProp(name, value?)"})}),(0,r.jsx)(s.td,{children:"Element has prop (use semantic matchers when possible)"})]})]})]}),"\n",(0,r.jsxs)(s.h2,{id:"user-interactions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#user-interactions",children:"#"}),"User Interactions"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsxs)(s.strong,{children:["Prefer ",(0,r.jsx)(s.code,{children:"userEvent"})]})," over ",(0,r.jsx)(s.code,{children:"fireEvent"})," for realistic user interaction simulation. ",(0,r.jsx)(s.code,{children:"userEvent"})," triggers the complete event sequence that real users would produce."]}),"\n",(0,r.jsxs)(s.h3,{id:"userevent-preferred",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#userevent-preferred",children:"#"}),"userEvent (Preferred)"]}),"\n",(0,r.jsx)(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:"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.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Method"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"user.press(element)"})}),(0,r.jsxs)(s.td,{children:["Press an element (triggers ",(0,r.jsx)(s.code,{children:"pressIn"}),", ",(0,r.jsx)(s.code,{children:"pressOut"}),", ",(0,r.jsx)(s.code,{children:"press"}),")"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"user.longPress(element, options?)"})}),(0,r.jsxs)(s.td,{children:["Long press with optional ",(0,r.jsx)(s.code,{children:"{ duration }"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"user.type(element, text, options?)"})}),(0,r.jsxs)(s.td,{children:["Type into TextInput (triggers ",(0,r.jsx)(s.code,{children:"focus"}),", ",(0,r.jsx)(s.code,{children:"keyPress"}),", ",(0,r.jsx)(s.code,{children:"change"}),", ",(0,r.jsx)(s.code,{children:"changeText"})," per char)"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"user.clear(element)"})}),(0,r.jsx)(s.td,{children:"Clear TextInput (select all + backspace)"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"user.paste(element, text)"})}),(0,r.jsx)(s.td,{children:"Paste text into TextInput"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"user.scrollTo(element, options)"})}),(0,r.jsxs)(s.td,{children:["Scroll a ScrollView with ",(0,r.jsx)(s.code,{children:"{ y }"})," or ",(0,r.jsx)(s.code,{children:"{ x }"})," offset"]})]})]})]}),"\n",(0,r.jsxs)(s.h3,{id:"fireevent-low-level",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fireevent-low-level",children:"#"}),"fireEvent (Low-level)"]}),"\n",(0,r.jsxs)(s.p,{children:["Use only when ",(0,r.jsx)(s.code,{children:"userEvent"})," doesn't support the event or when you need direct control."]}),"\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:"Method"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"fireEvent(element, eventName, ...data)"})}),(0,r.jsx)(s.td,{children:"Fire any event by name"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"fireEvent.press(element)"})}),(0,r.jsxs)(s.td,{children:["Fire ",(0,r.jsx)(s.code,{children:"onPress"})," only (no ",(0,r.jsx)(s.code,{children:"pressIn"}),"/",(0,r.jsx)(s.code,{children:"pressOut"}),")"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"fireEvent.changeText(element, text)"})}),(0,r.jsxs)(s.td,{children:["Fire ",(0,r.jsx)(s.code,{children:"onChangeText"})," directly"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"fireEvent.scroll(element, eventData)"})}),(0,r.jsxs)(s.td,{children:["Fire ",(0,r.jsx)(s.code,{children:"onScroll"})," with event data"]})]})]})]}),"\n",(0,r.jsxs)(s.h2,{id:"asyncawait-v14",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#asyncawait-v14",children:"#"}),"Async/Await (v14)"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Always ",(0,r.jsx)(s.code,{children:"await"})]}),": ",(0,r.jsx)(s.code,{children:"render()"}),", ",(0,r.jsx)(s.code,{children:"fireEvent.*"}),", ",(0,r.jsx)(s.code,{children:"renderHook()"}),", ",(0,r.jsx)(s.code,{children:"userEvent.*"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Make test functions ",(0,r.jsx)(s.code,{children:"async"})]}),": ",(0,r.jsx)(s.code,{children:"test('name', async () => { ... })"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Don't wrap in ",(0,r.jsx)(s.code,{children:"act()"})]})," - ",(0,r.jsx)(s.code,{children:"render"})," and ",(0,r.jsx)(s.code,{children:"fireEvent"})," handle it internally"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"waitfor-usage",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor-usage",children:"#"}),"waitFor Usage"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Use ",(0,r.jsx)(s.code,{children:"findBy*"})]})," instead of ",(0,r.jsx)(s.code,{children:"waitFor"})," + ",(0,r.jsx)(s.code,{children:"getBy*"})," when waiting for elements"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Never perform side-effects"})," (like ",(0,r.jsx)(s.code,{children:"fireEvent.press()"}),") inside ",(0,r.jsx)(s.code,{children:"waitFor"})," callbacks"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["One assertion per ",(0,r.jsx)(s.code,{children:"waitFor"})]})," callback"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Never pass empty callbacks"})," - always include a meaningful assertion"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Place side-effects before ",(0,r.jsx)(s.code,{children:"waitFor"})]})," - perform actions, then wait for result"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"code-organization",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#code-organization",children:"#"}),"Code Organization"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Use ",(0,r.jsx)(s.code,{children:"screen"})]})," instead of destructuring from ",(0,r.jsx)(s.code,{children:"render()"}),": ",(0,r.jsx)(s.code,{children:"screen.getByText()"})," not ",(0,r.jsx)(s.code,{children:"const { getByText } = render()"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Prefer ",(0,r.jsx)(s.code,{children:"userEvent"})]})," over ",(0,r.jsx)(s.code,{children:"fireEvent"})," for realistic interactions"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Don't use ",(0,r.jsx)(s.code,{children:"cleanup()"})]})," - handled automatically"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Name wrappers descriptively"}),": ",(0,r.jsx)(s.code,{children:"ThemeProvider"})," not ",(0,r.jsx)(s.code,{children:"Wrapper"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Install ESLint plugin"}),": ",(0,r.jsx)(s.code,{children:"eslint-plugin-testing-library"})]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"quick-checklist",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#quick-checklist",children:"#"}),"Quick Checklist"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["✅ Using ",(0,r.jsx)(s.code,{children:"getByRole"})," as first choice?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Using ",(0,r.jsx)(s.code,{children:"await"})," for all async operations?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Using ",(0,r.jsx)(s.code,{children:"findBy*"})," for async elements (not ",(0,r.jsx)(s.code,{children:"waitFor"})," + ",(0,r.jsx)(s.code,{children:"getBy*"}),")?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Using ",(0,r.jsx)(s.code,{children:"queryBy*"})," only for non-existence?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Using RNTL matchers (",(0,r.jsx)(s.code,{children:"toBeOnTheScreen()"}),", ",(0,r.jsx)(s.code,{children:"toBeDisabled()"}),", etc.)?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Using ",(0,r.jsx)(s.code,{children:"screen"})," not destructuring from ",(0,r.jsx)(s.code,{children:"render()"}),"?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Avoiding side-effects in ",(0,r.jsx)(s.code,{children:"waitFor"}),"?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Using ",(0,r.jsx)(s.code,{children:"userEvent"})," when appropriate?"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"example-good-pattern",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-good-pattern",children:"#"}),"Example: Good Pattern"]}),"\n",(0,r.jsx)(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.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:" userEvent "}),(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.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:" { Pressable"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},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:" TextInput"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(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-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:"'user can submit form'"}),(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-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.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-function)"},children:" Component"}),(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-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:"name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" setName"}),(0,r.jsx)(s.span,{style:{color:"var(--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:" React"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(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-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:"submitted"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" setSubmitted"}),(0,r.jsx)(s.span,{style:{color:"var(--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:" React"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},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.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:" 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-constant)"},children:"View"}),(0,r.jsx)(s.span,{style:{color:"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:"TextInput"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(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:'"textbox"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(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:'"Name"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},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:"{name} "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"onChangeText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{setName} />"})]}),"\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:" role"}),(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:" aria-label"}),(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:'"Submit"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(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:" setSubmitted"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},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-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Submit"})]}),"\n",(0,r.jsxs)(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:" {submitted "}),(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-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(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:'"alert"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Form submitted!}"})]}),"\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.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-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:"Component"}),(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:" // ✅ getByRole as first choice"})}),"\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:".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:"'textbox'"}),(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:" 'Name'"}),(0,r.jsx)(s.span,{style:{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:" button"}),(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:" 'Submit'"}),(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:" // ✅ userEvent for realistic interactions"})}),"\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:"(input"}),(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:" 'John Doe'"}),(0,r.jsx)(s.span,{style:{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:"(button);"})]}),"\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:" // ✅ findBy* for async elements"})}),"\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:" successMessage"}),(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:"'alert'"}),(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:" // ✅ RNTL matchers"})}),"\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:"(successMessage)"}),(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:"(successMessage)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveTextContent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Form submitted!'"}),(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:"example-anti-patterns",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-anti-patterns",children:"#"}),"Example: Anti-Patterns"]}),"\n",(0,r.jsx)(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:"// ❌ Missing await"})}),"\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:"'bad'"}),(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-constant)"},children:"Component"}),(0,r.jsx)(s.span,{style:{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:"'Submit'"}),(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:"// ❌ getBy* for non-existence"})}),"\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:"'Error'"}),(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:"// ❌ waitFor + getBy* instead of findBy*"})}),"\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:"("}),(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:"'Loaded'"}),(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.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ Side-effect in waitFor"})}),"\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:"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-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:"(button);"})]}),"\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:"'Result'"}),(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.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ accessibility* props instead of ARIA"})}),"\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:" accessibilityLabel"}),(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:'"Submit"'}),(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:"// ❌ Destructuring from render"})}),"\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:"getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--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-constant)"},children:"Component"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]})]})})}),"\n",(0,r.jsx)(s.p,{children:"By following these guidelines, your tests will be more maintainable, accessible, and reliable."})]})}function o(){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)}o.__RSPRESS_PAGE_META={},o.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fguides%2Fllm-guidelines.mdx"]={toc:[{id:"core-apis",text:"Core APIs",depth:2},{id:"render",text:"render",depth:3},{id:"screen",text:"screen",depth:3},{id:"renderhook",text:"renderHook",depth:3},{id:"query-selection",text:"Query Selection",depth:2},{id:"assertions",text:"Assertions",depth:2},{id:"jest-matchers-reference",text:"Jest Matchers Reference",depth:2},{id:"user-interactions",text:"User Interactions",depth:2},{id:"userevent-preferred",text:"userEvent (Preferred)",depth:3},{id:"fireevent-low-level",text:"fireEvent (Low-level)",depth:3},{id:"asyncawait-v14",text:"Async/Await (v14)",depth:2},{id:"waitfor-usage",text:"waitFor Usage",depth:2},{id:"code-organization",text:"Code Organization",depth:2},{id:"quick-checklist",text:"Quick Checklist",depth:2},{id:"example-good-pattern",text:"Example: Good Pattern",depth:2},{id:"example-anti-patterns",text:"Example: Anti-Patterns",depth:2}],title:"LLM Guidelines for React Native Testing Library",headingTitle:"LLM Guidelines for React Native Testing Library",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/9873.b498f69db5.js b/static/js/async/9873.b498f69db5.js deleted file mode 100644 index 15398de6..00000000 --- a/static/js/async/9873.b498f69db5.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["9873"],{6312(e,s,n){n.r(s),n.d(s,{default:()=>o});var r=n(4848),i=n(8453);function l(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",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:"llm-guidelines-for-react-native-testing-library",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#llm-guidelines-for-react-native-testing-library",children:"#"}),"LLM Guidelines for React Native Testing Library"]}),"\n",(0,r.jsx)(s.p,{children:"Actionable guidelines for writing tests with React Native Testing Library (RNTL) v14."}),"\n",(0,r.jsxs)(s.h2,{id:"core-apis",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#core-apis",children:"#"}),"Core APIs"]}),"\n",(0,r.jsxs)(s.h3,{id:"render",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render",children:"#"}),"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:"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:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" result"}),(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-constant)"},children:"Component"}),(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:" 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.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Option"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"wrapper"})}),(0,r.jsx)(s.td,{children:"React component to wrap the rendered component (e.g., providers)"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"createNodeMock"})}),(0,r.jsx)(s.td,{children:"Function to create mock refs"})]})]})]}),"\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:"Return"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"rerender(component)"})}),(0,r.jsx)(s.td,{children:"Re-render with a new component (async)"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"unmount()"})}),(0,r.jsx)(s.td,{children:"Unmount the rendered component (async)"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toJSON()"})}),(0,r.jsx)(s.td,{children:"Get JSON representation for snapshots"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"debug(options?)"})}),(0,r.jsx)(s.td,{children:"Print the component tree to console"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"container"})}),(0,r.jsx)(s.td,{children:"Root host element of the rendered tree"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"root"})}),(0,r.jsx)(s.td,{children:"First child host element (your component's root)"})]})]})]}),"\n",(0,r.jsxs)(s.h3,{id:"screen",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#screen",children:"#"}),"screen"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsxs)(s.strong,{children:["Prefer ",(0,r.jsx)(s.code,{children:"screen"})]})," over destructuring from ",(0,r.jsx)(s.code,{children:"render()"}),". Provides all query methods after ",(0,r.jsx)(s.code,{children:"render()"})," is called."]}),"\n",(0,r.jsx)(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:"Component"}),(0,r.jsx)(s.span,{style:{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:".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:"); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Access queries via screen"})]})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"renderhook",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook",children:"#"}),"renderHook"]}),"\n",(0,r.jsx)(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:"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-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" unmount"}),(0,r.jsx)(s.span,{style:{color:"var(--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:"()"}),(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-foreground)"},children:");"})]})})})}),"\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:"Option"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"initialProps"})}),(0,r.jsx)(s.td,{children:"Initial props passed to the hook"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"wrapper"})}),(0,r.jsx)(s.td,{children:"React component to wrap the hook (e.g., providers)"})]})]})]}),"\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:"Return"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"result.current"})}),(0,r.jsx)(s.td,{children:"Current return value of the hook"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"rerender(props?)"})}),(0,r.jsx)(s.td,{children:"Re-render hook with new props (async)"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"unmount()"})}),(0,r.jsx)(s.td,{children:"Unmount the hook (async)"})]})]})]}),"\n",(0,r.jsxs)(s.h2,{id:"query-selection",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#query-selection",children:"#"}),"Query Selection"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Prefer ",(0,r.jsx)(s.code,{children:"getByRole"})]})," as first choice for querying elements"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Query priority"}),": ",(0,r.jsx)(s.code,{children:"getByRole"})," → ",(0,r.jsx)(s.code,{children:"getByLabelText"})," → ",(0,r.jsx)(s.code,{children:"getByPlaceholderText"})," → ",(0,r.jsx)(s.code,{children:"getByText"})," → ",(0,r.jsx)(s.code,{children:"getByDisplayValue"})," → ",(0,r.jsx)(s.code,{children:"getByTestId"})," (last resort)"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Use ",(0,r.jsx)(s.code,{children:"findBy*"})]})," for elements that appear asynchronously (after API calls, timeouts, state updates)"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Use ",(0,r.jsx)(s.code,{children:"queryBy*"})," ONLY"]})," for checking non-existence (with ",(0,r.jsx)(s.code,{children:".not.toBeOnTheScreen()"}),")"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Never use ",(0,r.jsx)(s.code,{children:"getBy*"})]})," for non-existence checks"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Avoid ",(0,r.jsx)(s.code,{children:"container.queryAll()"})]})," - use ",(0,r.jsx)(s.code,{children:"screen"})," queries instead"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Query by visible text"}),", not ",(0,r.jsx)(s.code,{children:"testID"})," when text is available"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"assertions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#assertions",children:"#"}),"Assertions"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Use RNTL matchers"})," - prefer semantic matchers over prop assertions"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Combine queries with matchers"}),": ",(0,r.jsx)(s.code,{children:"expect(screen.getByText('Hello')).toBeOnTheScreen()"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"No redundant null checks"})," - ",(0,r.jsx)(s.code,{children:"getBy*"})," already throws if not found"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"jest-matchers-reference",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#jest-matchers-reference",children:"#"}),"Jest Matchers Reference"]}),"\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:"Matcher"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeOnTheScreen()"})}),(0,r.jsx)(s.td,{children:"Element is present in the element tree"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeVisible()"})}),(0,r.jsxs)(s.td,{children:["Element is visible (checks style, ",(0,r.jsx)(s.code,{children:"aria-hidden"}),", ",(0,r.jsx)(s.code,{children:"accessibilityElementsHidden"}),", ancestors)"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeEmptyElement()"})}),(0,r.jsx)(s.td,{children:"Element has no children or text content"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toContainElement(element)"})}),(0,r.jsx)(s.td,{children:"Element contains another element"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeEnabled()"})}),(0,r.jsxs)(s.td,{children:["Element is not disabled (checks ",(0,r.jsx)(s.code,{children:"aria-disabled"}),", ",(0,r.jsx)(s.code,{children:"accessibilityState"}),", ancestors)"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeDisabled()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:"aria-disabled"})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ disabled: true }}"})," (checks ancestors)"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeBusy()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:"aria-busy"})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ busy: true }}"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeChecked()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:"aria-checked"})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ checked: true }}"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBePartiallyChecked()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:'aria-checked="mixed"'})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ checked: 'mixed' }}"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeSelected()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:"aria-selected"})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ selected: true }}"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeExpanded()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:"aria-expanded"})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ expanded: true }}"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toBeCollapsed()"})}),(0,r.jsxs)(s.td,{children:["Element has ",(0,r.jsx)(s.code,{children:"aria-expanded={false}"})," or ",(0,r.jsx)(s.code,{children:"accessibilityState={{ expanded: false }}"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toHaveTextContent(text)"})}),(0,r.jsx)(s.td,{children:"Element has matching text content"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toHaveDisplayValue(value)"})}),(0,r.jsx)(s.td,{children:"TextInput has matching display value"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toHaveAccessibleName(name?)"})}),(0,r.jsxs)(s.td,{children:["Element has matching ",(0,r.jsx)(s.code,{children:"aria-label"}),", ",(0,r.jsx)(s.code,{children:"accessibilityLabel"}),", or text content"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toHaveAccessibilityValue(value)"})}),(0,r.jsxs)(s.td,{children:["Element has matching ",(0,r.jsx)(s.code,{children:"aria-value*"})," or ",(0,r.jsx)(s.code,{children:"accessibilityValue"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toHaveStyle(style)"})}),(0,r.jsx)(s.td,{children:"Element has matching style"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"toHaveProp(name, value?)"})}),(0,r.jsx)(s.td,{children:"Element has prop (use semantic matchers when possible)"})]})]})]}),"\n",(0,r.jsxs)(s.h2,{id:"user-interactions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#user-interactions",children:"#"}),"User Interactions"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsxs)(s.strong,{children:["Prefer ",(0,r.jsx)(s.code,{children:"userEvent"})]})," over ",(0,r.jsx)(s.code,{children:"fireEvent"})," for realistic user interaction simulation. ",(0,r.jsx)(s.code,{children:"userEvent"})," triggers the complete event sequence that real users would produce."]}),"\n",(0,r.jsxs)(s.h3,{id:"userevent-preferred",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#userevent-preferred",children:"#"}),"userEvent (Preferred)"]}),"\n",(0,r.jsx)(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:"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.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"Method"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"user.press(element)"})}),(0,r.jsxs)(s.td,{children:["Press an element (triggers ",(0,r.jsx)(s.code,{children:"pressIn"}),", ",(0,r.jsx)(s.code,{children:"pressOut"}),", ",(0,r.jsx)(s.code,{children:"press"}),")"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"user.longPress(element, options?)"})}),(0,r.jsxs)(s.td,{children:["Long press with optional ",(0,r.jsx)(s.code,{children:"{ duration }"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"user.type(element, text, options?)"})}),(0,r.jsxs)(s.td,{children:["Type into TextInput (triggers ",(0,r.jsx)(s.code,{children:"focus"}),", ",(0,r.jsx)(s.code,{children:"keyPress"}),", ",(0,r.jsx)(s.code,{children:"change"}),", ",(0,r.jsx)(s.code,{children:"changeText"})," per char)"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"user.clear(element)"})}),(0,r.jsx)(s.td,{children:"Clear TextInput (select all + backspace)"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"user.paste(element, text)"})}),(0,r.jsx)(s.td,{children:"Paste text into TextInput"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"user.scrollTo(element, options)"})}),(0,r.jsxs)(s.td,{children:["Scroll a ScrollView with ",(0,r.jsx)(s.code,{children:"{ y }"})," or ",(0,r.jsx)(s.code,{children:"{ x }"})," offset"]})]})]})]}),"\n",(0,r.jsxs)(s.h3,{id:"fireevent-low-level",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fireevent-low-level",children:"#"}),"fireEvent (Low-level)"]}),"\n",(0,r.jsxs)(s.p,{children:["Use only when ",(0,r.jsx)(s.code,{children:"userEvent"})," doesn't support the event or when you need direct control."]}),"\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:"Method"}),(0,r.jsx)(s.th,{children:"Description"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"fireEvent(element, eventName, ...data)"})}),(0,r.jsx)(s.td,{children:"Fire any event by name"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"fireEvent.press(element)"})}),(0,r.jsxs)(s.td,{children:["Fire ",(0,r.jsx)(s.code,{children:"onPress"})," only (no ",(0,r.jsx)(s.code,{children:"pressIn"}),"/",(0,r.jsx)(s.code,{children:"pressOut"}),")"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"fireEvent.changeText(element, text)"})}),(0,r.jsxs)(s.td,{children:["Fire ",(0,r.jsx)(s.code,{children:"onChangeText"})," directly"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"fireEvent.scroll(element, eventData)"})}),(0,r.jsxs)(s.td,{children:["Fire ",(0,r.jsx)(s.code,{children:"onScroll"})," with event data"]})]})]})]}),"\n",(0,r.jsxs)(s.h2,{id:"asyncawait-v14",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#asyncawait-v14",children:"#"}),"Async/Await (v14)"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Always ",(0,r.jsx)(s.code,{children:"await"})]}),": ",(0,r.jsx)(s.code,{children:"render()"}),", ",(0,r.jsx)(s.code,{children:"fireEvent.*"}),", ",(0,r.jsx)(s.code,{children:"renderHook()"}),", ",(0,r.jsx)(s.code,{children:"userEvent.*"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Make test functions ",(0,r.jsx)(s.code,{children:"async"})]}),": ",(0,r.jsx)(s.code,{children:"test('name', async () => { ... })"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Don't wrap in ",(0,r.jsx)(s.code,{children:"act()"})]})," - ",(0,r.jsx)(s.code,{children:"render"})," and ",(0,r.jsx)(s.code,{children:"fireEvent"})," handle it internally"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"waitfor-usage",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#waitfor-usage",children:"#"}),"waitFor Usage"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Use ",(0,r.jsx)(s.code,{children:"findBy*"})]})," instead of ",(0,r.jsx)(s.code,{children:"waitFor"})," + ",(0,r.jsx)(s.code,{children:"getBy*"})," when waiting for elements"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Never perform side-effects"})," (like ",(0,r.jsx)(s.code,{children:"fireEvent.press()"}),") inside ",(0,r.jsx)(s.code,{children:"waitFor"})," callbacks"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["One assertion per ",(0,r.jsx)(s.code,{children:"waitFor"})]})," callback"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Never pass empty callbacks"})," - always include a meaningful assertion"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Place side-effects before ",(0,r.jsx)(s.code,{children:"waitFor"})]})," - perform actions, then wait for result"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"code-organization",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#code-organization",children:"#"}),"Code Organization"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Use ",(0,r.jsx)(s.code,{children:"screen"})]})," instead of destructuring from ",(0,r.jsx)(s.code,{children:"render()"}),": ",(0,r.jsx)(s.code,{children:"screen.getByText()"})," not ",(0,r.jsx)(s.code,{children:"const { getByText } = render()"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Prefer ",(0,r.jsx)(s.code,{children:"userEvent"})]})," over ",(0,r.jsx)(s.code,{children:"fireEvent"})," for realistic interactions"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsxs)(s.strong,{children:["Don't use ",(0,r.jsx)(s.code,{children:"cleanup()"})]})," - handled automatically"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Name wrappers descriptively"}),": ",(0,r.jsx)(s.code,{children:"ThemeProvider"})," not ",(0,r.jsx)(s.code,{children:"Wrapper"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.strong,{children:"Install ESLint plugin"}),": ",(0,r.jsx)(s.code,{children:"eslint-plugin-testing-library"})]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"quick-checklist",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#quick-checklist",children:"#"}),"Quick Checklist"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["✅ Using ",(0,r.jsx)(s.code,{children:"getByRole"})," as first choice?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Using ",(0,r.jsx)(s.code,{children:"await"})," for all async operations?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Using ",(0,r.jsx)(s.code,{children:"findBy*"})," for async elements (not ",(0,r.jsx)(s.code,{children:"waitFor"})," + ",(0,r.jsx)(s.code,{children:"getBy*"}),")?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Using ",(0,r.jsx)(s.code,{children:"queryBy*"})," only for non-existence?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Using RNTL matchers (",(0,r.jsx)(s.code,{children:"toBeOnTheScreen()"}),", ",(0,r.jsx)(s.code,{children:"toBeDisabled()"}),", etc.)?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Using ",(0,r.jsx)(s.code,{children:"screen"})," not destructuring from ",(0,r.jsx)(s.code,{children:"render()"}),"?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Avoiding side-effects in ",(0,r.jsx)(s.code,{children:"waitFor"}),"?"]}),"\n",(0,r.jsxs)(s.li,{children:["✅ Using ",(0,r.jsx)(s.code,{children:"userEvent"})," when appropriate?"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"example-good-pattern",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-good-pattern",children:"#"}),"Example: Good Pattern"]}),"\n",(0,r.jsx)(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.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:" userEvent "}),(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.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:" { Pressable"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},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:" TextInput"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" View } "}),(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-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:"'user can submit form'"}),(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-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.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-function)"},children:" Component"}),(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-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:"name"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" setName"}),(0,r.jsx)(s.span,{style:{color:"var(--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:" React"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(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-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:"submitted"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" setSubmitted"}),(0,r.jsx)(s.span,{style:{color:"var(--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:" React"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".useState"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},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.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:" 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-constant)"},children:"View"}),(0,r.jsx)(s.span,{style:{color:"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:"TextInput"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(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:'"textbox"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" aria-label"}),(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:'"Name"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},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:"{name} "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"onChangeText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"{setName} />"})]}),"\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:" role"}),(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:" aria-label"}),(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:'"Submit"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" onPress"}),(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:" setSubmitted"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},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-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Submit"})]}),"\n",(0,r.jsxs)(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:" {submitted "}),(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-constant)"},children:"Text"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" role"}),(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:'"alert"'}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:">Form submitted!}"})]}),"\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.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-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:"Component"}),(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:" // ✅ getByRole as first choice"})}),"\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:".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:"'textbox'"}),(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:" 'Name'"}),(0,r.jsx)(s.span,{style:{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:" button"}),(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:" 'Submit'"}),(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:" // ✅ userEvent for realistic interactions"})}),"\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:"(input"}),(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:" 'John Doe'"}),(0,r.jsx)(s.span,{style:{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:"(button);"})]}),"\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:" // ✅ findBy* for async elements"})}),"\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:" successMessage"}),(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:"'alert'"}),(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:" // ✅ RNTL matchers"})}),"\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:"(successMessage)"}),(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:"(successMessage)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveTextContent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Form submitted!'"}),(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:"example-anti-patterns",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#example-anti-patterns",children:"#"}),"Example: Anti-Patterns"]}),"\n",(0,r.jsx)(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:"// ❌ Missing await"})}),"\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:"'bad'"}),(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-constant)"},children:"Component"}),(0,r.jsx)(s.span,{style:{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:"'Submit'"}),(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:"// ❌ getBy* for non-existence"})}),"\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:"'Error'"}),(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:"// ❌ waitFor + getBy* instead of findBy*"})}),"\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:"("}),(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:"'Loaded'"}),(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.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ Side-effect in waitFor"})}),"\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:"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-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:"(button);"})]}),"\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:"'Result'"}),(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.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// ❌ accessibility* props instead of ARIA"})}),"\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:" accessibilityLabel"}),(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:'"Submit"'}),(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:"// ❌ Destructuring from render"})}),"\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:"getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--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-constant)"},children:"Component"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]})]})})}),"\n",(0,r.jsx)(s.p,{children:"By following these guidelines, your tests will be more maintainable, accessible, and reliable."})]})}function o(){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)}o.__RSPRESS_PAGE_META={},o.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fguides%2Fllm-guidelines.mdx"]={toc:[{id:"core-apis",text:"Core APIs",depth:2},{id:"render",text:"render",depth:3},{id:"screen",text:"screen",depth:3},{id:"renderhook",text:"renderHook",depth:3},{id:"query-selection",text:"Query Selection",depth:2},{id:"assertions",text:"Assertions",depth:2},{id:"jest-matchers-reference",text:"Jest Matchers Reference",depth:2},{id:"user-interactions",text:"User Interactions",depth:2},{id:"userevent-preferred",text:"userEvent (Preferred)",depth:3},{id:"fireevent-low-level",text:"fireEvent (Low-level)",depth:3},{id:"asyncawait-v14",text:"Async/Await (v14)",depth:2},{id:"waitfor-usage",text:"waitFor Usage",depth:2},{id:"code-organization",text:"Code Organization",depth:2},{id:"quick-checklist",text:"Quick Checklist",depth:2},{id:"example-good-pattern",text:"Example: Good Pattern",depth:2},{id:"example-anti-patterns",text:"Example: Anti-Patterns",depth:2}],title:"LLM Guidelines for React Native Testing Library",headingTitle:"LLM Guidelines for React Native Testing Library",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/index.7cf6d41c52.js b/static/js/index.e80e76985d.js similarity index 62% rename from static/js/index.7cf6d41c52.js rename to static/js/index.e80e76985d.js index 9aa3b9fb..4edaaabe 100644 --- a/static/js/index.7cf6d41c52.js +++ b/static/js/index.e80e76985d.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, wait, 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:1868},{id:"change-text",text:"`fireEvent.changeText`",depth:3,charIndex:2556},{id:"scroll",text:"`fireEvent.scroll`",depth:3,charIndex:3217},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4,charIndex:3610}],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:4445}],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:8787},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3,charIndex:9353},{id:"by-text",text:"`*ByText`",depth:3,charIndex:9893},{id:"by-hint-text",text:"`*ByHintText`",depth:3,charIndex:10566},{id:"by-test-id",text:"`*ByTestId`",depth:3,charIndex:11368},{id:"common-options",text:"Common options",depth:3,charIndex:12192},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4,charIndex:12448},{id:"textmatch-type",text:"TextMatch type",depth:2,charIndex:13347},{id:"examples",text:"Examples",depth:3,charIndex:13513},{id:"text-match-options",text:"Options",depth:3,charIndex:14323},{id:"precision",text:"Precision",depth:4,charIndex:14354},{id:"normalization",text:"Normalization",depth:4,charIndex:15200}],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:"create-node-mock",text:"`createNodeMock`",depth:4,charIndex:1130},{id:"result",text:"Result",depth:3,charIndex:1875}],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:628},{id:"renderhook",text:"renderHook",depth:3,charIndex:825},{id:"query-selection",text:"Query Selection",depth:2,charIndex:1206},{id:"assertions",text:"Assertions",depth:2,charIndex:1736},{id:"jest-matchers-reference",text:"Jest Matchers Reference",depth:2,charIndex:1962},{id:"user-interactions",text:"User Interactions",depth:2,charIndex:3426},{id:"userevent-preferred",text:"userEvent (Preferred)",depth:3,charIndex:3599},{id:"fireevent-low-level",text:"fireEvent (Low-level)",depth:3,charIndex:4123},{id:"asyncawait-v14",text:"Async/Await (v14)",depth:2,charIndex:4507},{id:"waitfor-usage",text:"waitFor Usage",depth:2,charIndex:4717},{id:"code-organization",text:"Code Organization",depth:2,charIndex:5056},{id:"quick-checklist",text:"Quick Checklist",depth:2,charIndex:5396},{id:"example-good-pattern",text:"Example: Good Pattern",depth:2,charIndex:5781},{id:"example-anti-patterns",text:"Example: Anti-Patterns",depth:2,charIndex:6901}],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:164},{id:"this-solution",text:"This solution",depth:2,charIndex:638},{id:"example",text:"Example",depth:2,charIndex:1145}],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:262},{id:"quick-migration",text:"Quick Migration",depth:2,charIndex:854},{id:"breaking-changes",text:"Breaking Changes",depth:2,charIndex:1719},{id:"supported-react-react-native-and-nodejs-versions",text:"Supported React, React Native, and Node.js versions",depth:3,charIndex:1737},{id:"test-renderer-replaces-react-test-renderer",text:"Test Renderer replaces React Test Renderer",depth:3,charIndex:2080},{id:"recommended-test-renderer-versions",text:"Recommended Test Renderer versions",depth:4,charIndex:2699},{id:"1-update-dependencies",text:"1. Update dependencies",depth:4,charIndex:3397},{id:"2-update-type-imports-if-needed",text:"2. Update type imports (if needed)",depth:4,charIndex:4493},{id:"async-apis-by-default",text:"Async APIs by Default",depth:3,charIndex:4838},{id:"render-async-default",text:"`render` is now async",depth:4,charIndex:5550},{id:"renderhook-is-now-async",text:"`renderHook` is now async",depth:4,charIndex:6051},{id:"fireevent-is-now-async",text:"`fireEvent` is now async",depth:4,charIndex:6499},{id:"act-is-now-async",text:"`act` is now async",depth:4,charIndex:7562},{id:"why-async-apis",text:"Why async APIs?",depth:4,charIndex:8385},{id:"removed-apis",text:"Removed APIs",depth:3,charIndex:8590},{id:"update-alias-removed",text:"`update` alias removed",depth:4,charIndex:8604},{id:"getqueriesforelement-export-removed",text:"`getQueriesForElement` export removed",depth:4,charIndex:8972},{id:"unsafe_root-removed",text:"`UNSAFE_root` removed",depth:4,charIndex:9341},{id:"legacy-unsafe_-queries-removed",text:"Legacy `UNSAFE_*` queries removed",depth:4,charIndex:9691},{id:"concurrentroot-option-removed",text:"`concurrentRoot` option removed",depth:4,charIndex:10422},{id:"createnodemock-option-removed",text:"`createNodeMock` option removed",depth:4,charIndex:11282},{id:"container-api-reintroduced",text:"`container` API reintroduced",depth:3,charIndex:11900},{id:"text-string-validation-enforced-by-default",text:"Text string validation enforced by default",depth:3,charIndex:12942},{id:"hidden-suspense-and-activity-content",text:"Hidden Suspense and Activity content",depth:3,charIndex:14202},{id:"accessible-name-changes",text:"Accessible name changes",depth:3,charIndex:14800},{id:"unknown-options-now-warn",text:"Unknown options now warn",depth:3,charIndex:15587},{id:"codemods",text:"Codemods",depth:2,charIndex:15982},{id:"rntl-v14-update-deps",text:"`rntl-v14-update-deps`",depth:3,charIndex:16141},{id:"rntl-v14-async-functions",text:"`rntl-v14-async-functions`",depth:3,charIndex:16747},{id:"custom-render-functions",text:"Custom render functions",depth:4,charIndex:17287},{id:"limitations",text:"Limitations",depth:4,charIndex:18280},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:18418}],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:164},{id:"jest-matchers",text:"Jest matchers",depth:3,charIndex:879},{id:"eslint-plugin",text:"ESLint plugin",depth:3,charIndex:1111}],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":"f62932b1"}},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))),b=(0,a.YZ)(()=>n.e("1304").then(n.bind(n,9867))),f=(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))),eb=(0,a.YZ)(()=>n.e("7863").then(n.bind(n,3258))),ef=(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(b),filePath:"12.x/docs/api/misc/other.mdx",preload:async()=>(await b.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(f),filePath:"12.x/docs/api/misc/render-hook.mdx",preload:async()=>(await f.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(eb),filePath:"13.x/index.md",preload:async()=>(await eb.preload(),n.e("7863").then(n.bind(n,3258))),lang:"en",version:"13.x"},{path:"/14.x/cookbook/advanced/network-requests",element:i.createElement(ef),filePath:"14.x/cookbook/advanced/network-requests.md",preload:async()=>(await ef.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 alpha"}),". This version is under active development and APIs may change."]})}),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:"5af813ca17",221:"f6c8dffc29",2222:"e4219197a5",2721:"f7d5a21d1e",2755:"061ba2091c",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:"6df5c0564f",5507:"7697238262",5608:"9745905e0c",5816:"9ec1e73c3d",5868:"d20715eda8",594:"7310ac9884",5957:"54d54b0d67",6047:"c368b58ff2",6137:"4f8bcdd711",6156:"36f094c15a",631:"5943a4bdf3",6341:"29aa18fd2d",6466:"161bfed80d",6811:"06dd05bc0a",6930:"570ea35492",6958:"0e94eb3026",7146:"96cf008c15",7240:"aa6941637a",7262:"891f23ef0b",7296:"e9154a3c13",7340:"94b9988bf4",7351:"5ac093b30d",7497:"6df9901b3b",7515:"5693e03abb",7562:"0746b461e5",7623:"31e696a01f",7721:"aafd3d35b1",7753:"9825f7bd57",7759:"b372e76e62",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:"b498f69db5",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: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, wait, 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:1868},{id:"change-text",text:"`fireEvent.changeText`",depth:3,charIndex:2556},{id:"scroll",text:"`fireEvent.scroll`",depth:3,charIndex:3217},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4,charIndex:3610}],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:4445}],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:8787},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3,charIndex:9353},{id:"by-text",text:"`*ByText`",depth:3,charIndex:9893},{id:"by-hint-text",text:"`*ByHintText`",depth:3,charIndex:10566},{id:"by-test-id",text:"`*ByTestId`",depth:3,charIndex:11368},{id:"common-options",text:"Common options",depth:3,charIndex:12192},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4,charIndex:12448},{id:"textmatch-type",text:"TextMatch type",depth:2,charIndex:13347},{id:"examples",text:"Examples",depth:3,charIndex:13513},{id:"text-match-options",text:"Options",depth:3,charIndex:14323},{id:"precision",text:"Precision",depth:4,charIndex:14354},{id:"normalization",text:"Normalization",depth:4,charIndex:15200}],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:164},{id:"this-solution",text:"This solution",depth:2,charIndex:638},{id:"example",text:"Example",depth:2,charIndex:1145}],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:262},{id:"quick-migration",text:"Quick Migration",depth:2,charIndex:854},{id:"breaking-changes",text:"Breaking Changes",depth:2,charIndex:1719},{id:"supported-react-react-native-and-nodejs-versions",text:"Supported React, React Native, and Node.js versions",depth:3,charIndex:1737},{id:"test-renderer-replaces-react-test-renderer",text:"Test Renderer replaces React Test Renderer",depth:3,charIndex:2080},{id:"recommended-test-renderer-versions",text:"Recommended Test Renderer versions",depth:4,charIndex:2699},{id:"1-update-dependencies",text:"1. Update dependencies",depth:4,charIndex:3397},{id:"2-update-type-imports-if-needed",text:"2. Update type imports (if needed)",depth:4,charIndex:4493},{id:"async-apis-by-default",text:"Async APIs by Default",depth:3,charIndex:4838},{id:"render-async-default",text:"`render` is now async",depth:4,charIndex:5550},{id:"renderhook-is-now-async",text:"`renderHook` is now async",depth:4,charIndex:6051},{id:"fireevent-is-now-async",text:"`fireEvent` is now async",depth:4,charIndex:6499},{id:"act-is-now-async",text:"`act` is now async",depth:4,charIndex:7562},{id:"why-async-apis",text:"Why async APIs?",depth:4,charIndex:8385},{id:"removed-apis",text:"Removed APIs",depth:3,charIndex:8590},{id:"update-alias-removed",text:"`update` alias removed",depth:4,charIndex:8604},{id:"getqueriesforelement-export-removed",text:"`getQueriesForElement` export removed",depth:4,charIndex:8972},{id:"unsafe_root-removed",text:"`UNSAFE_root` removed",depth:4,charIndex:9341},{id:"legacy-unsafe_-queries-removed",text:"Legacy `UNSAFE_*` queries removed",depth:4,charIndex:9691},{id:"concurrentroot-option-removed",text:"`concurrentRoot` option removed",depth:4,charIndex:10422},{id:"createnodemock-option-removed",text:"`createNodeMock` option removed",depth:4,charIndex:11282},{id:"container-api-reintroduced",text:"`container` API reintroduced",depth:3,charIndex:11900},{id:"text-string-validation-enforced-by-default",text:"Text string validation enforced by default",depth:3,charIndex:12942},{id:"hidden-suspense-and-activity-content",text:"Hidden Suspense and Activity content",depth:3,charIndex:14202},{id:"accessible-name-changes",text:"Accessible name changes",depth:3,charIndex:14800},{id:"unknown-options-now-warn",text:"Unknown options now warn",depth:3,charIndex:15587},{id:"codemods",text:"Codemods",depth:2,charIndex:15982},{id:"rntl-v14-update-deps",text:"`rntl-v14-update-deps`",depth:3,charIndex:16141},{id:"rntl-v14-async-functions",text:"`rntl-v14-async-functions`",depth:3,charIndex:16747},{id:"custom-render-functions",text:"Custom render functions",depth:4,charIndex:17287},{id:"limitations",text:"Limitations",depth:4,charIndex:18280},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:18418}],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:164},{id:"jest-matchers",text:"Jest matchers",depth:3,charIndex:879},{id:"eslint-plugin",text:"ESLint plugin",depth:3,charIndex:1111}],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":"2c185c01"}},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 alpha"}),". This version is under active development and APIs may change."]})}),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:"5af813ca17",221:"f6c8dffc29",2222:"e4219197a5",2721:"f7d5a21d1e",2755:"061ba2091c",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:"6df5c0564f",5507:"7697238262",5608:"9745905e0c",5816:"9ec1e73c3d",5868:"d20715eda8",594:"7310ac9884",5957:"54d54b0d67",6047:"c368b58ff2",6137:"4f8bcdd711",6156:"36f094c15a",631:"5943a4bdf3",6341:"29aa18fd2d",6466:"161bfed80d",6811:"06dd05bc0a",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:"b372e76e62",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 diff --git a/static/search_index.14_x.en.f62932b1.json b/static/search_index.14_x.en.2c185c01.json similarity index 59% rename from static/search_index.14_x.en.f62932b1.json rename to static/search_index.14_x.en.2c185c01.json index 67f55b58..2e48e070 100644 --- a/static/search_index.14_x.en.f62932b1.json +++ b/static/search_index.14_x.en.2c185c01.json @@ -1 +1 @@ -[{"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 await 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 await 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":"/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"},{"title":"Async Events","content":"Summary\n\nIn RNTL v14, all tests are async since render(), 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\nWaiting for elements to appear: Use findBy* queries when elements appear after some delay (e.g., after data fetching).\n\nWaiting for conditions: Use waitFor() to wait for arbitrary conditions to be met.\n\nWaiting for elements to disappear: Use waitForElementToBeRemoved() when elements should be removed after some action.\n\nThese utilities help you write reliable tests that properly handle timing in your application.\n\nExample\n\nConsider a 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 await 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(\n 'button',\n { name: 'Start' },\n { timeout: 1000, interval: 50 }\n);\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":"/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"},{"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 async function renderWithProviders(\n ui: React.ReactElement,\n options?: RenderWithProvidersProps\n) {\n return await render(\n \n {ui}\n \n );\n}\n\n// ...\n\ntest('renders WelcomeScreen with user', async () => {\n await renderWithProviders(, { user: { name: 'Jar-Jar' } });\n expect(screen.getByText(/hello Jar-Jar/i)).toBeOnTheScreen();\n});\n\ntest('renders WelcomeScreen without user', async () => {\n await 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', async () => {\n await 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 setup\n\nSince 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:\n\nasync function renderWithData(ui: React.ReactElement) {\n const data = await fetchTestData();\n return await render({ui});\n}\n\ntest('renders SomeScreen', async () => {\n await renderWithData();\n // ...\n});","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","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","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":"/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","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', async () => {\n await 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 async function renderWithAtoms(\n component: React.ReactElement,\n options: RenderWithAtomsOptions\n) {\n return await 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\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 await 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":"/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"},{"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 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.\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\nTest Renderer\n\nInstead, RNTL uses Test Renderer, a modern, actively maintained renderer that renders to pure JavaScript objects without access to mobile OS and runs in a Node.js environment using Jest (or any other JavaScript test runner). Test Renderer replaces the deprecated react-test-renderer package and has better compatibility with React 19 and improved type safety.\n\nUsing Test Renderer has trade-offs:\n\nBenefits:\n\nTests run on most CIs (Linux, etc) without a mobile device or emulator\n\nFaster test execution\n\nLight runtime environment\n\nLimitations:\n\nTests don't execute native code\n\nTests are unaware of view state managed by native components, e.g., focus, unmanaged text boxes, etc.\n\nAssertions don't 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 the createRoot() function from Test Renderer. The output tree represents your React Native component tree, containing only host elements. Each node of that tree corresponds to a host component that would have a counterpart in the native view hierarchy.\n\nThese tree elements are represented by TestInstance type from Test Renderer:\n\ninterface TestInstance {\n type: ElementType;\n props: { [propName: string]: any };\n parent: TestInstance | null;\n children: Array;\n\n // Other props and methods\n}\n\nFor more details, see the Test Renderer documentation.\n\nHost and composite components\n\nTo understand RNTL's element tree, it's important to know the difference between host and composite components in React Native:\n\nHost components 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.\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\nIn a full React tree, this would look like:\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\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\nHost-only element tree\n\nIn RNTL v14, Test Renderer only exposes host elements in the element tree. Composite components aren't visible in the tree—you only see their host element output. This aligns with Testing Library's philosophy: tests should focus on what users can see and interact with (host elements), not implementation details (composite components).\n\nFor a TestInstance, the type prop is always a string value representing the host component name, e.g., \"View\", \"Text\", \"TextInput\".\n\nTree nodes\n\nRNTL v14 queries and the element tree only expose host elements. Tests assert on what users can see and interact with. Host elements represent the actual UI controls users interact with, while composite components exist purely in the JavaScript domain.\n\nUnderstanding props\n\nWhen asserting props on host elements, you're verifying what actually reaches the native view. This is important because composite components may process, transform, or even forget to pass props to their host children.\n\nfunction ForgotToPassPropsButton({ title, onPress, style }) {\n return (\n \n {title}\n \n );\n}\n\nIn the above example, the component accepts onPress and style props but doesn't pass them to host views, so they won't affect the user interface. By testing host elements, RNTL helps you catch these issues: if a prop doesn't reach a host element, users won't see or interact with it.\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 can navigate the tree of host elements using parent or children props of a TestInstance. Be careful when doing this, as the tree structure for third-party components can change independently from your code and cause unexpected test failures.\n\nQueries\n\nAll Testing Library queries return host components to encourage the best practices described above. Since v14, RNTL uses Test Renderer, which only renders host elements, making it impossible to query composite components directly.","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","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","content":"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.\n\nHandling Events in Third-Party Libraries\n\nRNTL provides two subsystems to simulate events:\n\nFire Event: A lightweight simulation system that can trigger event handlers defined on both host and composite components.\n\nUser Event: A more realistic interaction simulation system that can trigger event handlers defined only on host components.\n\nIn many third-party libraries, event handling involves native code, which means RNTL cannot fully simulate the event flow, as it runs only JavaScript code. To address this limitation, you can use testOnly_on* props on host components to expose custom events to RNTL’s event subsystems. Both subsystems will first attempt to locate the standard on* event handlers; if these are not available, they fall back to the testOnly_on* handlers.\n\nExample: React Native Gesture Handler\n\nReact Native Gesture Handler (RNGH) provides a composite Pressable component with onPress* props. These event handlers are not exposed on the rendered host views; instead, they are invoked via RNGH’s internal event flow, which involves native modules. As a result, they are not accessible to RNTL’s event subsystems.\n\nTo enable RNTL to interact with RNGH’s Pressable component, the library exposes testOnly_onPress* props on the NativeButton host component rendered by Pressable. This adjustment allows RNTL to simulate interactions during testing.\n\nfunction Pressable({ onPress, onPressIn, onPressOut, onLongPress, ... }) {\n\n // Component logic...\n\n const isTestEnv = process.env.NODE_ENV === 'test';\n\n return (\n \n \n \n );\n}","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","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","content":"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.\n\nact warning\n\nLet's start with a typical act() warning logged to console:\n\nAn update to Root 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\nThis ensures that you're testing the behavior the user would see in the browser.\nLearn more at https://react.dev/link/wrap-tests-with-act\n\nUnderstanding 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\nLet's demonstrate this with a small experiment. First, define a function component that uses useEffect:\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 Test Renderer 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 = createRoot();\n renderer.render();\n\n // Bind RNTL queries for root element.\n const view = within(renderer.container);\n expect(view.getByText('Count 0')).toBeTruthy();\n});\n\nWhen testing without act wrapping the render call, the assertion runs just after rendering but before useEffect effects are applied. This isn't what we expected.\n\ntest('render with act', async () => {\n const renderer = createRoot();\n await act(() => {\n renderer.render();\n });\n\n // Bind RNTL queries for root element.\n const view = within(renderer.container);\n expect(view.getByText('Count 1')).toBeTruthy();\n});\n\nNote: In v14, act is now async by default and always returns a Promise. You should always use await act(...).\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 - renderer.render call\n\nre-rendering of component - renderer.render call with updated element\n\ntriggering any event handlers that cause component tree render\n\nThankfully, for these basic cases RNTL has got you covered as our render, rerender and fireEvent methods already wrap their calls in act so that you do not have to do it explicitly. In v14, these functions are all async and should be awaited.\n\nNote that act calls can be safely nested and internally form a stack of calls.\n\nImplementation\n\nThe act implementation is defined in the ReactAct.js source file inside React repository. RNTL v14 requires React 19+, which provides the act function directly via React.act.\n\nRNTL exports act for convenience as defined in the act.ts source file. In v14, act is async by default and always returns a Promise. This works with async React features like Suspense boundaries and the use() hook. The underlying implementation wraps React's act function to ensure consistent async behavior.\n\nImportant: You should always use act exported from @testing-library/react-native rather than the one from react. The RNTL version automatically ensures async behavior, whereas using React.act directly could still trigger synchronous act behavior if used improperly, leading to subtle test issues.\n\nAsynchronous code\n\nIn v14, act is always async and returns a Promise. While the callback you pass to act can be synchronous (dealing with things like synchronous effects or mocks using already resolved promises), the act function itself should always be awaited. However, not all component code is synchronous. Frequently our components or mocks contain some asynchronous behaviours like setTimeout calls or network calls.\n\nHandling asynchronous operations\n\nWhen the callback passed to act contains asynchronous operations, the Promise returned by act will resolve only after those operations complete.\n\nHere's a simple example with a component using setTimeout to simulate asynchronous behavior:\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', async () => {\n await 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 an act warning. This is because the setTimeout callback will trigger a state update after the test has finished.\n\nSolution with fake timers\n\nUse Jest's fake timers:\n\ntest('render with fake timers', async () => {\n jest.useFakeTimers();\n await render();\n\n await act(() => {\n jest.runAllTimers();\n });\n expect(screen.getByText('Count 1')).toBeOnTheScreen();\n});\n\nNote: In v14, both render and act are async by default, so you should await them.\n\nThat way we can wrap jest.runAllTimers() call which triggers the setTimeout updates inside an act call, hence resolving the act warning.\n\nSolution with real timers\n\nWith real timers, things get more complex. Start with a simple solution: wrap an async act() call for the expected duration of component updates:\n\ntest('render with real timers - sleep', async () => {\n await render();\n await act(() => {\n await sleep(100); // Wait a bit longer than setTimeout in `TestAsyncComponent`\n });\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\nA better solution uses waitFor to wait for the desired state:\n\ntest('render with real timers - waitFor', async () => {\n await 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 await 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\nReferences\n\nReact act implementation source\n\nReact testing documentation","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","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","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":"/14.x/docs/api","lang":"en","toc":[],"frontmatter":{"uri":"/api"},"version":"14.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":"fireEvent {#fire-event}\n\n:::note\nFor common events like press or type, use the User Event API. It simulates events more realistically 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\nfunction fireEvent(instance: TestInstance, eventName: string, ...data: unknown[]): Promise;\n\nThe 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 onXxx where xxx is the event name.\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\nThis function uses async act internally to execute all pending React updates during event handling.\n\ntest('fire changeText event', async () => {\n const onEventMock = jest.fn();\n await render(\n // MyComponent renders TextInput which has a placeholder 'Enter details'\n // and with `onChangeText` bound to handleChangeText\n \n );\n\n await fireEvent(screen.getByPlaceholderText('change'), 'onChangeText', 'ab');\n expect(onEventMock).toHaveBeenCalledWith('ab');\n});\n\n:::note\nfireEvent 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\nawait render(\n \n \n \n);\n\n// you can omit the `on` prefix\nawait fireEvent(screen.getByPlaceholderText('my placeholder'), 'blur');\n\nFireEvent exposes convenience methods for common events like: press, changeText, scroll.\n\nfireEvent.press {#press}\n\n:::note\nUse the User Event press() helper instead. It simulates press interactions more realistically, including pressable support.\n:::\n\nfireEvent.press: (\n instance: TestInstance,\n ...data: Array,\n) => Promise\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\nawait render(\n \n \n Press me\n \n \n);\n\nawait fireEvent.press(screen.getByText('Press me'), eventData);\nexpect(onPressMock).toHaveBeenCalledWith(eventData);\n\nfireEvent.changeText {#change-text}\n\n:::note\nUse the User Event type() helper instead. It simulates text change interactions more realistically, including key-by-key typing, element focus, and other editing events.\n:::\n\nfireEvent.changeText: (\n instance: TestInstance,\n ...data: Array,\n) => Promise\n\nInvokes changeText event handler on the element or parent element in the tree.\n\nconst onChangeTextMock = jest.fn();\nconst CHANGE_TEXT = 'content';\n\nawait render(\n \n \n \n);\n\nawait fireEvent.changeText(screen.getByPlaceholderText('Enter data'), CHANGE_TEXT);\n\nfireEvent.scroll {#scroll}\n\n:::note\nPrefer user.scrollTo over fireEvent.scroll for ScrollView, FlatList, and SectionList components. User Event simulates events more realistically based on React Native runtime behavior.\n:::\n\nfireEvent.scroll: (\n instance: TestInstance,\n ...data: Array,\n) => Promise\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\nawait render(\n \n Content\n \n);\n\nawait fireEvent.scroll(screen.getByTestId('scroll-view'), eventData);","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":1868},{"id":"change-text","text":"`fireEvent.changeText`","depth":3,"charIndex":2556},{"id":"scroll","text":"`fireEvent.scroll`","depth":3,"charIndex":3217},{"id":"on-a-scrollview","text":"On a `ScrollView`","depth":4,"charIndex":3610}],"frontmatter":{},"version":"14.x"},{"title":"User Event interactions","content":"Comparison 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, prefer it over the Fire Event counterpart. It makes tests more realistic and reliable. When User Event doesn't support the event or you need to invoke event handlers on composite elements, use Fire Event.\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 instance: TestInstance,\n): Promise\n\nExample\n\nconst user = userEvent.setup();\nawait user.press(element);\n\nSimulates a press on any pressable element, e.g. Pressable, TouchableOpacity, Text, TextInput, etc. Unlike fireEvent.press(), which only calls the onPress prop, this function simulates the entire press interaction by reproducing the event sequence emitted by React Native runtime. It triggers 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 instance: TestInstance,\n options?: { duration?: number }\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, which is useful when using 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 instance: TestInstance,\n text: string,\n options?: {\n skipPress?: boolean;\n skipBlur?: boolean;\n submitEditing?: boolean;\n }\n): Promise\n\nExample\n\nconst user = userEvent.setup();\nawait user.type(textInput, 'Hello world!');\n\nSimulates 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 instance: TestInstance,\n): Promise\n\nExample\n\nconst user = userEvent.setup();\nawait user.clear(textInput);\n\nSimulates 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 instance: TestInstance,\n text: string,\n): Promise\n\nExample\n\nconst user = userEvent.setup();\nawait user.paste(textInput, 'Text to paste');\n\nSimulates pasting text into 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\ncontentSizeChange (only multiline)\n\nLeaving the element:\n\nendEditing\n\nblur\n\nscrollTo() {#scroll-to}\n\nscrollTo(\n instance: TestInstance,\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): Promise\n\nExample\n\nconst user = userEvent.setup();\nawait user.scrollTo(scrollView, { y: 100, momentumY: 200 });\n\nSimulates 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":"/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"},{"title":"Jest matchers","content":"This guide covers the built-in Jest matchers. These matchers make your tests easier to read and work better with accessibility features.\n\nSetup\n\nNo setup needed. Matchers are available when you import from @testing-library/react-native.\n\nChecking element existence\n\ntoBeOnTheScreen()\n\nexpect(element).toBeOnTheScreen();\n\nChecks if an element is attached to the element tree. If you have a reference to an element and it gets unmounted during the test, this assertion will fail.\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\nChecks if an element has the specified text content. Accepts string or RegExp, with optional text match options like exact and normalizer.\n\ntoContainElement()\n\nexpect(container).toContainElement(\n instance: TestInstance | null,\n)\n\nChecks if a container element contains another element.\n\ntoBeEmptyElement()\n\nexpect(element).toBeEmptyElement();\n\nChecks if an element has no 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\nChecks if a TextInput has the specified display value. Accepts string or RegExp, with optional text match options like 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\nChecks if an element has the specified accessible value.\n\nThe matcher reads accessibility values from aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext, and accessibilityValue props. It only checks the values you specify, so the element can have other accessibility value entries and still match.\n\nFor the text entry, you can use a string or RegExp.\n\ntoBeEnabled() / toBeDisabled {#tobeenabled}\n\nexpect(element).toBeEnabled();\nexpect(element).toBeDisabled();\n\nChecks if an element is enabled or disabled from aria-disabled or accessibilityState.disabled props. An element is disabled if it or any ancestor is disabled.\n\n:::note\nThese matchers are opposites. Both are available so you can avoid double negations like expect(element).not.toBeDisabled().\n:::\n\ntoBeSelected()\n\nexpect(element).toBeSelected();\n\nChecks if an element is selected from aria-selected or accessibilityState.selected props.\n\ntoBeChecked() / toBePartiallyChecked() {#tobechecked}\n\nexpect(element).toBeChecked();\nexpect(element).toBePartiallyChecked();\n\nChecks if an element is checked or partially checked from aria-checked or accessibilityState.checked props.\n\n:::note\n\ntoBeChecked() only works on Switch host elements and elements with checkbox, radio, or switch role.\n\ntoBePartiallyChecked() only works on elements with checkbox role.\n\n:::\n\ntoBeExpanded() / toBeCollapsed() {#tobeexpanded}\n\nexpect(element).toBeExpanded();\nexpect(element).toBeCollapsed();\n\nChecks if an element is expanded or collapsed from aria-expanded or accessibilityState.expanded props.\n\n:::note\nThese matchers are opposites for expandable elements (those with explicit aria-expanded or accessibilityState.expanded props). For non-expandable elements, neither matcher will pass.\n:::\n\ntoBeBusy()\n\nexpect(element).toBeBusy();\n\nChecks if an element is busy from aria-busy or accessibilityState.busy props.\n\nChecking element style\n\ntoBeVisible()\n\nexpect(element).toBeVisible();\n\nChecks if an element is visible.\n\nAn element is invisible if it or any ancestor has display: none or opacity: 0 styles, or if it's hidden from accessibility.\n\ntoHaveStyle()\n\nexpect(element).toHaveStyle(\n style: StyleProp