diff --git a/12.x/cookbook/advanced/network-requests.html b/12.x/cookbook/advanced/network-requests.html index d5d2f23b..1a542fcd 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 398e60e4..b6fecfb9 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 fc1e4cbd..4eac441c 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 b74fa08e..8a1a07c5 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 4c7dd2a3..cf5d7186 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 ac98cb4d..820ea751 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 c23bad1c..bbf63f1e 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 6a412a09..f06feaad 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 e5e55de1..40256891 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 19be5286..7b4fbf28 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 83b305df..bba2d216 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 c428aa5c..8ade357e 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 c00ee44e..e22e6733 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 4cbfcd23..b4aa4e3c 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 4d02ee3e..b0016544 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 6bda418c..487fc4b2 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 fb259ff6..bf27e674 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 61d6a2ed..b471c9a6 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 71d86745..f62bb00f 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 e8e8db1c..392e21de 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 1db91b4b..1d69f2c5 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 0bc7fd7d..6670cbb7 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 084020b6..71318674 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 09901e1f..657f47b6 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 94b92f77..f0cf64d9 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 c3d7c36f..7beb71fd 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 15b9d627..868c4b16 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 dd596608..c101b981 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 2861b4fc..8dafca1d 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 4106a9e6..c16305c9 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 d7292a38..5651bc31 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 e97754d3..5f708c90 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 d77ea538..df872111 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 a7fc9e44..d22c2d18 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 acae1c13..36e93d31 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 7685e7d2..b1c5daaf 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 2c53bc00..c54d5bc7 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 a604919f..ef72f38c 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 dadd158f..5e251cb2 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 be6de6bf..30d9b37e 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 0a8af25a..3f0bbcd9 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 aec0ac83..e04bcc19 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 fa751dcc..7e9fcbed 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 6fae1205..d7c04a8c 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 fa31bd36..fedc1bd5 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 02e5ea97..bf67b723 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 cd04d984..f7a22b67 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 0bf1510c..1d172db7 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 378c82ce..3a976ed3 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 7a68a06c..e521ded1 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 81367986..3a334124 100644 --- a/14.x/docs/api/render.html +++ b/14.x/docs/api/render.html @@ -9,7 +9,7 @@ - + diff --git a/14.x/docs/api/screen.html b/14.x/docs/api/screen.html index 56068a3f..995361b6 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 d67c50b1..5f4b7c6d 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 f2e1a5c8..ddcf1cac 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 ba439845..91efd96f 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 da64858a..86902fc9 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 82d6a23b..e2efcdba 100644 --- a/14.x/docs/guides/llm-guidelines.html +++ b/14.x/docs/guides/llm-guidelines.html @@ -9,7 +9,7 @@ - + @@ -22,20 +22,6 @@
You are viewing documentation for v14 alpha. This version is under active development and APIs may change.
  • 14.x

      • LLM Guidelines for React Native Testing Library

      Actionable guidelines for writing tests with React Native Testing Library (RNTL) v14.

      -

      Agent docs in the package

      -

      RNTL ships package-specific documentation for coding agents in node_modules/@testing-library/react-native/docs/. -Add this snippet to your project's AGENTS.md or CLAUDE.md file so agents use the docs for the installed package version:

      -
      <!-- BEGIN:react-native-testing-library-agent-rules -->
-
-# React Native Testing Library in this project
-
-This project uses `@testing-library/react-native`. Its APIs and testing conventions can differ from your training data.
-Before writing or changing RNTL tests, read the relevant guide in
-`node_modules/@testing-library/react-native/docs/`, starting with
-`node_modules/@testing-library/react-native/docs/guides/llm-guidelines.md`.
-Prefer those package docs over stale assumptions, and follow deprecation notices.
-
-<!-- END:react-native-testing-library-agent-rules -->

      Core APIs

      render

      const result = await render(<Component />, options?);
      @@ -175,7 +161,7 @@ Add this snippet to your project's AGENTS.md or CLAUDE.m // ❌ Destructuring from render const { getByText } = await render(<Component />);

      By following these guidelines, your tests will be more maintainable, accessible, and reliable.

      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/guides/llm-guidelines.md b/14.x/docs/guides/llm-guidelines.md index 110a2135..583ffe45 100644 --- a/14.x/docs/guides/llm-guidelines.md +++ b/14.x/docs/guides/llm-guidelines.md @@ -2,25 +2,6 @@ Actionable guidelines for writing tests with React Native Testing Library (RNTL) v14. -## Agent docs in the package - -RNTL ships package-specific documentation for coding agents in `node_modules/@testing-library/react-native/docs/`. -Add this snippet to your project's `AGENTS.md` or `CLAUDE.md` file so agents use the docs for the installed package version: - -```md - - -# React Native Testing Library in this project - -This project uses `@testing-library/react-native`. Its APIs and testing conventions can differ from your training data. -Before writing or changing RNTL tests, read the relevant guide in -`node_modules/@testing-library/react-native/docs/`, starting with -`node_modules/@testing-library/react-native/docs/guides/llm-guidelines.md`. -Prefer those package docs over stale assumptions, and follow deprecation notices. - - -``` - ## Core APIs ### render diff --git a/14.x/docs/guides/troubleshooting.html b/14.x/docs/guides/troubleshooting.html index 0ffdd829..5f2ef43f 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 8cd31836..2de2eb7b 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 04241aae..cdb2e687 100644 --- a/14.x/docs/start/migration-v14.html +++ b/14.x/docs/start/migration-v14.html @@ -9,7 +9,7 @@ - + @@ -44,6 +44,7 @@ bun install
      Step 2: Update test code to async

      npm
      yarn
      pnpm
      bun
      npx codemod@latest rntl-v14-async-functions --target ./src

      After running the codemods, review the changes and run your tests.

      +

      If your project uses coding agents, add the RNTL package-docs instruction snippet from the Quick Start so agents read the docs that match your installed package version.

      Breaking Changes

      Supported React, React Native, and Node.js versions

      This version requires React 19+, React Native 0.78+, and Node.js ^22.13.0 || >=24. If you need to support React 18, please use the latest v13.x version.

      diff --git a/14.x/docs/start/migration-v14.md b/14.x/docs/start/migration-v14.md index cbb4e695..fb376cb3 100644 --- a/14.x/docs/start/migration-v14.md +++ b/14.x/docs/start/migration-v14.md @@ -67,6 +67,8 @@ bunx codemod@latest rntl-v14-async-functions --target ./src After running the codemods, review the changes and run your tests. +If your project uses coding agents, add the RNTL package-docs instruction snippet from the [Quick Start](/react-native-testing-library/14.x/docs/start/quick-start.md#agent-docs-in-the-package) so agents read the docs that match your installed package version. + ## Breaking Changes ### Supported React, React Native, and Node.js versions diff --git a/14.x/docs/start/quick-start.html b/14.x/docs/start/quick-start.html index a0873874..4cb01a44 100644 --- a/14.x/docs/start/quick-start.html +++ b/14.x/docs/start/quick-start.html @@ -9,7 +9,7 @@ - + @@ -27,6 +27,16 @@

      This library has a peer dependency on Test Renderer. Make sure to install it:

      npm
      yarn
      pnpm
      bun
      npm install -D test-renderer

      Test Renderer has better compatibility with React 19 and improved type safety compared to the deprecated React Test Renderer.

      +

      Agent docs in the package

      +

      RNTL ships package-specific documentation for coding agents in node_modules/@testing-library/react-native/docs/. +Add this snippet to your project's AGENTS.md or CLAUDE.md file so agents use the docs for the installed package version:

      +
      # React Native Testing Library in this project
+
+This project uses `@testing-library/react-native`. Its APIs and testing conventions can differ from your training data.
+Before writing or changing RNTL tests, read the relevant guide in
+`node_modules/@testing-library/react-native/docs/`, starting with
+`node_modules/@testing-library/react-native/docs/guides/llm-guidelines.md`.
+Prefer those package docs over stale assumptions, and follow deprecation notices.

      Jest matchers

      RNTL automatically extends Jest with React Native-specific matchers. The only thing you need to do is to import anything from @testing-library/react-native which you already need to do to access the render function.

      ESLint plugin

      @@ -43,7 +53,7 @@ }, ], };

      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/start/quick-start.md b/14.x/docs/start/quick-start.md index fcb1081e..8649b55e 100644 --- a/14.x/docs/start/quick-start.md +++ b/14.x/docs/start/quick-start.md @@ -42,6 +42,21 @@ bun add -D test-renderer Test Renderer has better compatibility with React 19 and improved type safety compared to the deprecated [React Test Renderer](https://reactjs.org/docs/test-renderer.html). +## Agent docs in the package + +RNTL ships package-specific documentation for coding agents in `node_modules/@testing-library/react-native/docs/`. +Add this snippet to your project's `AGENTS.md` or `CLAUDE.md` file so agents use the docs for the installed package version: + +```md +# React Native Testing Library in this project + +This project uses `@testing-library/react-native`. Its APIs and testing conventions can differ from your training data. +Before writing or changing RNTL tests, read the relevant guide in +`node_modules/@testing-library/react-native/docs/`, starting with +`node_modules/@testing-library/react-native/docs/guides/llm-guidelines.md`. +Prefer those package docs over stale assumptions, and follow deprecation notices. +``` + ### Jest matchers RNTL automatically extends Jest with React Native-specific matchers. The only thing you need to do is to import anything from `@testing-library/react-native` which you already need to do to access the `render` function. diff --git a/14.x/index.html b/14.x/index.html index 2530c482..30b234f9 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 b3c586dd..7dd5ca7d 100644 --- a/14.x/llms-full.txt +++ b/14.x/llms-full.txt @@ -4121,25 +4121,6 @@ url: /react-native-testing-library/14.x/docs/guides/llm-guidelines.md Actionable guidelines for writing tests with React Native Testing Library (RNTL) v14. -## Agent docs in the package - -RNTL ships package-specific documentation for coding agents in `node_modules/@testing-library/react-native/docs/`. -Add this snippet to your project's `AGENTS.md` or `CLAUDE.md` file so agents use the docs for the installed package version: - -```md - - -# React Native Testing Library in this project - -This project uses `@testing-library/react-native`. Its APIs and testing conventions can differ from your training data. -Before writing or changing RNTL tests, read the relevant guide in -`node_modules/@testing-library/react-native/docs/`, starting with -`node_modules/@testing-library/react-native/docs/guides/llm-guidelines.md`. -Prefer those package docs over stale assumptions, and follow deprecation notices. - - -``` - ## Core APIs ### render @@ -4555,6 +4536,8 @@ bunx codemod@latest rntl-v14-async-functions --target ./src After running the codemods, review the changes and run your tests. +If your project uses coding agents, add the RNTL package-docs instruction snippet from the [Quick Start](/react-native-testing-library/14.x/docs/start/quick-start.md#agent-docs-in-the-package) so agents read the docs that match your installed package version. + ## Breaking Changes ### Supported React, React Native, and Node.js versions @@ -5175,6 +5158,21 @@ bun add -D test-renderer Test Renderer has better compatibility with React 19 and improved type safety compared to the deprecated [React Test Renderer](https://reactjs.org/docs/test-renderer.html). +## Agent docs in the package + +RNTL ships package-specific documentation for coding agents in `node_modules/@testing-library/react-native/docs/`. +Add this snippet to your project's `AGENTS.md` or `CLAUDE.md` file so agents use the docs for the installed package version: + +```md +# React Native Testing Library in this project + +This project uses `@testing-library/react-native`. Its APIs and testing conventions can differ from your training data. +Before writing or changing RNTL tests, read the relevant guide in +`node_modules/@testing-library/react-native/docs/`, starting with +`node_modules/@testing-library/react-native/docs/guides/llm-guidelines.md`. +Prefer those package docs over stale assumptions, and follow deprecation notices. +``` + ### Jest matchers RNTL automatically extends Jest with React Native-specific matchers. The only thing you need to do is to import anything from `@testing-library/react-native` which you already need to do to access the `render` function. diff --git a/404.html b/404.html index 383c243b..739c9145 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 52ce7d06..27fc9ac1 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 918d34f5..5b5d4428 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 a6ce965c..91f33fe2 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 0b198392..f469d876 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 3f9f513d..950e7546 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 13fb621c..c0630a42 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 7c0590d4..9a8becbc 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 73d43127..888c73ed 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 62b25eb1..16947a6a 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 5a52d970..0443f929 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 723a2b29..067f7b40 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 ad823900..023f1c94 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 0afdf0a6..ea71a4c1 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 75044fae..a498eb0c 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 c3603a2b..8b6283aa 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 9e1aca0f..88b98eb5 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 e4c2d28a..35aa599a 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 73f34171..420cfe82 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 cbb10b4e..060b5e82 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 c760e1dc..9b0b4452 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 c1cfc760..2ffc35be 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 395d4d38..d54bea71 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 02263f89..2bd85ceb 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 361d9fc1..1a14c9b2 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 0059fc11..847ba217 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 f60e1b21..802d9212 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 b7c8736b..39329eb1 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 b2f37425..878eda0e 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 fbab49b7..0f510723 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 2372e757..d9401757 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 ce32b302..5d646a45 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 5f5f957e..6c8ef300 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 f582c0fd..e0056f9c 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 290d8aff..71cedf6a 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 cac347d5..e4c9ba04 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 6798d0f4..15613c48 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 5b84c0b9..cfbb41db 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - + diff --git a/static/js/async/543.b484d49a87.js b/static/js/async/543.b484d49a87.js new file mode 100644 index 00000000..5f83ec13 --- /dev/null +++ b/static/js/async/543.b484d49a87.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["543"],{898(e,s,n){n.r(s),n.d(s,{default:()=>c});var r=n(4848),i=n(8453),o=n(7425),l=n(4424);function a(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"migration-to-14x",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-to-14x",children:"#"}),"Migration to 14.x"]}),"\n",(0,r.jsx)(s.p,{children:"This guide describes the migration to React Native Testing Library version 14 from version 13.x."}),"\n",(0,r.jsxs)(s.h2,{id:"overview",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#overview",children:"#"}),"Overview"]}),"\n",(0,r.jsx)(s.p,{children:"RNTL v14 drops support for React 18 and adopts React 19's async rendering model. Here's what changed:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"React 19.0.0+ and React Native 0.78+ are now required"}),"\n",(0,r.jsxs)(s.li,{children:["Node.js ",(0,r.jsx)(s.code,{children:"^22.13.0 || >=24"})," is now required"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"render"}),", ",(0,r.jsx)(s.code,{children:"renderHook"}),", ",(0,r.jsx)(s.code,{children:"fireEvent"}),", and ",(0,r.jsx)(s.code,{children:"act"})," are now async"]}),"\n",(0,r.jsxs)(s.li,{children:["Switched from deprecated ",(0,r.jsx)(s.a,{href:"https://reactjs.org/docs/test-renderer.html",rel:"noopener noreferrer",target:"_blank",children:"React Test Renderer"})," to ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"})]}),"\n",(0,r.jsxs)(s.li,{children:["Removed deprecated APIs: ",(0,r.jsx)(s.code,{children:"update"}),", ",(0,r.jsx)(s.code,{children:"getQueriesForElement"}),", ",(0,r.jsx)(s.code,{children:"UNSAFE_root"}),", ",(0,r.jsx)(s.code,{children:"concurrentRoot"})," option, ",(0,r.jsx)(s.code,{children:"createNodeMock"})," option"]}),"\n",(0,r.jsxs)(s.li,{children:["Reintroduced ",(0,r.jsx)(s.code,{children:"container"})," API, which is now safe to use"]}),"\n"]}),"\n",(0,r.jsx)(o.Pq,{type:"info",title:"React 18 Users",children:(0,r.jsx)(s.p,{children:"If you need to support React 18, please continue using RNTL v13.x."})}),"\n",(0,r.jsxs)(s.h2,{id:"quick-migration",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#quick-migration",children:"#"}),"Quick Migration"]}),"\n",(0,r.jsx)(s.p,{children:"We provide codemods to automate most of the migration:"}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Step 1: Update dependencies"})}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-update-deps --target .\nnpm install",yarn:"yarn dlx codemod@latest rntl-v14-update-deps --target .\nyarn install",pnpm:"pnpm dlx codemod@latest rntl-v14-update-deps --target .\npnpm install",bun:"bunx codemod@latest rntl-v14-update-deps --target .\nbun install"}}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Step 2: Update test code to async"})}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-async-functions --target ./src",yarn:"yarn dlx codemod@latest rntl-v14-async-functions --target ./src",pnpm:"pnpm dlx codemod@latest rntl-v14-async-functions --target ./src",bun:"bunx codemod@latest rntl-v14-async-functions --target ./src"}}),"\n",(0,r.jsx)(s.p,{children:"After running the codemods, review the changes and run your tests."}),"\n",(0,r.jsxs)(s.p,{children:["If your project uses coding agents, add the RNTL package-docs instruction snippet from the ",(0,r.jsx)(s.a,{href:"/14.x/docs/start/quick-start.html#agent-docs-in-the-package",children:"Quick Start"})," so agents read the docs that match your installed package version."]}),"\n",(0,r.jsxs)(s.h2,{id:"breaking-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#breaking-changes",children:"#"}),"Breaking Changes"]}),"\n",(0,r.jsxs)(s.h3,{id:"supported-react-react-native-and-nodejs-versions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#supported-react-react-native-and-nodejs-versions",children:"#"}),"Supported React, React Native, and Node.js versions"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsxs)(s.strong,{children:["This version requires React 19+, React Native 0.78+, and Node.js ",(0,r.jsx)(s.code,{children:"^22.13.0 || >=24"}),"."]})," If you need to support React 18, please use the latest v13.x version."]}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"RNTL Version"}),(0,r.jsx)(s.th,{children:"React Version"}),(0,r.jsx)(s.th,{children:"React Native Version"}),(0,r.jsx)(s.th,{children:"Node.js Version"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"v14.x"}),(0,r.jsx)(s.td,{children:">= 19.0.0"}),(0,r.jsx)(s.td,{children:">= 0.78"}),(0,r.jsx)(s.td,{children:"^22.13.0 || >=24"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"v13.x"}),(0,r.jsx)(s.td,{children:">= 18.0.0"}),(0,r.jsx)(s.td,{children:">= 0.71"}),(0,r.jsx)(s.td,{children:">= 18"})]})]})]}),"\n",(0,r.jsxs)(s.h3,{id:"test-renderer-replaces-react-test-renderer",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#test-renderer-replaces-react-test-renderer",children:"#"}),"Test Renderer replaces React Test Renderer"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, React Native Testing Library uses ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"})," instead of the deprecated ",(0,r.jsx)(s.a,{href:"https://reactjs.org/docs/test-renderer.html",rel:"noopener noreferrer",target:"_blank",children:"React Test Renderer"}),". Test Renderer works with React 19 and has better TypeScript support."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"The underlying renderer is now Test Renderer instead of React Test Renderer"}),"\n",(0,r.jsx)(s.li,{children:"This is mostly an internal change; your tests should work without modifications in most cases"}),"\n",(0,r.jsxs)(s.li,{children:["Type definitions now use ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer#test-instance",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"TestInstance"})})," from Test Renderer instead of ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})]}),"\n",(0,r.jsx)(s.li,{children:"Test Renderer 1.x is required as a peer dependency. Use the recommended Test Renderer version for your React 19 minor version."}),"\n"]}),"\n",(0,r.jsxs)(s.h4,{id:"recommended-test-renderer-versions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#recommended-test-renderer-versions",children:"#"}),"Recommended Test Renderer versions"]}),"\n",(0,r.jsx)(s.p,{children:"Choose the Test Renderer version that matches your React 19 minor version:"}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"React version"}),(0,r.jsx)(s.th,{children:"Recommended Test Renderer version"}),(0,r.jsx)(s.th,{children:"Notable React features"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"19.2"})}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"test-renderer@1.2"})}),(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:""}),", ",(0,r.jsx)(s.code,{children:"useEffectEvent"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"19.1"})}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"test-renderer@1.1"})}),(0,r.jsxs)(s.td,{children:["Owner Stack support, updated ",(0,r.jsx)(s.code,{children:"useId()"})," format"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"19.0"})}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"test-renderer@1.0"})}),(0,r.jsxs)(s.td,{children:["Actions, ",(0,r.jsx)(s.code,{children:"useActionState"}),", ",(0,r.jsx)(s.code,{children:"useOptimistic"}),", ",(0,r.jsx)(s.code,{children:"use"})]})]})]})]}),"\n",(0,r.jsxs)(s.p,{children:["Using an older Test Renderer line can prevent RNTL from supporting newer React 19 features in your tests. Using a newer Test Renderer line than your React version can produce peer dependency warnings, or an install error with ",(0,r.jsx)(s.code,{children:"npm"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer#react-19-compatibility-lines",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer React 19 compatibility lines"})," for the latest recommendations."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Migration:"})}),"\n",(0,r.jsxs)(s.h4,{id:"1-update-dependencies",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#1-update-dependencies",children:"#"}),"1. Update dependencies"]}),"\n",(0,r.jsx)(s.p,{children:"Run codemod for updating dependencies:"}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-update-deps\nnpm install",yarn:"yarn dlx codemod@latest rntl-v14-update-deps\nyarn install",pnpm:"pnpm dlx codemod@latest rntl-v14-update-deps\npnpm install",bun:"bunx codemod@latest rntl-v14-update-deps\nbun install"}}),"\n",(0,r.jsxs)(s.h5,{id:"manual-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#manual-changes",children:"#"}),"Manual changes"]}),"\n",(0,r.jsx)(s.p,{children:"Remove React Test Renderer and its type definitions from your dev dependencies, and add the Test Renderer line that matches your React minor version:"}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npm uninstall react-test-renderer @types/react-test-renderer\nnpm install -D test-renderer@1.2",yarn:"yarn remove react-test-renderer @types/react-test-renderer\nyarn add -D test-renderer@1.2",pnpm:"pnpm remove react-test-renderer @types/react-test-renderer\npnpm add -D test-renderer@1.2",bun:"bun remove react-test-renderer @types/react-test-renderer\nbun add -D test-renderer@1.2"}}),"\n",(0,r.jsxs)(s.p,{children:["The commands above use ",(0,r.jsx)(s.code,{children:"test-renderer@1.2"})," for React 19.2. Use ",(0,r.jsx)(s.code,{children:"test-renderer@1.1"})," for React 19.1, or ",(0,r.jsx)(s.code,{children:"test-renderer@1.0"})," for React 19.0."]}),"\n",(0,r.jsxs)(s.h4,{id:"2-update-type-imports-if-needed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#2-update-type-imports-if-needed",children:"#"}),"2. Update type imports (if needed)"]}),"\n",(0,r.jsx)(s.p,{children:"If you were directly importing types from React Test Renderer, you may need to update your imports:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { ReactTestInstance } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-test-renderer'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { TestInstance } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'test-renderer'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note:"})," Most users won't need to update type imports, as React Native Testing Library now exports the necessary types directly."]}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer documentation"})," for more."]}),"\n",(0,r.jsxs)(s.h3,{id:"async-apis-by-default",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-apis-by-default",children:"#"}),"Async APIs by Default"]}),"\n",(0,r.jsx)(s.p,{children:"With React 18 support dropped, RNTL v14 uses React 19's async rendering model. The following functions are now async by default:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"render()"})," → returns ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"rerender()"})," and ",(0,r.jsx)(s.code,{children:"unmount()"})," → return ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"renderHook()"})," → returns ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"fireEvent()"})," and helpers (",(0,r.jsx)(s.code,{children:"press"}),", ",(0,r.jsx)(s.code,{children:"changeText"}),", ",(0,r.jsx)(s.code,{children:"scroll"}),") → return ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"act()"})," → always returns ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n"]}),"\n",(0,r.jsx)(o.Pq,{type:"tip",title:"Already using async APIs?",children:(0,r.jsxs)(s.p,{children:["If you adopted the async APIs introduced in RNTL v13.3 (",(0,r.jsx)(s.code,{children:"renderAsync"}),", ",(0,r.jsx)(s.code,{children:"fireEventAsync"}),", ",(0,r.jsx)(s.code,{children:"renderHookAsync"}),"), rename them to their non-async counterparts (",(0,r.jsx)(s.code,{children:"render"}),", ",(0,r.jsx)(s.code,{children:"fireEvent"}),", ",(0,r.jsx)(s.code,{children:"renderHook"}),"). The async versions have been removed since the standard APIs are now async by default."]})}),"\n",(0,r.jsxs)(s.h4,{id:"render-async-default",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render-async-default",children:"#"}),(0,r.jsx)(s.code,{children:"render"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"render"})," is async by default and returns a Promise. This allows proper support for ",(0,r.jsx)(s.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(s.code,{children:"use()"})," hook."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should render component'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should render component'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/render.html",children:[(0,r.jsx)(s.code,{children:"render"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"renderhook-is-now-async",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook-is-now-async",children:"#"}),(0,r.jsx)(s.code,{children:"renderHook"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"renderHook"})," is async by default and returns a Promise."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should test hook'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" useMyHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(newProps);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should test hook'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" useMyHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(newProps);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/render-hook.html",children:[(0,r.jsx)(s.code,{children:"renderHook"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"fireevent-is-now-async",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fireevent-is-now-async",children:"#"}),(0,r.jsx)(s.code,{children:"fireEvent"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"fireEvent"})," and its helpers (",(0,r.jsx)(s.code,{children:"press"}),", ",(0,r.jsx)(s.code,{children:"changeText"}),", ",(0,r.jsx)(s.code,{children:"scroll"}),") are async by default and return a Promise."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should press button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(onPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should press button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(onPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"fireEvent.press()"})," and ",(0,r.jsx)(s.code,{children:"fireEvent.scroll()"})," now create default synthetic native event objects. If you pass event props, they are deep-merged into the default event object:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { pageX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(onPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".objectContaining"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".objectContaining"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ pageX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["If your v13 assertions expected the handler to receive exactly the object you passed to ",(0,r.jsx)(s.code,{children:"fireEvent.press()"})," or ",(0,r.jsx)(s.code,{children:"fireEvent.scroll()"}),", update them to use partial matching."]}),"\n",(0,r.jsxs)(s.h4,{id:"act-is-now-async",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#act-is-now-async",children:"#"}),(0,r.jsx)(s.code,{children:"act"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"act"})," is async by default and always returns a Promise. You should always ",(0,r.jsx)(s.code,{children:"await"})," the result of ",(0,r.jsx)(s.code,{children:"act()"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"act"})," now always returns ",(0,r.jsx)(s.code,{children:"Promise"})," instead of ",(0,r.jsx)(s.code,{children:"T | Thenable"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"act"})," should always be awaited"]}),"\n"]}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["The transition to async ",(0,r.jsx)(s.code,{children:"act"})," may prevent testing very short transient states, as awaiting ",(0,r.jsx)(s.code,{children:"act"})," will flush all pending updates before returning."]})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { act } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should update state'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" setState"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(state)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { act } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should update state'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" setState"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(state)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note"}),": Even if your callback is synchronous, you should still use ",(0,r.jsx)(s.code,{children:"await act(...)"})," as ",(0,r.jsx)(s.code,{children:"act"})," now always returns a Promise."]}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/other.html#act",children:[(0,r.jsx)(s.code,{children:"act"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"why-async-apis",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#why-async-apis",children:"#"}),"Why async APIs?"]}),"\n",(0,r.jsxs)(s.p,{children:["The async APIs properly handle ",(0,r.jsx)(s.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(s.code,{children:"use()"})," hook, and ensure all pending React updates complete before assertions run. This matches React 19's async rendering model."]}),"\n",(0,r.jsxs)(s.h3,{id:"removed-apis",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#removed-apis",children:"#"}),"Removed APIs"]}),"\n",(0,r.jsxs)(s.h4,{id:"update-alias-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#update-alias-removed",children:"#"}),(0,r.jsx)(s.code,{children:"update"})," alias removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"update"})," alias for ",(0,r.jsx)(s.code,{children:"rerender"})," has been removed. Use ",(0,r.jsx)(s.code,{children:"rerender"})," instead:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" newProp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" newProp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"getqueriesforelement-export-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#getqueriesforelement-export-removed",children:"#"}),(0,r.jsx)(s.code,{children:"getQueriesForElement"})," export removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"getQueriesForElement"})," export alias for ",(0,r.jsx)(s.code,{children:"within"})," has been removed. Use ",(0,r.jsx)(s.code,{children:"within"})," instead:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { getQueriesForElement } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" queries"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getQueriesForElement"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(element);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { within } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" queries"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" within"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(element);"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note:"})," ",(0,r.jsx)(s.code,{children:"getQueriesForElement"})," was just an alias for ",(0,r.jsx)(s.code,{children:"within"}),", so the functionality is identical - only the import needs to change."]}),"\n",(0,r.jsxs)(s.h4,{id:"unsafe_root-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unsafe_root-removed",children:"#"}),(0,r.jsx)(s.code,{children:"UNSAFE_root"})," removed"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"UNSAFE_root"})," has been removed. Use ",(0,r.jsx)(s.code,{children:"container"})," to access the pseudo-element container, or ",(0,r.jsx)(s.code,{children:"root"})," to access the first rendered host element:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" unsafeRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".UNSAFE_root;"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".container; "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// pseudo-element container"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".root; "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// first rendered host element"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"legacy-unsafe_-queries-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#legacy-unsafe_-queries-removed",children:"#"}),"Legacy ",(0,r.jsx)(s.code,{children:"UNSAFE_*"})," queries removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The legacy ",(0,r.jsx)(s.code,{children:"UNSAFE_getAllByType"}),", ",(0,r.jsx)(s.code,{children:"UNSAFE_getByType"}),", ",(0,r.jsx)(s.code,{children:"UNSAFE_getAllByProps"}),", and ",(0,r.jsx)(s.code,{children:"UNSAFE_getByProps"})," queries have been removed. These queries could return composite (user-defined) components, which is no longer supported with ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"})," as it only renders host elements."]}),"\n",(0,r.jsxs)(s.p,{children:["If you were using these legacy queries, you should refactor your tests to use the standard queries (",(0,r.jsx)(s.code,{children:"getByRole"}),", ",(0,r.jsx)(s.code,{children:"getByText"}),", ",(0,r.jsx)(s.code,{children:"getByTestId"}),", etc.) which target host elements."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" buttons"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".UNSAFE_getAllByType"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(Button);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".UNSAFE_getByProps"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ placeholder"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Enter text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" buttons"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"concurrentroot-option-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#concurrentroot-option-removed",children:"#"}),(0,r.jsx)(s.code,{children:"concurrentRoot"})," option removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"concurrentRoot"})," option has been removed from both ",(0,r.jsx)(s.code,{children:"render"})," options and ",(0,r.jsx)(s.code,{children:"configure"})," function. In v14, concurrent rendering is always enabled, since it's the standard rendering mode for React 19 and React Native's New Architecture."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { concurrentRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Enable concurrent mode"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { concurrentRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Disable concurrent mode"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"configure"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ concurrentRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Disable globally"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Always uses concurrent rendering"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Migration:"})," Remove any ",(0,r.jsx)(s.code,{children:"concurrentRoot"})," options from your ",(0,r.jsx)(s.code,{children:"render"})," calls and ",(0,r.jsx)(s.code,{children:"configure"})," function. If you were setting ",(0,r.jsx)(s.code,{children:"concurrentRoot: true"}),", just remove the option. If you were setting ",(0,r.jsx)(s.code,{children:"concurrentRoot: false"})," to disable concurrent rendering, this is no longer supported in v14."]}),"\n",(0,r.jsxs)(s.h4,{id:"createnodemock-option-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#createnodemock-option-removed",children:"#"}),(0,r.jsx)(s.code,{children:"createNodeMock"})," option removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"createNodeMock"})," render option has been removed. It was previously passed through to React Test Renderer, but the v14 Test Renderer integration does not support this option."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" createNodeMock"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (element) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" if"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" ("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".type "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput) {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { focus"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"() };"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {};"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["If you used ",(0,r.jsx)(s.code,{children:"createNodeMock"})," to mock imperative refs, prefer testing user-visible behavior and mock the component or native module at the boundary where the ref behavior is introduced."]}),"\n",(0,r.jsxs)(s.h3,{id:"container-api-reintroduced",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#container-api-reintroduced",children:"#"}),(0,r.jsx)(s.code,{children:"container"})," API reintroduced"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, the ",(0,r.jsx)(s.code,{children:"container"})," API has been reintroduced and is now safe to use. Previously, ",(0,r.jsx)(s.code,{children:"container"})," was renamed to ",(0,r.jsx)(s.code,{children:"UNSAFE_root"})," in v12 due to behavioral differences from React Testing Library's ",(0,r.jsx)(s.code,{children:"container"}),". Now ",(0,r.jsx)(s.code,{children:"container"})," returns a pseudo-element container whose children are the elements you rendered, consistent with React Testing Library's behavior."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"screen.container"})," is now available and safe to use"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"container"})," returns a pseudo-element container from Test Renderer"]}),"\n",(0,r.jsx)(s.li,{children:"The container's children are the elements you rendered"}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"UNSAFE_root"})," has been removed"]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should access root'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // UNSAFE_root was the only way to access the container"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".UNSAFE_root;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should access container'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // container is now safe and available"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".container;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // root is the first child of container"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".root;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/screen.html#container",children:[(0,r.jsx)(s.code,{children:"screen"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"text-string-validation-enforced-by-default",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#text-string-validation-enforced-by-default",children:"#"}),"Text string validation enforced by default"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, Test Renderer enforces React Native's requirement that text strings must be rendered within a ",(0,r.jsx)(s.code,{children:""})," component. The ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText"})," option has been removed from ",(0,r.jsx)(s.code,{children:"RenderOptions"})," since this validation is now always on."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"Text string validation is now always enabled and cannot be disabled"}),"\n",(0,r.jsxs)(s.li,{children:["The ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText"})," option has been removed"]}),"\n",(0,r.jsxs)(s.li,{children:["Tests will now throw ",(0,r.jsx)(s.code,{children:"Invariant Violation: Text strings must be rendered within a component"})," errors when attempting to render strings outside of ",(0,r.jsx)(s.code,{children:""})," components, matching React Native's runtime behavior"]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Migration:"})}),"\n",(0,r.jsxs)(s.p,{children:["If you were using ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText: true"})," in your render options, you can simply remove this option as the validation is now always enabled:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" unstable_validateStringsRenderedWithinText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Validation is now always enabled"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["If you were relying on the previous behavior where strings could be rendered outside of ",(0,r.jsx)(s.code,{children:""})," components, you'll need to fix your components to wrap strings in ",(0,r.jsx)(s.code,{children:""})," components, as this matches React Native's actual runtime behavior."]}),"\n",(0,r.jsxs)(s.h3,{id:"hidden-suspense-and-activity-content",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#hidden-suspense-and-activity-content",children:"#"}),"Hidden Suspense and Activity content"]}),"\n",(0,r.jsxs)(s.p,{children:["When React keeps previously rendered content hidden, such as suspended content or React 19.2 ",(0,r.jsx)(s.code,{children:''}),", RNTL now applies React Native-like hidden props to the affected instances. In practice, hidden instances receive ",(0,r.jsx)(s.code,{children:"display: 'none'"}),", preserving existing styles by appending the hidden style."]}),"\n",(0,r.jsx)(s.p,{children:"This makes visibility queries and matchers behave closer to runtime behavior:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"default queries do not match hidden instances"}),"\n",(0,r.jsxs)(s.li,{children:["queries with ",(0,r.jsx)(s.code,{children:"{ includeHiddenElements: true }"})," can still find hidden instances"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"toBeVisible()"})," treats these instances as hidden"]}),"\n"]}),"\n",(0,r.jsxs)(s.h3,{id:"accessible-name-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#accessible-name-changes",children:"#"}),"Accessible name changes"]}),"\n",(0,r.jsx)(s.p,{children:"Accessible name calculation has been updated to better match React Native behavior:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"aria-labelledby"})," and ",(0,r.jsx)(s.code,{children:"accessibilityLabelledBy"})," still take precedence over explicit labels"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"aria-label"})," and ",(0,r.jsx)(s.code,{children:"accessibilityLabel"})," take precedence over text content"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"Image"})," ",(0,r.jsx)(s.code,{children:"alt"})," is used as an accessible label"]}),"\n",(0,r.jsxs)(s.li,{children:["a root ",(0,r.jsx)(s.code,{children:"TextInput"})," can use its ",(0,r.jsx)(s.code,{children:"placeholder"})," as its accessible name"]}),"\n",(0,r.jsx)(s.li,{children:"child accessible names are concatenated with spaces"}),"\n",(0,r.jsxs)(s.li,{children:["child ",(0,r.jsx)(s.code,{children:"TextInput"})," placeholders are not used when computing a parent's accessible name"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["This affects ",(0,r.jsx)(s.code,{children:"getByRole(..., { name })"})," and ",(0,r.jsx)(s.code,{children:"toHaveAccessibleName()"}),". If a v13 role query matched because descendant text or label queries were used as a fallback, update the test to match the element's computed accessible name directly or query the descendant element instead."]}),"\n",(0,r.jsxs)(s.h3,{id:"unknown-options-now-warn",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unknown-options-now-warn",children:"#"}),"Unknown options now warn"]}),"\n",(0,r.jsxs)(s.p,{children:["RNTL now logs a warning when unknown options are passed to ",(0,r.jsx)(s.code,{children:"configure"}),", ",(0,r.jsx)(s.code,{children:"render"}),", ",(0,r.jsx)(s.code,{children:"renderHook"}),", or ",(0,r.jsx)(s.code,{children:"userEvent.setup"}),". This helps catch stale v13 options and misspellings during migration."]}),"\n",(0,r.jsxs)(s.p,{children:["For example, after removing ",(0,r.jsx)(s.code,{children:"concurrentRoot"}),", ",(0,r.jsx)(s.code,{children:"createNodeMock"}),", or ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText"}),", make sure those options are not still being passed through shared test helpers."]}),"\n",(0,r.jsxs)(s.h2,{id:"codemods",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#codemods",children:"#"}),"Codemods"]}),"\n",(0,r.jsx)(s.p,{children:"Two codemods are available to automate the migration. Both are safe to run multiple times - they only transform code that hasn't been migrated yet."}),"\n",(0,r.jsxs)(s.h3,{id:"rntl-v14-update-deps",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rntl-v14-update-deps",children:"#"}),(0,r.jsx)(s.code,{children:"rntl-v14-update-deps"})]}),"\n",(0,r.jsxs)(s.p,{children:["Updates your ",(0,r.jsx)(s.code,{children:"package.json"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Removes React Test Renderer (",(0,r.jsx)(s.code,{children:"react-test-renderer"})," and ",(0,r.jsx)(s.code,{children:"@types/react-test-renderer"}),")"]}),"\n",(0,r.jsxs)(s.li,{children:["Adds Test Renderer (",(0,r.jsx)(s.code,{children:"test-renderer"}),") using the current recommended 1.x line"]}),"\n",(0,r.jsxs)(s.li,{children:["Updates ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"})," to the v14 version"]}),"\n"]}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-update-deps --target .\nnpm install",yarn:"yarn dlx codemod@latest rntl-v14-update-deps --target .\nyarn install",pnpm:"pnpm dlx codemod@latest rntl-v14-update-deps --target .\npnpm install",bun:"bunx codemod@latest rntl-v14-update-deps --target .\nbun install"}}),"\n",(0,r.jsxs)(s.h3,{id:"rntl-v14-async-functions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rntl-v14-async-functions",children:"#"}),(0,r.jsx)(s.code,{children:"rntl-v14-async-functions"})]}),"\n",(0,r.jsx)(s.p,{children:"Transforms test files:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Adds ",(0,r.jsx)(s.code,{children:"await"})," to ",(0,r.jsx)(s.code,{children:"render()"}),", ",(0,r.jsx)(s.code,{children:"act()"}),", ",(0,r.jsx)(s.code,{children:"renderHook()"}),", ",(0,r.jsx)(s.code,{children:"fireEvent()"})," calls"]}),"\n",(0,r.jsx)(s.li,{children:"Makes test functions async when needed"}),"\n",(0,r.jsxs)(s.li,{children:["Handles ",(0,r.jsx)(s.code,{children:"screen.rerender()"}),", ",(0,r.jsx)(s.code,{children:"screen.unmount()"}),", and renderer methods"]}),"\n"]}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-async-functions --target ./src",yarn:"yarn dlx codemod@latest rntl-v14-async-functions --target ./src",pnpm:"pnpm dlx codemod@latest rntl-v14-async-functions --target ./src",bun:"bunx codemod@latest rntl-v14-async-functions --target ./src"}}),"\n",(0,r.jsxs)(s.h4,{id:"custom-render-functions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-functions",children:"#"}),"Custom render functions"]}),"\n",(0,r.jsxs)(s.p,{children:["If you have custom render helpers (like ",(0,r.jsx)(s.code,{children:"renderWithProviders"}),"), you can specify them using the ",(0,r.jsx)(s.code,{children:"customRenderFunctions"})," parameter. The codemod will then also transform calls to these functions:"]}),"\n",(0,r.jsx)(l.ky,{command:{npm:'npx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"',yarn:'yarn dlx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"',pnpm:'pnpm dlx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"',bun:'bunx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"'}}),"\n",(0,r.jsxs)(s.p,{children:["This will add ",(0,r.jsx)(s.code,{children:"await"})," to your custom render calls and make the containing test functions async, just like it does for the standard ",(0,r.jsx)(s.code,{children:"render"})," function."]}),"\n",(0,r.jsxs)(s.h4,{id:"limitations",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#limitations",children:"#"}),"Limitations"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"Helper functions defined in test files are not transformed by default"}),"\n",(0,r.jsxs)(s.li,{children:["Namespace imports (",(0,r.jsx)(s.code,{children:"import * as RNTL"}),") are not handled"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"full-changelog",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#full-changelog",children:"#"}),"Full Changelog"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/compare/v13.3.3...v14.0.0",rel:"noopener noreferrer",target:"_blank",children:"https://github.com/callstack/react-native-testing-library/compare/v13.3.3...v14.0.0"})})]})}function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}c.__RSPRESS_PAGE_META={},c.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fstart%2Fmigration-v14.mdx"]={toc:[{id:"overview",text:"Overview",depth:2},{id:"quick-migration",text:"Quick Migration",depth:2},{id:"breaking-changes",text:"Breaking Changes",depth:2},{id:"supported-react-react-native-and-nodejs-versions",text:"Supported React, React Native, and Node.js versions",depth:3},{id:"test-renderer-replaces-react-test-renderer",text:"Test Renderer replaces React Test Renderer",depth:3},{id:"recommended-test-renderer-versions",text:"Recommended Test Renderer versions",depth:4},{id:"1-update-dependencies",text:"1. Update dependencies",depth:4},{id:"2-update-type-imports-if-needed",text:"2. Update type imports (if needed)",depth:4},{id:"async-apis-by-default",text:"Async APIs by Default",depth:3},{id:"render-async-default",text:"`render` is now async",depth:4},{id:"renderhook-is-now-async",text:"`renderHook` is now async",depth:4},{id:"fireevent-is-now-async",text:"`fireEvent` is now async",depth:4},{id:"act-is-now-async",text:"`act` is now async",depth:4},{id:"why-async-apis",text:"Why async APIs?",depth:4},{id:"removed-apis",text:"Removed APIs",depth:3},{id:"update-alias-removed",text:"`update` alias removed",depth:4},{id:"getqueriesforelement-export-removed",text:"`getQueriesForElement` export removed",depth:4},{id:"unsafe_root-removed",text:"`UNSAFE_root` removed",depth:4},{id:"legacy-unsafe_-queries-removed",text:"Legacy `UNSAFE_*` queries removed",depth:4},{id:"concurrentroot-option-removed",text:"`concurrentRoot` option removed",depth:4},{id:"createnodemock-option-removed",text:"`createNodeMock` option removed",depth:4},{id:"container-api-reintroduced",text:"`container` API reintroduced",depth:3},{id:"text-string-validation-enforced-by-default",text:"Text string validation enforced by default",depth:3},{id:"hidden-suspense-and-activity-content",text:"Hidden Suspense and Activity content",depth:3},{id:"accessible-name-changes",text:"Accessible name changes",depth:3},{id:"unknown-options-now-warn",text:"Unknown options now warn",depth:3},{id:"codemods",text:"Codemods",depth:2},{id:"rntl-v14-update-deps",text:"`rntl-v14-update-deps`",depth:3},{id:"rntl-v14-async-functions",text:"`rntl-v14-async-functions`",depth:3},{id:"custom-render-functions",text:"Custom render functions",depth:4},{id:"limitations",text:"Limitations",depth:4},{id:"full-changelog",text:"Full Changelog",depth:2}],title:"Migration to 14.x",headingTitle:"Migration to 14.x",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/543.f2b9a04424.js b/static/js/async/543.f2b9a04424.js deleted file mode 100644 index d346981e..00000000 --- a/static/js/async/543.f2b9a04424.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["543"],{898(e,s,n){n.r(s),n.d(s,{default:()=>c});var r=n(4848),i=n(8453),o=n(7425),l=n(4424);function a(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"migration-to-14x",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#migration-to-14x",children:"#"}),"Migration to 14.x"]}),"\n",(0,r.jsx)(s.p,{children:"This guide describes the migration to React Native Testing Library version 14 from version 13.x."}),"\n",(0,r.jsxs)(s.h2,{id:"overview",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#overview",children:"#"}),"Overview"]}),"\n",(0,r.jsx)(s.p,{children:"RNTL v14 drops support for React 18 and adopts React 19's async rendering model. Here's what changed:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"React 19.0.0+ and React Native 0.78+ are now required"}),"\n",(0,r.jsxs)(s.li,{children:["Node.js ",(0,r.jsx)(s.code,{children:"^22.13.0 || >=24"})," is now required"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"render"}),", ",(0,r.jsx)(s.code,{children:"renderHook"}),", ",(0,r.jsx)(s.code,{children:"fireEvent"}),", and ",(0,r.jsx)(s.code,{children:"act"})," are now async"]}),"\n",(0,r.jsxs)(s.li,{children:["Switched from deprecated ",(0,r.jsx)(s.a,{href:"https://reactjs.org/docs/test-renderer.html",rel:"noopener noreferrer",target:"_blank",children:"React Test Renderer"})," to ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"})]}),"\n",(0,r.jsxs)(s.li,{children:["Removed deprecated APIs: ",(0,r.jsx)(s.code,{children:"update"}),", ",(0,r.jsx)(s.code,{children:"getQueriesForElement"}),", ",(0,r.jsx)(s.code,{children:"UNSAFE_root"}),", ",(0,r.jsx)(s.code,{children:"concurrentRoot"})," option, ",(0,r.jsx)(s.code,{children:"createNodeMock"})," option"]}),"\n",(0,r.jsxs)(s.li,{children:["Reintroduced ",(0,r.jsx)(s.code,{children:"container"})," API, which is now safe to use"]}),"\n"]}),"\n",(0,r.jsx)(o.Pq,{type:"info",title:"React 18 Users",children:(0,r.jsx)(s.p,{children:"If you need to support React 18, please continue using RNTL v13.x."})}),"\n",(0,r.jsxs)(s.h2,{id:"quick-migration",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#quick-migration",children:"#"}),"Quick Migration"]}),"\n",(0,r.jsx)(s.p,{children:"We provide codemods to automate most of the migration:"}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Step 1: Update dependencies"})}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-update-deps --target .\nnpm install",yarn:"yarn dlx codemod@latest rntl-v14-update-deps --target .\nyarn install",pnpm:"pnpm dlx codemod@latest rntl-v14-update-deps --target .\npnpm install",bun:"bunx codemod@latest rntl-v14-update-deps --target .\nbun install"}}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Step 2: Update test code to async"})}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-async-functions --target ./src",yarn:"yarn dlx codemod@latest rntl-v14-async-functions --target ./src",pnpm:"pnpm dlx codemod@latest rntl-v14-async-functions --target ./src",bun:"bunx codemod@latest rntl-v14-async-functions --target ./src"}}),"\n",(0,r.jsx)(s.p,{children:"After running the codemods, review the changes and run your tests."}),"\n",(0,r.jsxs)(s.h2,{id:"breaking-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#breaking-changes",children:"#"}),"Breaking Changes"]}),"\n",(0,r.jsxs)(s.h3,{id:"supported-react-react-native-and-nodejs-versions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#supported-react-react-native-and-nodejs-versions",children:"#"}),"Supported React, React Native, and Node.js versions"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsxs)(s.strong,{children:["This version requires React 19+, React Native 0.78+, and Node.js ",(0,r.jsx)(s.code,{children:"^22.13.0 || >=24"}),"."]})," If you need to support React 18, please use the latest v13.x version."]}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"RNTL Version"}),(0,r.jsx)(s.th,{children:"React Version"}),(0,r.jsx)(s.th,{children:"React Native Version"}),(0,r.jsx)(s.th,{children:"Node.js Version"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"v14.x"}),(0,r.jsx)(s.td,{children:">= 19.0.0"}),(0,r.jsx)(s.td,{children:">= 0.78"}),(0,r.jsx)(s.td,{children:"^22.13.0 || >=24"})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:"v13.x"}),(0,r.jsx)(s.td,{children:">= 18.0.0"}),(0,r.jsx)(s.td,{children:">= 0.71"}),(0,r.jsx)(s.td,{children:">= 18"})]})]})]}),"\n",(0,r.jsxs)(s.h3,{id:"test-renderer-replaces-react-test-renderer",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#test-renderer-replaces-react-test-renderer",children:"#"}),"Test Renderer replaces React Test Renderer"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, React Native Testing Library uses ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"})," instead of the deprecated ",(0,r.jsx)(s.a,{href:"https://reactjs.org/docs/test-renderer.html",rel:"noopener noreferrer",target:"_blank",children:"React Test Renderer"}),". Test Renderer works with React 19 and has better TypeScript support."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"The underlying renderer is now Test Renderer instead of React Test Renderer"}),"\n",(0,r.jsx)(s.li,{children:"This is mostly an internal change; your tests should work without modifications in most cases"}),"\n",(0,r.jsxs)(s.li,{children:["Type definitions now use ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer#test-instance",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"TestInstance"})})," from Test Renderer instead of ",(0,r.jsx)(s.code,{children:"ReactTestInstance"})]}),"\n",(0,r.jsx)(s.li,{children:"Test Renderer 1.x is required as a peer dependency. Use the recommended Test Renderer version for your React 19 minor version."}),"\n"]}),"\n",(0,r.jsxs)(s.h4,{id:"recommended-test-renderer-versions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#recommended-test-renderer-versions",children:"#"}),"Recommended Test Renderer versions"]}),"\n",(0,r.jsx)(s.p,{children:"Choose the Test Renderer version that matches your React 19 minor version:"}),"\n",(0,r.jsxs)(s.table,{children:[(0,r.jsx)(s.thead,{children:(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.th,{children:"React version"}),(0,r.jsx)(s.th,{children:"Recommended Test Renderer version"}),(0,r.jsx)(s.th,{children:"Notable React features"})]})}),(0,r.jsxs)(s.tbody,{children:[(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"19.2"})}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"test-renderer@1.2"})}),(0,r.jsxs)(s.td,{children:[(0,r.jsx)(s.code,{children:""}),", ",(0,r.jsx)(s.code,{children:"useEffectEvent"})]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"19.1"})}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"test-renderer@1.1"})}),(0,r.jsxs)(s.td,{children:["Owner Stack support, updated ",(0,r.jsx)(s.code,{children:"useId()"})," format"]})]}),(0,r.jsxs)(s.tr,{children:[(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"19.0"})}),(0,r.jsx)(s.td,{children:(0,r.jsx)(s.code,{children:"test-renderer@1.0"})}),(0,r.jsxs)(s.td,{children:["Actions, ",(0,r.jsx)(s.code,{children:"useActionState"}),", ",(0,r.jsx)(s.code,{children:"useOptimistic"}),", ",(0,r.jsx)(s.code,{children:"use"})]})]})]})]}),"\n",(0,r.jsxs)(s.p,{children:["Using an older Test Renderer line can prevent RNTL from supporting newer React 19 features in your tests. Using a newer Test Renderer line than your React version can produce peer dependency warnings, or an install error with ",(0,r.jsx)(s.code,{children:"npm"}),"."]}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer#react-19-compatibility-lines",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer React 19 compatibility lines"})," for the latest recommendations."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Migration:"})}),"\n",(0,r.jsxs)(s.h4,{id:"1-update-dependencies",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#1-update-dependencies",children:"#"}),"1. Update dependencies"]}),"\n",(0,r.jsx)(s.p,{children:"Run codemod for updating dependencies:"}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-update-deps\nnpm install",yarn:"yarn dlx codemod@latest rntl-v14-update-deps\nyarn install",pnpm:"pnpm dlx codemod@latest rntl-v14-update-deps\npnpm install",bun:"bunx codemod@latest rntl-v14-update-deps\nbun install"}}),"\n",(0,r.jsxs)(s.h5,{id:"manual-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#manual-changes",children:"#"}),"Manual changes"]}),"\n",(0,r.jsx)(s.p,{children:"Remove React Test Renderer and its type definitions from your dev dependencies, and add the Test Renderer line that matches your React minor version:"}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npm uninstall react-test-renderer @types/react-test-renderer\nnpm install -D test-renderer@1.2",yarn:"yarn remove react-test-renderer @types/react-test-renderer\nyarn add -D test-renderer@1.2",pnpm:"pnpm remove react-test-renderer @types/react-test-renderer\npnpm add -D test-renderer@1.2",bun:"bun remove react-test-renderer @types/react-test-renderer\nbun add -D test-renderer@1.2"}}),"\n",(0,r.jsxs)(s.p,{children:["The commands above use ",(0,r.jsx)(s.code,{children:"test-renderer@1.2"})," for React 19.2. Use ",(0,r.jsx)(s.code,{children:"test-renderer@1.1"})," for React 19.1, or ",(0,r.jsx)(s.code,{children:"test-renderer@1.0"})," for React 19.0."]}),"\n",(0,r.jsxs)(s.h4,{id:"2-update-type-imports-if-needed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#2-update-type-imports-if-needed",children:"#"}),"2. Update type imports (if needed)"]}),"\n",(0,r.jsx)(s.p,{children:"If you were directly importing types from React Test Renderer, you may need to update your imports:"}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { ReactTestInstance } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'react-test-renderer'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" type"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { TestInstance } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'test-renderer'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note:"})," Most users won't need to update type imports, as React Native Testing Library now exports the necessary types directly."]}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer documentation"})," for more."]}),"\n",(0,r.jsxs)(s.h3,{id:"async-apis-by-default",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#async-apis-by-default",children:"#"}),"Async APIs by Default"]}),"\n",(0,r.jsx)(s.p,{children:"With React 18 support dropped, RNTL v14 uses React 19's async rendering model. The following functions are now async by default:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"render()"})," → returns ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"rerender()"})," and ",(0,r.jsx)(s.code,{children:"unmount()"})," → return ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"renderHook()"})," → returns ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"fireEvent()"})," and helpers (",(0,r.jsx)(s.code,{children:"press"}),", ",(0,r.jsx)(s.code,{children:"changeText"}),", ",(0,r.jsx)(s.code,{children:"scroll"}),") → return ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"act()"})," → always returns ",(0,r.jsx)(s.code,{children:"Promise"})]}),"\n"]}),"\n",(0,r.jsx)(o.Pq,{type:"tip",title:"Already using async APIs?",children:(0,r.jsxs)(s.p,{children:["If you adopted the async APIs introduced in RNTL v13.3 (",(0,r.jsx)(s.code,{children:"renderAsync"}),", ",(0,r.jsx)(s.code,{children:"fireEventAsync"}),", ",(0,r.jsx)(s.code,{children:"renderHookAsync"}),"), rename them to their non-async counterparts (",(0,r.jsx)(s.code,{children:"render"}),", ",(0,r.jsx)(s.code,{children:"fireEvent"}),", ",(0,r.jsx)(s.code,{children:"renderHook"}),"). The async versions have been removed since the standard APIs are now async by default."]})}),"\n",(0,r.jsxs)(s.h4,{id:"render-async-default",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#render-async-default",children:"#"}),(0,r.jsx)(s.code,{children:"render"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"render"})," is async by default and returns a Promise. This allows proper support for ",(0,r.jsx)(s.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(s.code,{children:"use()"})," hook."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should render component'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should render component'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Hello'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"))"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBeOnTheScreen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/render.html",children:[(0,r.jsx)(s.code,{children:"render"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"renderhook-is-now-async",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#renderhook-is-now-async",children:"#"}),(0,r.jsx)(s.code,{children:"renderHook"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"renderHook"})," is async by default and returns a Promise."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should test hook'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" useMyHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(newProps);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { renderHook } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should test hook'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"result"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" renderHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" useMyHook"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"());"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(newProps);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" unmount"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/render-hook.html",children:[(0,r.jsx)(s.code,{children:"renderHook"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"fireevent-is-now-async",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#fireevent-is-now-async",children:"#"}),(0,r.jsx)(s.code,{children:"fireEvent"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"fireEvent"})," and its helpers (",(0,r.jsx)(s.code,{children:"press"}),", ",(0,r.jsx)(s.code,{children:"changeText"}),", ",(0,r.jsx)(s.code,{children:"scroll"}),") are async by default and return a Promise."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should press button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(onPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should press button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"));"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(onPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalled"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"();"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"fireEvent.press()"})," and ",(0,r.jsx)(s.code,{children:"fireEvent.scroll()"})," now create default synthetic native event objects. If you pass event props, they are deep-merged into the default event object:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" fireEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".press"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Press me'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:")"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { pageX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(onPress)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toHaveBeenCalledWith"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".objectContaining"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" nativeEvent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".objectContaining"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ pageX"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 20"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" pageY"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" 30"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" })"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["If your v13 assertions expected the handler to receive exactly the object you passed to ",(0,r.jsx)(s.code,{children:"fireEvent.press()"})," or ",(0,r.jsx)(s.code,{children:"fireEvent.scroll()"}),", update them to use partial matching."]}),"\n",(0,r.jsxs)(s.h4,{id:"act-is-now-async",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#act-is-now-async",children:"#"}),(0,r.jsx)(s.code,{children:"act"})," is now async"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, ",(0,r.jsx)(s.code,{children:"act"})," is async by default and always returns a Promise. You should always ",(0,r.jsx)(s.code,{children:"await"})," the result of ",(0,r.jsx)(s.code,{children:"act()"}),"."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"act"})," now always returns ",(0,r.jsx)(s.code,{children:"Promise"})," instead of ",(0,r.jsx)(s.code,{children:"T | Thenable"})]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"act"})," should always be awaited"]}),"\n"]}),"\n",(0,r.jsx)(o.Pq,{type:"note",title:"Note",children:(0,r.jsxs)(s.p,{children:["The transition to async ",(0,r.jsx)(s.code,{children:"act"})," may prevent testing very short transient states, as awaiting ",(0,r.jsx)(s.code,{children:"act"})," will flush all pending updates before returning."]})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { act } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should update state'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" setState"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(state)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { act } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should update state'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" act"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(() "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" setState"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" expect"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(state)"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".toBe"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'new value'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note"}),": Even if your callback is synchronous, you should still use ",(0,r.jsx)(s.code,{children:"await act(...)"})," as ",(0,r.jsx)(s.code,{children:"act"})," now always returns a Promise."]}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/misc/other.html#act",children:[(0,r.jsx)(s.code,{children:"act"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h4,{id:"why-async-apis",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#why-async-apis",children:"#"}),"Why async APIs?"]}),"\n",(0,r.jsxs)(s.p,{children:["The async APIs properly handle ",(0,r.jsx)(s.code,{children:"Suspense"})," boundaries and the ",(0,r.jsx)(s.code,{children:"use()"})," hook, and ensure all pending React updates complete before assertions run. This matches React 19's async rendering model."]}),"\n",(0,r.jsxs)(s.h3,{id:"removed-apis",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#removed-apis",children:"#"}),"Removed APIs"]}),"\n",(0,r.jsxs)(s.h4,{id:"update-alias-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#update-alias-removed",children:"#"}),(0,r.jsx)(s.code,{children:"update"})," alias removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"update"})," alias for ",(0,r.jsx)(s.code,{children:"rerender"})," has been removed. Use ",(0,r.jsx)(s.code,{children:"rerender"})," instead:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"update"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" newProp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" rerender"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" newProp"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"getqueriesforelement-export-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#getqueriesforelement-export-removed",children:"#"}),(0,r.jsx)(s.code,{children:"getQueriesForElement"})," export removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"getQueriesForElement"})," export alias for ",(0,r.jsx)(s.code,{children:"within"})," has been removed. Use ",(0,r.jsx)(s.code,{children:"within"})," instead:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { getQueriesForElement } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" queries"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" getQueriesForElement"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(element);"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { within } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" queries"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" within"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(element);"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Note:"})," ",(0,r.jsx)(s.code,{children:"getQueriesForElement"})," was just an alias for ",(0,r.jsx)(s.code,{children:"within"}),", so the functionality is identical - only the import needs to change."]}),"\n",(0,r.jsxs)(s.h4,{id:"unsafe_root-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unsafe_root-removed",children:"#"}),(0,r.jsx)(s.code,{children:"UNSAFE_root"})," removed"]}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.code,{children:"UNSAFE_root"})," has been removed. Use ",(0,r.jsx)(s.code,{children:"container"})," to access the pseudo-element container, or ",(0,r.jsx)(s.code,{children:"root"})," to access the first rendered host element:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" unsafeRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".UNSAFE_root;"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".container; "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// pseudo-element container"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".root; "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// first rendered host element"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"legacy-unsafe_-queries-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#legacy-unsafe_-queries-removed",children:"#"}),"Legacy ",(0,r.jsx)(s.code,{children:"UNSAFE_*"})," queries removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The legacy ",(0,r.jsx)(s.code,{children:"UNSAFE_getAllByType"}),", ",(0,r.jsx)(s.code,{children:"UNSAFE_getByType"}),", ",(0,r.jsx)(s.code,{children:"UNSAFE_getAllByProps"}),", and ",(0,r.jsx)(s.code,{children:"UNSAFE_getByProps"})," queries have been removed. These queries could return composite (user-defined) components, which is no longer supported with ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"})," as it only renders host elements."]}),"\n",(0,r.jsxs)(s.p,{children:["If you were using these legacy queries, you should refactor your tests to use the standard queries (",(0,r.jsx)(s.code,{children:"getByRole"}),", ",(0,r.jsx)(s.code,{children:"getByText"}),", ",(0,r.jsx)(s.code,{children:"getByTestId"}),", etc.) which target host elements."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" buttons"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".UNSAFE_getAllByType"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(Button);"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".UNSAFE_getByProps"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ placeholder"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" 'Enter text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" });"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" buttons"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getAllByRole"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'button'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" input"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".getByPlaceholderText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'Enter text'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:");"})]})]})})}),"\n",(0,r.jsxs)(s.h4,{id:"concurrentroot-option-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#concurrentroot-option-removed",children:"#"}),(0,r.jsx)(s.code,{children:"concurrentRoot"})," option removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"concurrentRoot"})," option has been removed from both ",(0,r.jsx)(s.code,{children:"render"})," options and ",(0,r.jsx)(s.code,{children:"configure"})," function. In v14, concurrent rendering is always enabled, since it's the standard rendering mode for React 19 and React Native's New Architecture."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { concurrentRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Enable concurrent mode"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { concurrentRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Disable concurrent mode"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"configure"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"({ concurrentRoot"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" false"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Disable globally"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />); "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Always uses concurrent rendering"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:[(0,r.jsx)(s.strong,{children:"Migration:"})," Remove any ",(0,r.jsx)(s.code,{children:"concurrentRoot"})," options from your ",(0,r.jsx)(s.code,{children:"render"})," calls and ",(0,r.jsx)(s.code,{children:"configure"})," function. If you were setting ",(0,r.jsx)(s.code,{children:"concurrentRoot: true"}),", just remove the option. If you were setting ",(0,r.jsx)(s.code,{children:"concurrentRoot: false"})," to disable concurrent rendering, this is no longer supported in v14."]}),"\n",(0,r.jsxs)(s.h4,{id:"createnodemock-option-removed",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#createnodemock-option-removed",children:"#"}),(0,r.jsx)(s.code,{children:"createNodeMock"})," option removed"]}),"\n",(0,r.jsxs)(s.p,{children:["The ",(0,r.jsx)(s.code,{children:"createNodeMock"})," render option has been removed. It was previously passed through to React Test Renderer, but the v14 Test Renderer integration does not support this option."]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" createNodeMock"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" (element) "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" if"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" ("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"element"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".type "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"==="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" TextInput) {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { focus"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" jest"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:".fn"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"() };"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {};"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]})]})})}),"\n",(0,r.jsxs)(s.p,{children:["If you used ",(0,r.jsx)(s.code,{children:"createNodeMock"})," to mock imperative refs, prefer testing user-visible behavior and mock the component or native module at the boundary where the ref behavior is introduced."]}),"\n",(0,r.jsxs)(s.h3,{id:"container-api-reintroduced",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#container-api-reintroduced",children:"#"}),(0,r.jsx)(s.code,{children:"container"})," API reintroduced"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, the ",(0,r.jsx)(s.code,{children:"container"})," API has been reintroduced and is now safe to use. Previously, ",(0,r.jsx)(s.code,{children:"container"})," was renamed to ",(0,r.jsx)(s.code,{children:"UNSAFE_root"})," in v12 due to behavioral differences from React Testing Library's ",(0,r.jsx)(s.code,{children:"container"}),". Now ",(0,r.jsx)(s.code,{children:"container"})," returns a pseudo-element container whose children are the elements you rendered, consistent with React Testing Library's behavior."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"screen.container"})," is now available and safe to use"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"container"})," returns a pseudo-element container from Test Renderer"]}),"\n",(0,r.jsx)(s.li,{children:"The container's children are the elements you rendered"}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"UNSAFE_root"})," has been removed"]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Before (v13):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should access root'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // UNSAFE_root was the only way to access the container"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".UNSAFE_root;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"After (v14):"})}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" { render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" screen } "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@testing-library/react-native'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"it"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"("}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'should access container'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" async"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // container is now safe and available"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" container"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".container;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // root is the first child of container"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" root"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" screen"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:".root;"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["See the ",(0,r.jsxs)(s.a,{href:"/14.x/docs/api/screen.html#container",children:[(0,r.jsx)(s.code,{children:"screen"})," API documentation"]}),"."]}),"\n",(0,r.jsxs)(s.h3,{id:"text-string-validation-enforced-by-default",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#text-string-validation-enforced-by-default",children:"#"}),"Text string validation enforced by default"]}),"\n",(0,r.jsxs)(s.p,{children:["In v14, Test Renderer enforces React Native's requirement that text strings must be rendered within a ",(0,r.jsx)(s.code,{children:""})," component. The ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText"})," option has been removed from ",(0,r.jsx)(s.code,{children:"RenderOptions"})," since this validation is now always on."]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"What changed:"})}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"Text string validation is now always enabled and cannot be disabled"}),"\n",(0,r.jsxs)(s.li,{children:["The ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText"})," option has been removed"]}),"\n",(0,r.jsxs)(s.li,{children:["Tests will now throw ",(0,r.jsx)(s.code,{children:"Invariant Violation: Text strings must be rendered within a component"})," errors when attempting to render strings outside of ",(0,r.jsx)(s.code,{children:""})," components, matching React Native's runtime behavior"]}),"\n"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.strong,{children:"Migration:"})}),"\n",(0,r.jsxs)(s.p,{children:["If you were using ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText: true"})," in your render options, you can simply remove this option as the validation is now always enabled:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"ts",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Before (v13)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" unstable_validateStringsRenderedWithinText"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:" true"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"});"})}),"\n",(0,r.jsx)(s.span,{className:"line"}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// After (v14)"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:"await"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:" render"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"(<"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-function)"},children:"MyComponent"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" />);"})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:"// Validation is now always enabled"})})]})})}),"\n",(0,r.jsxs)(s.p,{children:["If you were relying on the previous behavior where strings could be rendered outside of ",(0,r.jsx)(s.code,{children:""})," components, you'll need to fix your components to wrap strings in ",(0,r.jsx)(s.code,{children:""})," components, as this matches React Native's actual runtime behavior."]}),"\n",(0,r.jsxs)(s.h3,{id:"hidden-suspense-and-activity-content",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#hidden-suspense-and-activity-content",children:"#"}),"Hidden Suspense and Activity content"]}),"\n",(0,r.jsxs)(s.p,{children:["When React keeps previously rendered content hidden, such as suspended content or React 19.2 ",(0,r.jsx)(s.code,{children:''}),", RNTL now applies React Native-like hidden props to the affected instances. In practice, hidden instances receive ",(0,r.jsx)(s.code,{children:"display: 'none'"}),", preserving existing styles by appending the hidden style."]}),"\n",(0,r.jsx)(s.p,{children:"This makes visibility queries and matchers behave closer to runtime behavior:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"default queries do not match hidden instances"}),"\n",(0,r.jsxs)(s.li,{children:["queries with ",(0,r.jsx)(s.code,{children:"{ includeHiddenElements: true }"})," can still find hidden instances"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"toBeVisible()"})," treats these instances as hidden"]}),"\n"]}),"\n",(0,r.jsxs)(s.h3,{id:"accessible-name-changes",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#accessible-name-changes",children:"#"}),"Accessible name changes"]}),"\n",(0,r.jsx)(s.p,{children:"Accessible name calculation has been updated to better match React Native behavior:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"aria-labelledby"})," and ",(0,r.jsx)(s.code,{children:"accessibilityLabelledBy"})," still take precedence over explicit labels"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"aria-label"})," and ",(0,r.jsx)(s.code,{children:"accessibilityLabel"})," take precedence over text content"]}),"\n",(0,r.jsxs)(s.li,{children:[(0,r.jsx)(s.code,{children:"Image"})," ",(0,r.jsx)(s.code,{children:"alt"})," is used as an accessible label"]}),"\n",(0,r.jsxs)(s.li,{children:["a root ",(0,r.jsx)(s.code,{children:"TextInput"})," can use its ",(0,r.jsx)(s.code,{children:"placeholder"})," as its accessible name"]}),"\n",(0,r.jsx)(s.li,{children:"child accessible names are concatenated with spaces"}),"\n",(0,r.jsxs)(s.li,{children:["child ",(0,r.jsx)(s.code,{children:"TextInput"})," placeholders are not used when computing a parent's accessible name"]}),"\n"]}),"\n",(0,r.jsxs)(s.p,{children:["This affects ",(0,r.jsx)(s.code,{children:"getByRole(..., { name })"})," and ",(0,r.jsx)(s.code,{children:"toHaveAccessibleName()"}),". If a v13 role query matched because descendant text or label queries were used as a fallback, update the test to match the element's computed accessible name directly or query the descendant element instead."]}),"\n",(0,r.jsxs)(s.h3,{id:"unknown-options-now-warn",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#unknown-options-now-warn",children:"#"}),"Unknown options now warn"]}),"\n",(0,r.jsxs)(s.p,{children:["RNTL now logs a warning when unknown options are passed to ",(0,r.jsx)(s.code,{children:"configure"}),", ",(0,r.jsx)(s.code,{children:"render"}),", ",(0,r.jsx)(s.code,{children:"renderHook"}),", or ",(0,r.jsx)(s.code,{children:"userEvent.setup"}),". This helps catch stale v13 options and misspellings during migration."]}),"\n",(0,r.jsxs)(s.p,{children:["For example, after removing ",(0,r.jsx)(s.code,{children:"concurrentRoot"}),", ",(0,r.jsx)(s.code,{children:"createNodeMock"}),", or ",(0,r.jsx)(s.code,{children:"unstable_validateStringsRenderedWithinText"}),", make sure those options are not still being passed through shared test helpers."]}),"\n",(0,r.jsxs)(s.h2,{id:"codemods",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#codemods",children:"#"}),"Codemods"]}),"\n",(0,r.jsx)(s.p,{children:"Two codemods are available to automate the migration. Both are safe to run multiple times - they only transform code that hasn't been migrated yet."}),"\n",(0,r.jsxs)(s.h3,{id:"rntl-v14-update-deps",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rntl-v14-update-deps",children:"#"}),(0,r.jsx)(s.code,{children:"rntl-v14-update-deps"})]}),"\n",(0,r.jsxs)(s.p,{children:["Updates your ",(0,r.jsx)(s.code,{children:"package.json"}),":"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Removes React Test Renderer (",(0,r.jsx)(s.code,{children:"react-test-renderer"})," and ",(0,r.jsx)(s.code,{children:"@types/react-test-renderer"}),")"]}),"\n",(0,r.jsxs)(s.li,{children:["Adds Test Renderer (",(0,r.jsx)(s.code,{children:"test-renderer"}),") using the current recommended 1.x line"]}),"\n",(0,r.jsxs)(s.li,{children:["Updates ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"})," to the v14 version"]}),"\n"]}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-update-deps --target .\nnpm install",yarn:"yarn dlx codemod@latest rntl-v14-update-deps --target .\nyarn install",pnpm:"pnpm dlx codemod@latest rntl-v14-update-deps --target .\npnpm install",bun:"bunx codemod@latest rntl-v14-update-deps --target .\nbun install"}}),"\n",(0,r.jsxs)(s.h3,{id:"rntl-v14-async-functions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#rntl-v14-async-functions",children:"#"}),(0,r.jsx)(s.code,{children:"rntl-v14-async-functions"})]}),"\n",(0,r.jsx)(s.p,{children:"Transforms test files:"}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsxs)(s.li,{children:["Adds ",(0,r.jsx)(s.code,{children:"await"})," to ",(0,r.jsx)(s.code,{children:"render()"}),", ",(0,r.jsx)(s.code,{children:"act()"}),", ",(0,r.jsx)(s.code,{children:"renderHook()"}),", ",(0,r.jsx)(s.code,{children:"fireEvent()"})," calls"]}),"\n",(0,r.jsx)(s.li,{children:"Makes test functions async when needed"}),"\n",(0,r.jsxs)(s.li,{children:["Handles ",(0,r.jsx)(s.code,{children:"screen.rerender()"}),", ",(0,r.jsx)(s.code,{children:"screen.unmount()"}),", and renderer methods"]}),"\n"]}),"\n",(0,r.jsx)(l.ky,{command:{npm:"npx codemod@latest rntl-v14-async-functions --target ./src",yarn:"yarn dlx codemod@latest rntl-v14-async-functions --target ./src",pnpm:"pnpm dlx codemod@latest rntl-v14-async-functions --target ./src",bun:"bunx codemod@latest rntl-v14-async-functions --target ./src"}}),"\n",(0,r.jsxs)(s.h4,{id:"custom-render-functions",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#custom-render-functions",children:"#"}),"Custom render functions"]}),"\n",(0,r.jsxs)(s.p,{children:["If you have custom render helpers (like ",(0,r.jsx)(s.code,{children:"renderWithProviders"}),"), you can specify them using the ",(0,r.jsx)(s.code,{children:"customRenderFunctions"})," parameter. The codemod will then also transform calls to these functions:"]}),"\n",(0,r.jsx)(l.ky,{command:{npm:'npx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"',yarn:'yarn dlx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"',pnpm:'pnpm dlx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"',bun:'bunx codemod@latest rntl-v14-async-functions \\\n --target ./src \\\n --param customRenderFunctions="renderWithProviders,renderWithTheme"'}}),"\n",(0,r.jsxs)(s.p,{children:["This will add ",(0,r.jsx)(s.code,{children:"await"})," to your custom render calls and make the containing test functions async, just like it does for the standard ",(0,r.jsx)(s.code,{children:"render"})," function."]}),"\n",(0,r.jsxs)(s.h4,{id:"limitations",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#limitations",children:"#"}),"Limitations"]}),"\n",(0,r.jsxs)(s.ul,{children:["\n",(0,r.jsx)(s.li,{children:"Helper functions defined in test files are not transformed by default"}),"\n",(0,r.jsxs)(s.li,{children:["Namespace imports (",(0,r.jsx)(s.code,{children:"import * as RNTL"}),") are not handled"]}),"\n"]}),"\n",(0,r.jsxs)(s.h2,{id:"full-changelog",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#full-changelog",children:"#"}),"Full Changelog"]}),"\n",(0,r.jsx)(s.p,{children:(0,r.jsx)(s.a,{href:"https://github.com/callstack/react-native-testing-library/compare/v13.3.3...v14.0.0",rel:"noopener noreferrer",target:"_blank",children:"https://github.com/callstack/react-native-testing-library/compare/v13.3.3...v14.0.0"})})]})}function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}c.__RSPRESS_PAGE_META={},c.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fstart%2Fmigration-v14.mdx"]={toc:[{id:"overview",text:"Overview",depth:2},{id:"quick-migration",text:"Quick Migration",depth:2},{id:"breaking-changes",text:"Breaking Changes",depth:2},{id:"supported-react-react-native-and-nodejs-versions",text:"Supported React, React Native, and Node.js versions",depth:3},{id:"test-renderer-replaces-react-test-renderer",text:"Test Renderer replaces React Test Renderer",depth:3},{id:"recommended-test-renderer-versions",text:"Recommended Test Renderer versions",depth:4},{id:"1-update-dependencies",text:"1. Update dependencies",depth:4},{id:"2-update-type-imports-if-needed",text:"2. Update type imports (if needed)",depth:4},{id:"async-apis-by-default",text:"Async APIs by Default",depth:3},{id:"render-async-default",text:"`render` is now async",depth:4},{id:"renderhook-is-now-async",text:"`renderHook` is now async",depth:4},{id:"fireevent-is-now-async",text:"`fireEvent` is now async",depth:4},{id:"act-is-now-async",text:"`act` is now async",depth:4},{id:"why-async-apis",text:"Why async APIs?",depth:4},{id:"removed-apis",text:"Removed APIs",depth:3},{id:"update-alias-removed",text:"`update` alias removed",depth:4},{id:"getqueriesforelement-export-removed",text:"`getQueriesForElement` export removed",depth:4},{id:"unsafe_root-removed",text:"`UNSAFE_root` removed",depth:4},{id:"legacy-unsafe_-queries-removed",text:"Legacy `UNSAFE_*` queries removed",depth:4},{id:"concurrentroot-option-removed",text:"`concurrentRoot` option removed",depth:4},{id:"createnodemock-option-removed",text:"`createNodeMock` option removed",depth:4},{id:"container-api-reintroduced",text:"`container` API reintroduced",depth:3},{id:"text-string-validation-enforced-by-default",text:"Text string validation enforced by default",depth:3},{id:"hidden-suspense-and-activity-content",text:"Hidden Suspense and Activity content",depth:3},{id:"accessible-name-changes",text:"Accessible name changes",depth:3},{id:"unknown-options-now-warn",text:"Unknown options now warn",depth:3},{id:"codemods",text:"Codemods",depth:2},{id:"rntl-v14-update-deps",text:"`rntl-v14-update-deps`",depth:3},{id:"rntl-v14-async-functions",text:"`rntl-v14-async-functions`",depth:3},{id:"custom-render-functions",text:"Custom render functions",depth:4},{id:"limitations",text:"Limitations",depth:4},{id:"full-changelog",text:"Full Changelog",depth:2}],title:"Migration to 14.x",headingTitle:"Migration to 14.x",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/6811.09c1b532f0.js b/static/js/async/6811.09c1b532f0.js new file mode 100644 index 00000000..d444d5c9 --- /dev/null +++ b/static/js/async/6811.09c1b532f0.js @@ -0,0 +1 @@ +"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["6811"],{6454(e,s,n){n.r(s),n.d(s,{default:()=>l});var r=n(4848),i=n(8453),a=n(4424);function t(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(s.h1,{id:"quick-start",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#quick-start",children:"#"}),"Quick Start"]}),"\n",(0,r.jsxs)(s.h2,{id:"installation",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#installation",children:"#"}),"Installation"]}),"\n",(0,r.jsx)(s.p,{children:"Open a Terminal in your project's folder and run:"}),"\n",(0,r.jsx)(a.ky,{command:{npm:"npm install -D @testing-library/react-native",yarn:"yarn add -D @testing-library/react-native",pnpm:"pnpm add -D @testing-library/react-native",bun:"bun add -D @testing-library/react-native"}}),"\n",(0,r.jsxs)(s.p,{children:["This library has a peer dependency on ",(0,r.jsx)(s.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"}),". Make sure to install it:"]}),"\n",(0,r.jsx)(a.ky,{command:{npm:"npm install -D test-renderer",yarn:"yarn add -D test-renderer",pnpm:"pnpm add -D test-renderer",bun:"bun add -D test-renderer"}}),"\n",(0,r.jsxs)(s.p,{children:["Test Renderer has better compatibility with React 19 and improved type safety compared to the deprecated ",(0,r.jsx)(s.a,{href:"https://reactjs.org/docs/test-renderer.html",rel:"noopener noreferrer",target:"_blank",children:"React Test Renderer"}),"."]}),"\n",(0,r.jsxs)(s.h2,{id:"agent-docs-in-the-package",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#agent-docs-in-the-package",children:"#"}),"Agent docs in the package"]}),"\n",(0,r.jsxs)(s.p,{children:["RNTL ships package-specific documentation for coding agents in ",(0,r.jsx)(s.code,{children:"node_modules/@testing-library/react-native/docs/"}),".\nAdd this snippet to your project's ",(0,r.jsx)(s.code,{children:"AGENTS.md"})," or ",(0,r.jsx)(s.code,{children:"CLAUDE.md"})," file so agents use the docs for the installed package version:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"md",children:(0,r.jsxs)(s.code,{children:[(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)",fontWeight:"bold"},children:"# React Native Testing Library in this project"})}),"\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-foreground)"},children:"This project uses "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"`@testing-library/react-native`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:". Its APIs and testing conventions can differ from your training data."})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"Before writing or changing RNTL tests, read the relevant guide in"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"`node_modules/@testing-library/react-native/docs/`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:", starting with"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"`node_modules/@testing-library/react-native/docs/guides/llm-guidelines.md`"}),(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:"Prefer those package docs over stale assumptions, and follow deprecation notices."})})]})})}),"\n",(0,r.jsxs)(s.h3,{id:"jest-matchers",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#jest-matchers",children:"#"}),"Jest matchers"]}),"\n",(0,r.jsxs)(s.p,{children:["RNTL automatically extends Jest with React Native-specific matchers. The only thing you need to do is to import anything from ",(0,r.jsx)(s.code,{children:"@testing-library/react-native"})," which you already need to do to access the ",(0,r.jsx)(s.code,{children:"render"})," function."]}),"\n",(0,r.jsxs)(s.h3,{id:"eslint-plugin",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#eslint-plugin",children:"#"}),"ESLint plugin"]}),"\n",(0,r.jsxs)(s.p,{children:["Set up ",(0,r.jsx)(s.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library",rel:"noopener noreferrer",target:"_blank",children:(0,r.jsx)(s.code,{children:"eslint-plugin-testing-library"})})," to avoid common Testing Library mistakes and bad practices."]}),"\n",(0,r.jsxs)(s.p,{children:["Install the plugin (assuming you already have ",(0,r.jsx)(s.code,{children:"eslint"})," installed & configured):"]}),"\n",(0,r.jsx)(a.ky,{command:{npm:"npm install -D eslint-plugin-testing-library",yarn:"yarn add -D eslint-plugin-testing-library",pnpm:"pnpm add -D eslint-plugin-testing-library",bun:"bun add -D eslint-plugin-testing-library"}}),"\n",(0,r.jsxs)(s.p,{children:["Then, add this to your ESLint config (e.g., ",(0,r.jsx)(s.code,{children:".eslintrc.js"}),"). Extend the ",(0,r.jsx)(s.code,{children:"react"})," plugin:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:".eslintrc.js",lang:"js",children:(0,r.jsxs)(s.code,{children:[(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"module"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-constant)"},children:"exports"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" overrides"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-comment)"},children:" // Test files only"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" files"}),(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-string-expression)"},children:"'**/__tests__/**/*.[jt]s?(x)'"}),(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:" '**/?(*.)+(spec|test).[jt]s?(x)'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" extends"}),(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-string-expression)"},children:"'plugin:testing-library/react'"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:s}={...(0,i.R)(),...e.components};return s?(0,r.jsx)(s,{...e,children:(0,r.jsx)(t,{...e})}):t(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fstart%2Fquick-start.mdx"]={toc:[{id:"installation",text:"Installation",depth:2},{id:"agent-docs-in-the-package",text:"Agent docs in the package",depth:2},{id:"jest-matchers",text:"Jest matchers",depth:3},{id:"eslint-plugin",text:"ESLint plugin",depth:3}],title:"Quick Start",headingTitle:"Quick Start",frontmatter:{}}}}]); \ No newline at end of file diff --git a/static/js/async/6811.a7c068286d.js b/static/js/async/6811.a7c068286d.js deleted file mode 100644 index 5c087568..00000000 --- a/static/js/async/6811.a7c068286d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.rspackChunkwebsite=self.rspackChunkwebsite||[]).push([["6811"],{6454(e,n,r){r.r(n),r.d(n,{default:()=>l});var s=r(4848),i=r(8453),t=r(4424);function a(e){let n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.h1,{id:"quick-start",children:[(0,s.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#quick-start",children:"#"}),"Quick Start"]}),"\n",(0,s.jsxs)(n.h2,{id:"installation",children:[(0,s.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#installation",children:"#"}),"Installation"]}),"\n",(0,s.jsx)(n.p,{children:"Open a Terminal in your project's folder and run:"}),"\n",(0,s.jsx)(t.ky,{command:{npm:"npm install -D @testing-library/react-native",yarn:"yarn add -D @testing-library/react-native",pnpm:"pnpm add -D @testing-library/react-native",bun:"bun add -D @testing-library/react-native"}}),"\n",(0,s.jsxs)(n.p,{children:["This library has a peer dependency on ",(0,s.jsx)(n.a,{href:"https://github.com/mdjastrzebski/test-renderer",rel:"noopener noreferrer",target:"_blank",children:"Test Renderer"}),". Make sure to install it:"]}),"\n",(0,s.jsx)(t.ky,{command:{npm:"npm install -D test-renderer",yarn:"yarn add -D test-renderer",pnpm:"pnpm add -D test-renderer",bun:"bun add -D test-renderer"}}),"\n",(0,s.jsxs)(n.p,{children:["Test Renderer has better compatibility with React 19 and improved type safety compared to the deprecated ",(0,s.jsx)(n.a,{href:"https://reactjs.org/docs/test-renderer.html",rel:"noopener noreferrer",target:"_blank",children:"React Test Renderer"}),"."]}),"\n",(0,s.jsxs)(n.h3,{id:"jest-matchers",children:[(0,s.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#jest-matchers",children:"#"}),"Jest matchers"]}),"\n",(0,s.jsxs)(n.p,{children:["RNTL automatically extends Jest with React Native-specific matchers. The only thing you need to do is to import anything from ",(0,s.jsx)(n.code,{children:"@testing-library/react-native"})," which you already need to do to access the ",(0,s.jsx)(n.code,{children:"render"})," function."]}),"\n",(0,s.jsxs)(n.h3,{id:"eslint-plugin",children:[(0,s.jsx)(n.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#eslint-plugin",children:"#"}),"ESLint plugin"]}),"\n",(0,s.jsxs)(n.p,{children:["Set up ",(0,s.jsx)(n.a,{href:"https://github.com/testing-library/eslint-plugin-testing-library",rel:"noopener noreferrer",target:"_blank",children:(0,s.jsx)(n.code,{children:"eslint-plugin-testing-library"})})," to avoid common Testing Library mistakes and bad practices."]}),"\n",(0,s.jsxs)(n.p,{children:["Install the plugin (assuming you already have ",(0,s.jsx)(n.code,{children:"eslint"})," installed & configured):"]}),"\n",(0,s.jsx)(t.ky,{command:{npm:"npm install -D eslint-plugin-testing-library",yarn:"yarn add -D eslint-plugin-testing-library",pnpm:"pnpm add -D eslint-plugin-testing-library",bun:"bun add -D eslint-plugin-testing-library"}}),"\n",(0,s.jsxs)(n.p,{children:["Then, add this to your ESLint config (e.g., ",(0,s.jsx)(n.code,{children:".eslintrc.js"}),"). Extend the ",(0,s.jsx)(n.code,{children:"react"})," plugin:"]}),"\n",(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",title:".eslintrc.js",lang:"js",children:(0,s.jsxs)(n.code,{children:[(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"module"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"."}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"exports"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" overrides"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-comment)"},children:" // Test files only"})}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" files"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'**/__tests__/**/*.[jt]s?(x)'"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '**/?(*.)+(spec|test).[jt]s?(x)'"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" extends"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:":"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ["}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"'plugin:testing-library/react'"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"]"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" }"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,s.jsxs)(n.span,{className:"line",children:[(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ]"}),(0,s.jsx)(n.span,{style:{color:"var(--shiki-token-punctuation)"},children:","})]}),"\n",(0,s.jsx)(n.span,{className:"line",children:(0,s.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"};"})})]})})})]})}function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}l.__RSPRESS_PAGE_META={},l.__RSPRESS_PAGE_META["14.x%2Fdocs%2Fstart%2Fquick-start.mdx"]={toc:[{id:"installation",text:"Installation",depth:2},{id:"jest-matchers",text:"Jest matchers",depth:3},{id:"eslint-plugin",text:"ESLint plugin",depth:3}],title:"Quick Start",headingTitle:"Quick Start",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.9845e443a7.js b/static/js/async/9873.9845e443a7.js deleted file mode 100644 index 7e25af2e..00000000 --- a/static/js/async/9873.9845e443a7.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:"agent-docs-in-the-package",children:[(0,r.jsx)(s.a,{className:"rp-header-anchor","aria-hidden":"true",href:"#agent-docs-in-the-package",children:"#"}),"Agent docs in the package"]}),"\n",(0,r.jsxs)(s.p,{children:["RNTL ships package-specific documentation for coding agents in ",(0,r.jsx)(s.code,{children:"node_modules/@testing-library/react-native/docs/"}),".\nAdd this snippet to your project's ",(0,r.jsx)(s.code,{children:"AGENTS.md"})," or ",(0,r.jsx)(s.code,{children:"CLAUDE.md"})," file so agents use the docs for the installed package version:"]}),"\n",(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(s.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",lang:"md",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:"\x3c!-- BEGIN:react-native-testing-library-agent-rules --\x3e"})}),"\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-foreground)",fontWeight:"bold"},children:"# React Native Testing Library in this project"})}),"\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-foreground)"},children:"This project uses "}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"`@testing-library/react-native`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:". Its APIs and testing conventions can differ from your training data."})]}),"\n",(0,r.jsx)(s.span,{className:"line",children:(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:"Before writing or changing RNTL tests, read the relevant guide in"})}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"`node_modules/@testing-library/react-native/docs/`"}),(0,r.jsx)(s.span,{style:{color:"var(--shiki-foreground)"},children:", starting with"})]}),"\n",(0,r.jsxs)(s.span,{className:"line",children:[(0,r.jsx)(s.span,{style:{color:"var(--shiki-token-string)"},children:"`node_modules/@testing-library/react-native/docs/guides/llm-guidelines.md`"}),(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:"Prefer those package docs over stale assumptions, and follow deprecation notices."})}),"\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:"\x3c!-- END:react-native-testing-library-agent-rules --\x3e"})})]})})}),"\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:"agent-docs-in-the-package",text:"Agent docs in the package",depth:2},{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.201c93573f.js b/static/js/index.c4ce2d3610.js similarity index 67% rename from static/js/index.201c93573f.js rename to static/js/index.c4ce2d3610.js index 163664b0..5a706be4 100644 --- a/static/js/index.201c93573f.js +++ b/static/js/index.c4ce2d3610.js @@ -1 +1 @@ -(()=>{"use strict";var e,t,n,i,a,r,o,d={3853(e,t,n){n.d(t,{Y:()=>i,z:()=>a});let i={pages:[{title:"Network Requests",routePath:"/12.x/cookbook/advanced/network-requests",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"phonebook-example",text:"Phonebook Example",depth:2,charIndex:569},{id:"start-testing-with-a-simple-test",text:"Start testing with a simple test",depth:2,charIndex:4791},{id:"testing-error-handling",text:"Testing error handling",depth:2,charIndex:7885},{id:"global-guarding-against-unwanted-api-requests",text:"Global guarding against unwanted API requests",depth:2,charIndex:9718},{id:"conclusion",text:"Conclusion",depth:2,charIndex:10736},{id:"further-reading-and-alternatives",text:"Further Reading and Alternatives",depth:2,charIndex:11356}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/advanced/network-requests.md"},{title:"Async tests",routePath:"/12.x/cookbook/basics/async-tests",lang:"en",toc:[{id:"summary",text:"Summary",depth:2,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:875},{id:"async-utilities",text:"Async utilities",depth:2,charIndex:2017},{id:"findby-queries",text:"`findBy*` queries",depth:3,charIndex:2105},{id:"example-1",text:"Example",depth:4,charIndex:2833},{id:"waitfor-function",text:"`waitFor` function",depth:3,charIndex:3077},{id:"example-2",text:"Example",depth:4,charIndex:3599},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3,charIndex:3821},{id:"example-3",text:"Example",depth:4,charIndex:4413},{id:"fake-timers",text:"Fake Timers",depth:2,charIndex:4488}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/basics/async-tests.md"},{title:"Custom `render` function",routePath:"/12.x/cookbook/basics/custom-render",lang:"en",toc:[{id:"summary",text:"Summary",depth:3,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:291},{id:"more-info",text:"More info",depth:3,charIndex:1107},{id:"additional-params",text:"Additional params",depth:4,charIndex:1118},{id:"multiple-functions",text:"Multiple functions",depth:4,charIndex:1440},{id:"async-function",text:"Async function",depth:4,charIndex:1729}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/basics/custom-render.md",description:"Summary RNTL exposes the render function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests. Example Example full source code. More info Additional params A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management. Multiple functions Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens. Async function Make it async if you want to put some async setup in your custom render function."},{title:"Introduction",routePath:"/12.x/cookbook/",lang:"en",toc:[{id:"whats-inside-the-cookbook",text:"What's Inside the Cookbook?",depth:2,charIndex:431},{id:"whats-next",text:"What's Next?",depth:2,charIndex:1024}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/index.md",description:"Welcome to the React Native Testing Library (RNTL) Cookbook! This app is your go-to resource for learning how to effectively test React Native applications. It provides a collection of best practices, ready-made recipes, and tips & tricks to simplify and improve your testing workflow. Whether you’re a beginner just getting started or a seasoned developer looking to sharpen your skills, the Cookbook has something for everyone."},{title:"Jotai",routePath:"/12.x/cookbook/state-management/jotai",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"task-list-example",text:"Task List Example",depth:2,charIndex:332},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2,charIndex:1433},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2,charIndex:1898},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2,charIndex:3543},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2,charIndex:4793},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2,charIndex:5396},{id:"conclusion",text:"Conclusion",depth:2,charIndex:6072}],frontmatter:{},version:"12.x",_relativePath:"12.x/cookbook/state-management/jotai.md"},{title:"Testing environment",routePath:"/12.x/docs/advanced/testing-env",lang:"en",toc:[{id:"react-renderers",text:"React renderers",depth:2,charIndex:664},{id:"react-test-renderer",text:"React Test Renderer",depth:2,charIndex:1375},{id:"element-tree",text:"Element tree",depth:2,charIndex:2752},{id:"host-and-composite-components",text:"Host and composite components",depth:2,charIndex:3558},{id:"differentiating-between-host-and-composite-elements",text:"Differentiating between host and composite elements",depth:3,charIndex:5480},{id:"tree-nodes",text:"Tree nodes",depth:2,charIndex:5989},{id:"asserting-props",text:"Asserting props",depth:3,charIndex:6303},{id:"tree-navigation",text:"Tree navigation",depth:2,charIndex:7143},{id:"queries",text:"Queries",depth:2,charIndex:7880}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/advanced/testing-env.mdx",description:"React Native Testing Library allows you to write integration and component tests for your React Native app or library. While the JSX code used in tests closely resembles your React Native app, things are not as simple as they might appear. This document will describe the key elements of our testing environment and highlight things to be aware of when writing more advanced tests or diagnosing issues."},{title:"Understanding `act` function",routePath:"/12.x/docs/advanced/understanding-act",lang:"en",toc:[{id:"act-warnings",text:"`act` warnings",depth:2,charIndex:273},{id:"synchronous-act",text:"Synchronous `act`",depth:2,charIndex:968},{id:"responsibility",text:"Responsibility",depth:3,charIndex:985},{id:"when-to-use-act",text:"When to use act",depth:3,charIndex:2771},{id:"implementation",text:"Implementation",depth:3,charIndex:3854},{id:"asynchronous-act",text:"Asynchronous `act`",depth:2,charIndex:4315},{id:"asynchronous-code",text:"Asynchronous code",depth:3,charIndex:4841},{id:"solution-with-fake-timers",text:"Solution with fake timers",depth:3,charIndex:6146},{id:"solution-with-real-timers",text:"Solution with real timers",depth:3,charIndex:6658},{id:"async-act-warning",text:"Async act warning",depth:3,charIndex:8079},{id:"references",text:"References",depth:2,charIndex:8714}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/advanced/understanding-act.mdx",description:"When writing RNTL tests one of the things that confuses developers the most are cryptic act() function errors logged into console. In this article I will try to build an understanding of the purpose and behaviour of act() so you can build your tests with more confidence."},{title:"API Overview",routePath:"/12.x/docs/api",lang:"en",toc:[],frontmatter:{uri:"/api"},version:"12.x",_relativePath:"12.x/docs/api.md",description:"React Native Testing Library consists of following APIs: render function - render your UI components for testing purposesscreen object - access rendered UI:Queries - find relevant components by various predicates: role, text, test ids, etcLifecycle methods: rerender, unmountHelpers: debug, toJSON, rootJest matchers - validate assumptions about your UIUser Event - simulate common user interactions like press or type in a realistic wayFire Event - simulate any component event in a simplified way purposesMisc APIs:renderHook function - render hooks for testingAsync utils: findBy* queries, wait, waitForElementToBeRemovedConfiguration: configure, resetToDefaultsAccessibility: isHiddenFromAccessibilityOther: within, act, cleanup"},{title:"Fire Event API",routePath:"/12.x/docs/api/events/fire-event",lang:"en",toc:[{id:"press",text:"`fireEvent.press`",depth:3,charIndex:1844},{id:"change-text",text:"`fireEvent.changeText`",depth:3,charIndex:2534},{id:"scroll",text:"`fireEvent.scroll`",depth:3,charIndex:3197},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4,charIndex:3378}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/events/fire-event.mdx",description:"The fireEvent API allows you to trigger all kinds of event handlers on both host and composite components. It will try to invoke a single event handler traversing the component tree bottom-up from passed element and trying to find enabled event handler named onXxx when xxx is the name of the event passed. Unlike User Event, this API does not automatically pass event object to event handler, this is responsibility of the user to construct such object. An example using fireEvent with native events that aren't already aliased by the fireEvent api. FireEvent exposes convenience methods for common events like: press, changeText, scroll. fireEvent.press {#press} Invokes press event handler on the element or parent element in the tree. fireEvent.changeText {#change-text} Invokes changeText event handler on the element or parent element in the tree. fireEvent.scroll {#scroll} Invokes scroll event handler on the element or parent element in the tree. On a ScrollView"},{title:"User Event interactions",routePath:"/12.x/docs/api/events/user-event",lang:"en",toc:[{id:"comparison-with-fire-event-api",text:"Comparison with Fire Event API",depth:2,charIndex:91},{id:"setup",text:"`setup()`",depth:2,charIndex:1294},{id:"setup-options",text:"Options",depth:3,charIndex:1528},{id:"press",text:"`press()`",depth:2,charIndex:1789},{id:"longpress",text:"`longPress()`",depth:2,charIndex:2537},{id:"longpress-options",text:"Options",depth:3,charIndex:3402},{id:"type",text:"`type()`",depth:2,charIndex:3512},{id:"type-options",text:"Options",depth:3,charIndex:4184},{id:"type-sequence",text:"Sequence of events",depth:3,charIndex:4464},{id:"clear",text:"`clear()`",depth:2,charIndex:5193},{id:"clear-sequence",text:"Sequence of events",depth:3,charIndex:5506},{id:"paste",text:"`paste()`",depth:2,charIndex:5789},{id:"paste-sequence",text:"Sequence of events",depth:3,charIndex:6133},{id:"scroll-to",text:"`scrollTo()`",depth:2,charIndex:6404},{id:"scroll-to-options",text:"Options",depth:3,charIndex:7875},{id:"scroll-sequence",text:"Sequence of events",depth:3,charIndex:8865}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/events/user-event.mdx"},{title:"Jest matchers",routePath:"/12.x/docs/api/jest-matchers",lang:"en",toc:[{id:"setup",text:"Setup",depth:2,charIndex:260},{id:"migration-from-legacy-jest-native-matchers",text:"Migration from legacy Jest Native matchers.",depth:2,charIndex:727},{id:"checking-element-existence",text:"Checking element existence",depth:2,charIndex:889},{id:"tobeonthescreen",text:"`toBeOnTheScreen()`",depth:3,charIndex:917},{id:"element-content",text:"Element Content",depth:2,charIndex:1173},{id:"tohavetextcontent",text:"`toHaveTextContent()`",depth:3,charIndex:1190},{id:"tocontainelement",text:"`toContainElement()`",depth:3,charIndex:1545},{id:"tobeemptyelement",text:"`toBeEmptyElement()`",depth:3,charIndex:1739},{id:"checking-element-state",text:"Checking element state",depth:2,charIndex:1904},{id:"tohavedisplayvalue",text:"`toHaveDisplayValue()`",depth:3,charIndex:1928},{id:"tohaveaccessibilityvalue",text:"`toHaveAccessibilityValue()`",depth:3,charIndex:2292},{id:"tobeenabled",text:"`toBeEnabled()` / `toBeDisabled`",depth:3,charIndex:2900},{id:"tobeselected",text:"`toBeSelected()`",depth:3,charIndex:3437},{id:"tobechecked",text:"`toBeChecked()` / `toBePartiallyChecked()`",depth:3,charIndex:3688},{id:"tobeexpanded",text:"`toBeExpanded()` / `toBeCollapsed()`",depth:3,charIndex:4245},{id:"tobebusy",text:"`toBeBusy()`",depth:3,charIndex:4866},{id:"checking-element-style",text:"Checking element style",depth:2,charIndex:5097},{id:"tobevisible",text:"`toBeVisible()`",depth:3,charIndex:5121},{id:"tohavestyle",text:"`toHaveStyle()`",depth:3,charIndex:5422},{id:"other-matchers",text:"Other matchers",depth:2,charIndex:5567},{id:"tohaveaccessiblename",text:"`toHaveAccessibleName()`",depth:3,charIndex:5583},{id:"tohaveprop",text:"`toHaveProp()`",depth:3,charIndex:6241}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/jest-matchers.mdx",description:"This guide describes built-in Jest matchers, we recommend using these matchers as they provide readable tests, accessibility support, and a better developer experience."},{title:"Accessibility",routePath:"/12.x/docs/api/misc/accessibility",lang:"en",toc:[{id:"ishiddenfromaccessibility",text:"`isHiddenFromAccessibility`",depth:2,charIndex:0}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/accessibility.mdx"},{title:"Async utilities",routePath:"/12.x/docs/api/misc/async",lang:"en",toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2,charIndex:0},{id:"waitfor",text:"`waitFor`",depth:2,charIndex:181},{id:"using-a-react-native-version--071-with-jest-fake-timers",text:"Using a React Native version < 0.71 with Jest fake timers",depth:3,charIndex:2474},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2,charIndex:4050}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/async.mdx"},{title:"Configuration",routePath:"/12.x/docs/api/misc/config",lang:"en",toc:[{id:"configure",text:"`configure`",depth:2,charIndex:0},{id:"asyncutiltimeout-option",text:"`asyncUtilTimeout` option",depth:3,charIndex:207},{id:"defaultincludehiddenelements-option",text:"`defaultIncludeHiddenElements` option",depth:3,charIndex:363},{id:"defaultdebugoptions-option",text:"`defaultDebugOptions` option",depth:3,charIndex:749},{id:"concurrent-root",text:"`concurrentRoot` option",depth:3,charIndex:929},{id:"resettodefaults",text:"`resetToDefaults()`",depth:2,charIndex:1121},{id:"environment-variables",text:"Environment variables",depth:2,charIndex:1171},{id:"rntl_skip_auto_cleanup",text:"`RNTL_SKIP_AUTO_CLEANUP`",depth:3,charIndex:1194},{id:"rntl_skip_auto_detect_fake_timers",text:"`RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS`",depth:3,charIndex:1443}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/config.mdx"},{title:"Other helpers",routePath:"/12.x/docs/api/misc/other",lang:"en",toc:[{id:"within",text:"`within`, `getQueriesForElement`",depth:2,charIndex:0},{id:"act",text:"`act`",depth:2,charIndex:966},{id:"cleanup",text:"`cleanup`",depth:2,charIndex:1311}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/other.mdx"},{title:"`renderHook` function",routePath:"/12.x/docs/api/misc/render-hook",lang:"en",toc:[{id:"options",text:"`options`",depth:2,charIndex:1299},{id:"initialprops",text:"`initialProps`",depth:3,charIndex:1430},{id:"wrapper",text:"`wrapper`",depth:3,charIndex:1608},{id:"renderhookresult",text:"`RenderHookResult`",depth:2,charIndex:1793},{id:"result",text:"`result`",depth:3,charIndex:2026},{id:"rerender",text:"`rerender`",depth:3,charIndex:2243},{id:"unmount",text:"`unmount`",depth:3,charIndex:2527},{id:"examples",text:"Examples",depth:2,charIndex:2649},{id:"with-initialprops",text:"With `initialProps`",depth:3,charIndex:2721},{id:"with-wrapper",text:"With `wrapper`",depth:3,charIndex:3371}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/misc/render-hook.mdx",description:"Renders a test component that will call the provided callback, including any hooks it calls, every time it renders. Returns RenderHookResult object, which you can interact with. The renderHook function accepts the following arguments: Callback is a function that is called each render of the test component. This function should call one or more hooks for testing. The props passed into the callback will be the initialProps provided in the options to renderHook, unless new props are provided by a subsequent rerender call."},{title:"Queries",routePath:"/12.x/docs/api/queries",lang:"en",toc:[{id:"accessing-queries",text:"Accessing queries",depth:2,charIndex:223},{id:"using-screen-object",text:"Using `screen` object",depth:3,charIndex:379},{id:"using-render-result",text:"Using `render` result",depth:3,charIndex:759},{id:"query-parts",text:"Query parts",depth:2,charIndex:1099},{id:"query-variant",text:"Query variant",depth:2,charIndex:1355},{id:"get-by",text:"`getBy*` queries",depth:3,charIndex:2045},{id:"get-all-by",text:"`getAllBy*` queries",depth:3,charIndex:2305},{id:"query-by",text:"`queryBy*` queries",depth:3,charIndex:2488},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3,charIndex:2790},{id:"find-by",text:"`findBy*` queries",depth:3,charIndex:2992},{id:"find-all-by",text:"`findAllBy*` queries",depth:3,charIndex:3403},{id:"query-predicates",text:"Query predicates",depth:2,charIndex:4166},{id:"by-role",text:"`*ByRole`",depth:3,charIndex:4481},{id:"by-role-options",text:"Options",depth:4,charIndex:5680},{id:"by-label-text",text:"`*ByLabelText`",depth:3,charIndex:8348},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3,charIndex:8946},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3,charIndex:9516},{id:"by-text",text:"`*ByText`",depth:3,charIndex:10060},{id:"by-hint-text",text:"`*ByHintText`",depth:3,charIndex:10737},{id:"by-test-id",text:"`*ByTestId`",depth:3,charIndex:11543},{id:"common-options",text:"Common options",depth:3,charIndex:12479},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4,charIndex:12735},{id:"textmatch-type",text:"TextMatch type",depth:2,charIndex:13628},{id:"examples",text:"Examples",depth:3,charIndex:13794},{id:"text-match-options",text:"Options",depth:3,charIndex:14598},{id:"precision",text:"Precision",depth:4,charIndex:14629},{id:"normalization",text:"Normalization",depth:4,charIndex:15475},{id:"legacy-unit-testing-helpers",text:"Legacy unit testing helpers",depth:2,charIndex:16961},{id:"unsafe_bytype",text:"`UNSAFE_ByType`",depth:3,charIndex:17362},{id:"unsafe_byprops",text:"`UNSAFE_ByProps`",depth:3,charIndex:17669}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/queries.mdx",description:"Queries are one of the main building blocks for the React Native Testing Library. They enable you to find relevant elements in the element tree, which represents your application's user interface when running under tests."},{title:"`render` function",routePath:"/12.x/docs/api/render",lang:"en",toc:[{id:"render-options",text:"Options",depth:3,charIndex:651},{id:"wrapper-option",text:"`wrapper` option",depth:4,charIndex:806},{id:"concurrent-root",text:"`concurrentRoot` option",depth:4,charIndex:1099},{id:"createnodemock-option",text:"`createNodeMock` option",depth:4,charIndex:1291},{id:"unstable_validatestringsrenderedwithintext-option",text:"`unstable_validateStringsRenderedWithinText` option",depth:4,charIndex:1577},{id:"render-result",text:"Result",depth:3,charIndex:2366}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/render.mdx",description:"The render function is the entry point for writing React Native Testing Library tests. It deeply renders the given React element and returns helpers to query the output components' structure. When using React context providers, like Redux Provider, you'll likely want to wrap rendered component with them. In such cases, it's convenient to create your own custom render method. Follow this great guide on how to set this up. Options {#render-options} The behavior of the render method can be customized by passing various options as a second argument of the RenderOptions type: wrapper option This option allows you to wrap the tested component, passed as the first option to the render() function, in an additional wrapper component. This is useful for creating reusable custom render functions for common React Context providers. concurrentRoot option {#concurrent-root} Set to true to enable concurrent rendering used in the React Native New Architecture. Otherwise render will default to legacy synchronous rendering. createNodeMock option This option allows you to pass createNodeMock option to ReactTestRenderer.create() method in order to allow for custom mock refs. You can learn more about this option from React Test Renderer documentation. unstable_validateStringsRenderedWithinText option This experimental option allows you to replicate React Native behavior of throwing Invariant Violation: Text strings must be rendered within a component error when you try to render string value under components different than , e.g., under . React Test Renderer does not enforce this check; hence, by default, React Native Testing Library also does not check this. That might result in runtime errors when running your code on a device, while the code works without errors in tests. Result {#render-result} The render function returns the same queries and utilities as the screen object. We recommended using the screen object as more developer-friendly way. See this article from Kent C. Dodds for more details."},{title:"`screen` object",routePath:"/12.x/docs/api/screen",lang:"en",toc:[{id:"queries",text:"`...queries`",depth:3,charIndex:588},{id:"example",text:"Example",depth:4,charIndex:773},{id:"rerender",text:"`rerender`",depth:3,charIndex:875},{id:"unmount",text:"`unmount`",depth:3,charIndex:1281},{id:"debug",text:"`debug`",depth:3,charIndex:1549},{id:"debug-message-option",text:"`message` option",depth:4,charIndex:1699},{id:"debug-map-props-option",text:"`mapProps` option",depth:4,charIndex:1997},{id:"tojson",text:"`toJSON`",depth:3,charIndex:2988},{id:"root",text:"`root`",depth:3,charIndex:3122},{id:"unsafe_root",text:"`UNSAFE_root`",depth:3,charIndex:3346}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/api/screen.mdx",description:"The screen object offers a recommended way to access queries and utilities for the currently rendered UI. This object is assigned after the render call and cleared after each test by calling cleanup. If no render call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access. ...queries The most important feature of screen is providing a set of helpful queries that allow you to find certain elements in the view hierarchy. See Queries for a complete list. Example rerender Also available under update alias Re-render the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and key) as the previous element, the tree will be updated; otherwise, it will re-mount a new tree, in both cases triggering the appropriate lifecycle events. unmount Unmount the in-memory tree, triggering the appropriate lifecycle events. debug Pretty prints deeply rendered component passed to render. message option {#debug-message-option} You can provide a message that will be printed on top. logs optional message and colored JSX: mapProps option {#debug-map-props-option} You can use the mapProps option to transform the props that will be printed : This will log the rendered JSX without the style props. The children prop cannot be filtered out so the following will print all rendered components with all props but children filtered out. This option can be used to target specific props when debugging a query (for instance, keeping only the children prop when debugging a getByText query). You can also transform prop values so that they are more readable (e.g., flatten styles). Or remove props that have little value when debugging tests, e.g. path prop for svgs toJSON Get the rendered component JSON representation, e.g. for snapshot testing. root Returns the rendered root host element. This API is primarily useful for component tests, as it allows you to access root host view without using *ByTestId queries or similar methods. UNSAFE_root Returns the rendered composite root element."},{title:"Community resources",routePath:"/12.x/docs/guides/community-resources",lang:"en",toc:[{id:"recommended-content",text:"Recommended content",depth:2,charIndex:0},{id:"older-potentially-outdated-content",text:"Older, potentially outdated content",depth:2,charIndex:569}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/guides/community-resources.mdx"},{title:"FAQ",routePath:"/12.x/docs/guides/faq",lang:"en",toc:[{id:"can-i-test-the-native-features-of-react-native-apps",text:"Can I test the native features of React Native apps?",depth:2,charIndex:0},{id:"should-i-usemigrate-to-screen-queries",text:"Should I use/migrate to `screen` queries?",depth:2,charIndex:1188},{id:"should-i-usemigrate-to-user-event-interactions",text:"Should I use/migrate to User Event interactions?",depth:2,charIndex:1568}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/guides/faq.mdx"},{title:"How should I query?",routePath:"/12.x/docs/guides/how-to-query",lang:"en",toc:[{id:"query-parts",text:"Query parts",depth:2,charIndex:270},{id:"query-variant",text:"Query variant",depth:2,charIndex:528},{id:"idiomatic-query-variants",text:"Idiomatic query variants",depth:3,charIndex:1218},{id:"query-predicate",text:"Query predicate",depth:2,charIndex:2140},{id:"idiomatic-query-predicates",text:"Idiomatic query predicates",depth:3,charIndex:2704},{id:"by-role-query",text:"1. By Role query",depth:3,charIndex:3200},{id:"by-role-query-name-option",text:"Name option",depth:4,charIndex:4257},{id:"text-input-queries",text:"2. Text input queries",depth:3,charIndex:4796},{id:"other-accessible-queries",text:"3. Other accessible queries",depth:3,charIndex:5593},{id:"test-id-query",text:"4. Test ID query",depth:3,charIndex:6022}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/guides/how-to-query.mdx",description:"React Native Testing Library provides various query types, allowing great flexibility in finding views appropriate for your tests. At the same time, the number of queries might be confusing. This guide aims to help you pick the correct queries for your test scenarios."},{title:"Troubleshooting",routePath:"/12.x/docs/guides/troubleshooting",lang:"en",toc:[{id:"matching-react-native-react--react-test-renderer-versions",text:"Matching React Native, React & React Test Renderer versions",depth:2,charIndex:113},{id:"example-repository",text:"Example repository",depth:2,charIndex:985},{id:"undefined-component-error",text:"Undefined component error",depth:2,charIndex:1232},{id:"mocking-react-native",text:"Mocking React Native",depth:3,charIndex:2327},{id:"act-warnings",text:"Act warnings",depth:2,charIndex:2655}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/guides/troubleshooting.mdx",description:"This guide describes common issues found by users when integrating React Native Test Library to their projects:"},{title:"Migration to built-in Jest matchers",routePath:"/12.x/docs/migration/jest-matchers",lang:"en",toc:[{id:"general-notes",text:"General notes",depth:2,charIndex:116},{id:"usage",text:"Usage",depth:2,charIndex:528},{id:"gradual-migration",text:"Gradual migration",depth:3,charIndex:720},{id:"migration-details",text:"Migration details",depth:2,charIndex:1214},{id:"matchers-not-requiring-changes",text:"Matchers not requiring changes",depth:3,charIndex:1233},{id:"replaced-matchers",text:"Replaced matchers",depth:3,charIndex:1517},{id:"added-matchers",text:"Added matchers",depth:3,charIndex:1897},{id:"noteworthy-details",text:"Noteworthy details",depth:3,charIndex:1957}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/jest-matchers.mdx",description:"This guide describes the steps necessary to migrate from legacy Jest Native matchers v5 to built-in Jest matchers."},{title:"Migration to 11.x",routePath:"/12.x/docs/migration/previous/v11",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:150},{id:"update-to-jest-28-if-you-use-fake-timers",text:"Update to Jest 28 if you use fake timers",depth:3,charIndex:168},{id:"refactor-legacy-waitforoptions-position",text:"Refactor legacy `waitForOptions` position",depth:3,charIndex:391},{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",text:'Triggering non-touch events on targets with `pointerEvents="box-none"` prop',depth:3,charIndex:1335},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:1684}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/previous/v11.mdx",description:"Migration to React Native Testing Library version 11 from version 9.x or 10.x should be a relatively easy task due small amount of breaking changes."},{title:"Migration to 2.x",routePath:"/12.x/docs/migration/previous/v2",lang:"en",toc:[{id:"dropping-node-8",text:"Dropping Node 8",depth:2,charIndex:97},{id:"auto-cleanup",text:"Auto Cleanup",depth:2,charIndex:320},{id:"waitfor-api-changes",text:"WaitFor API changes",depth:2,charIndex:1327},{id:"removed-global-debug-function",text:"Removed global `debug` function",depth:2,charIndex:2107},{id:"removed-global-shallow-function",text:"Removed global `shallow` function",depth:2,charIndex:2256},{id:"removed-functions",text:"Removed functions",depth:2,charIndex:2725},{id:"some-bytestid-queries-behavior-changes",text:"Some `ByTestId` queries behavior changes",depth:2,charIndex:3422},{id:"deprecated-flushmicrotasksqueue",text:"Deprecated `flushMicrotasksQueue`",depth:2,charIndex:4166}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/previous/v2.mdx",description:"This guide describes steps necessary to migrate from React Native Testing Library v1.x to v2.x."},{title:"Migration to 7.x",routePath:"/12.x/docs/migration/previous/v7",lang:"en",toc:[{id:"guide-for-react-native-testing-library-users",text:"Guide for `react-native-testing-library` users",depth:2,charIndex:304},{id:"renaming-the-library",text:"Renaming the library",depth:3,charIndex:455},{id:"new-aliases",text:"New aliases",depth:3,charIndex:1339},{id:"renaming-byplaceholder-queries",text:"Renaming `ByPlaceholder` queries",depth:3,charIndex:1747},{id:"fireevent-support-for-disabled-components",text:"`fireEvent` support for disabled components",depth:3,charIndex:2059},{id:"guide-for-testing-libraryreact-native-users",text:"Guide for `@testing-library/react-native` users",depth:2,charIndex:2528},{id:"renaming-wait-helpers",text:'Renaming "wait" helpers',depth:3,charIndex:2843},{id:"changes-to-bytestid-queries",text:"Changes to `ByTestId` queries",depth:3,charIndex:2987},{id:"no-bytitle-queries",text:"No `ByTitle` queries",depth:3,charIndex:3144},{id:"no-custom-jest-configuration",text:"No custom Jest configuration",depth:3,charIndex:3591},{id:"cleanup-is-included-by-default",text:"Cleanup is included by default",depth:3,charIndex:3974},{id:"no-nativetestinstance-abstraction",text:"No NativeTestInstance abstraction",depth:3,charIndex:4467},{id:"no-container-nor-baseelement-returned-from-render",text:"No `container` nor `baseElement` returned from `render`",depth:3,charIndex:4671},{id:"firing-events-changes",text:"Firing events changes",depth:3,charIndex:4973}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/previous/v7.mdx",description:"As the version 7.0 involves merging two libraries together, there are two variants for migration guide, dependent on library you used previously:"},{title:"Migration to 9.x",routePath:"/12.x/docs/migration/previous/v9",lang:"en",toc:[{id:"support-for-text-match-options-aka-string-precision-api",text:"Support for text match options a.k.a string precision API",depth:2,charIndex:281},{id:"reverted-matching-text-across-several-nodes",text:"Reverted matching text across several nodes",depth:2,charIndex:1275},{id:"future-plans",text:"Future plans",depth:2,charIndex:2038}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/previous/v9.mdx",description:"Version 7.0 brought React Native Testing Library into the @testing-library family. Since it has been implemented independently from its web counterpart – the React Testing Library – there are some differences in the API and behavior. Version 9.0 solves several of these problems."},{title:"Migration to 12.x",routePath:"/12.x/docs/migration/v12",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:489},{id:"1-all-queries-exclude-elements-hidden-from-accessibility-by-default",text:"1. All queries exclude elements hidden from accessibility by default",depth:3,charIndex:507},{id:"2-byrole-queries-now-return-only-accessibility-elements",text:"2. `*ByRole` queries now return only accessibility elements",depth:3,charIndex:1122},{id:"examples",text:"Examples",depth:4,charIndex:1510},{id:"3-bytext-bydisplayvalue-byplaceholdertext-queries-now-return-host-elements",text:"3. `*ByText`, `*ByDisplayValue`, `*ByPlaceholderText` queries now return host elements",depth:3,charIndex:2192},{id:"4-container-api-has-been-renamed-to-unsafe_root",text:"4. `container` API has been renamed to `UNSAFE_root`.",depth:3,charIndex:2754},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:3457}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/migration/v12.mdx",description:"React Native Testing Library 12 introduces a handful of breaking changes compared to 11.x versions. We believe they were necessary to improve the experience using the library and help the users fall into the pit of success when writing meaningful tests. You will find migration instructions for each and every change described below."},{title:"Introduction",routePath:"/12.x/docs/start/intro",lang:"en",toc:[{id:"the-problem",text:"The problem",depth:2,charIndex:0},{id:"this-solution",text:"This solution",depth:2,charIndex:474},{id:"example",text:"Example",depth:2,charIndex:977}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/start/intro.md"},{title:"Quick Start",routePath:"/12.x/docs/start/quick-start",lang:"en",toc:[{id:"installation",text:"Installation",depth:2,charIndex:0},{id:"jest-matchers",text:"Jest matchers",depth:3,charIndex:360},{id:"eslint-plugin",text:"ESLint plugin",depth:3,charIndex:567}],frontmatter:{},version:"12.x",_relativePath:"12.x/docs/start/quick-start.mdx"},{title:"",routePath:"/12.x/",lang:"en",toc:[],frontmatter:{pageType:"home",hero:{image:{src:{light:"/img/logo-light.svg",dark:"/img/logo-dark.svg"}},name:"JavaScript Integration testing for React Native",tagline:"The more your tests resemble the way your software is used, the more confidence they can give you.
      — Kent C. Dodds",actions:[{theme:"brand",text:"Quick Start",link:"/12.x/docs/start/quick-start"},{theme:"alt",text:"Explore API",link:"/12.x/docs/api"}]},features:[{title:"Maintainable",details:"Write maintainable tests for your React Native apps.",icon:''},{title:"Reliable",details:"Promotes testing public APIs and avoiding implementation details.",icon:''},{title:"Community Driven",details:"Supported by React Native community and its core contributors.",icon:''}]},version:"12.x",_relativePath:"12.x/index.md"},{title:"Network Requests",routePath:"/cookbook/advanced/network-requests",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"phonebook-example",text:"Phonebook Example",depth:2,charIndex:531},{id:"start-testing-with-a-simple-test",text:"Start testing with a simple test",depth:2,charIndex:4753},{id:"testing-error-handling",text:"Testing error handling",depth:2,charIndex:7847},{id:"global-guarding-against-unwanted-api-requests",text:"Global guarding against unwanted API requests",depth:2,charIndex:9680},{id:"conclusion",text:"Conclusion",depth:2,charIndex:10698},{id:"further-reading-and-alternatives",text:"Further Reading and Alternatives",depth:2,charIndex:11233}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/advanced/network-requests.md"},{title:"Async tests",routePath:"/cookbook/basics/async-tests",lang:"en",toc:[{id:"summary",text:"Summary",depth:2,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:875},{id:"async-utilities",text:"Async utilities",depth:2,charIndex:2017},{id:"findby-queries",text:"`findBy*` queries",depth:3,charIndex:2105},{id:"example-1",text:"Example",depth:4,charIndex:2833},{id:"waitfor-function",text:"`waitFor` function",depth:3,charIndex:3077},{id:"example-2",text:"Example",depth:4,charIndex:3599},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3,charIndex:3821},{id:"example-3",text:"Example",depth:4,charIndex:4413},{id:"fake-timers",text:"Fake Timers",depth:2,charIndex:4488}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/basics/async-tests.md"},{title:"Custom `render` function",routePath:"/cookbook/basics/custom-render",lang:"en",toc:[{id:"summary",text:"Summary",depth:3,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:291},{id:"more-info",text:"More info",depth:3,charIndex:1107},{id:"additional-params",text:"Additional params",depth:4,charIndex:1118},{id:"multiple-functions",text:"Multiple functions",depth:4,charIndex:1440},{id:"async-function",text:"Async function",depth:4,charIndex:1729}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/basics/custom-render.md",description:"Summary RNTL exposes the render function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests. Example Example full source code. More info Additional params A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management. Multiple functions Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens. Async function Make it async if you want to put some async setup in your custom render function."},{title:"Introduction",routePath:"/cookbook/",lang:"en",toc:[{id:"whats-inside-the-cookbook",text:"What's Inside the Cookbook?",depth:2,charIndex:431},{id:"whats-next",text:"What's Next?",depth:2,charIndex:1024}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/index.md",description:"Welcome to the React Native Testing Library (RNTL) Cookbook! This app is your go-to resource for learning how to effectively test React Native applications. It provides a collection of best practices, ready-made recipes, and tips & tricks to simplify and improve your testing workflow. Whether you’re a beginner just getting started or a seasoned developer looking to sharpen your skills, the Cookbook has something for everyone."},{title:"Jotai",routePath:"/cookbook/state-management/jotai",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"task-list-example",text:"Task List Example",depth:2,charIndex:332},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2,charIndex:1433},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2,charIndex:1898},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2,charIndex:3543},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2,charIndex:4793},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2,charIndex:5396},{id:"conclusion",text:"Conclusion",depth:2,charIndex:6072}],frontmatter:{},version:"13.x",_relativePath:"13.x/cookbook/state-management/jotai.md"},{title:"Testing environment",routePath:"/docs/advanced/testing-env",lang:"en",toc:[{id:"react-renderers",text:"React renderers",depth:2,charIndex:660},{id:"react-test-renderer",text:"React Test Renderer",depth:2,charIndex:1371},{id:"element-tree",text:"Element tree",depth:2,charIndex:2718},{id:"host-and-composite-components",text:"Host and composite components",depth:2,charIndex:3524},{id:"differentiating-between-host-and-composite-elements",text:"Differentiating between host and composite elements",depth:3,charIndex:5446},{id:"tree-nodes",text:"Tree nodes",depth:2,charIndex:5955},{id:"asserting-props",text:"Asserting props",depth:3,charIndex:6263},{id:"tree-navigation",text:"Tree navigation",depth:2,charIndex:7103},{id:"queries",text:"Queries",depth:2,charIndex:7840}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/advanced/testing-env.mdx",description:"React Native Testing Library allows you to write integration and component tests for your React Native app or library. While the JSX code used in tests closely resembles your React Native app, things aren't as simple as they might appear. This document describes the key elements of our testing environment and highlights things to be aware of when writing more advanced tests or diagnosing issues."},{title:"Third-Party Library Integration",routePath:"/docs/advanced/third-party-integration",lang:"en",toc:[{id:"handling-events-in-third-party-libraries",text:"Handling Events in Third-Party Libraries",depth:2,charIndex:230},{id:"example-react-native-gesture-handler",text:"Example: React Native Gesture Handler",depth:3,charIndex:1009}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/advanced/third-party-integration.mdx",description:"The React Native Testing Library is designed to simulate the core behaviors of React Native. However, it doesn't replicate the internal logic of third-party libraries. This guide explains how to integrate your library with RNTL."},{title:"Understanding `act` function",routePath:"/docs/advanced/understanding-act",lang:"en",toc:[{id:"act-warnings",text:"`act` warnings",depth:2,charIndex:236},{id:"synchronous-act",text:"Synchronous `act`",depth:2,charIndex:931},{id:"responsibility",text:"Responsibility",depth:3,charIndex:948},{id:"when-to-use-act",text:"When to use act",depth:3,charIndex:2702},{id:"implementation",text:"Implementation",depth:3,charIndex:3738},{id:"asynchronous-act",text:"Asynchronous `act`",depth:2,charIndex:4199},{id:"asynchronous-code",text:"Asynchronous code",depth:3,charIndex:4725},{id:"solution-with-fake-timers",text:"Solution with fake timers",depth:3,charIndex:5966},{id:"solution-with-real-timers",text:"Solution with real timers",depth:3,charIndex:6469},{id:"async-act-warning",text:"Async act warning",depth:3,charIndex:7902},{id:"references",text:"References",depth:2,charIndex:8518}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/advanced/understanding-act.mdx",description:"When writing RNTL tests, one of the things that confuses developers the most are cryptic act() function errors logged to the console. This article explains the purpose and behavior of act() so you can write tests with more confidence."},{title:"API Overview",routePath:"/docs/api",lang:"en",toc:[],frontmatter:{uri:"/api"},version:"13.x",_relativePath:"13.x/docs/api.md",description:"React Native Testing Library consists of following APIs: render function - render your UI components for testing purposesscreen object - access rendered UI:Queries - find relevant components by various predicates: role, text, test ids, etcLifecycle methods: rerender, unmountHelpers: debug, toJSON, rootJest matchers - validate assumptions about your UIUser Event - simulate common user interactions like press or type in a realistic wayFire Event - simulate any component event in a simplified way purposesMisc APIs:renderHook function - render hooks for testingAsync utils: findBy* queries, wait, waitForElementToBeRemovedConfiguration: configure, resetToDefaultsAccessibility: isHiddenFromAccessibilityOther: within, act, cleanup"},{title:"Fire Event API",routePath:"/docs/api/events/fire-event",lang:"en",toc:[{id:"fire-event",text:"`fireEvent`",depth:2,charIndex:0},{id:"press",text:"`fireEvent.press`",depth:3,charIndex:1835},{id:"change-text",text:"`fireEvent.changeText`",depth:3,charIndex:2532},{id:"scroll",text:"`fireEvent.scroll`",depth:3,charIndex:3202},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4,charIndex:3600},{id:"fire-event-async",text:"`fireEventAsync`",depth:2,charIndex:4097},{id:"async-press",text:"`fireEventAsync.press`",depth:3,charIndex:4952},{id:"async-change-text",text:"`fireEventAsync.changeText`",depth:3,charIndex:5390},{id:"async-scroll",text:"`fireEventAsync.scroll`",depth:3,charIndex:5900}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/events/fire-event.mdx"},{title:"User Event interactions",routePath:"/docs/api/events/user-event",lang:"en",toc:[{id:"comparison-with-fire-event-api",text:"Comparison with Fire Event API",depth:2,charIndex:0},{id:"setup",text:"`setup()`",depth:2,charIndex:1118},{id:"setup-options",text:"Options",depth:3,charIndex:1352},{id:"press",text:"`press()`",depth:2,charIndex:1613},{id:"longpress",text:"`longPress()`",depth:2,charIndex:2303},{id:"longpress-options",text:"Options",depth:3,charIndex:3153},{id:"type",text:"`type()`",depth:2,charIndex:3263},{id:"type-options",text:"Options",depth:3,charIndex:3922},{id:"type-sequence",text:"Sequence of events",depth:3,charIndex:4202},{id:"clear",text:"`clear()`",depth:2,charIndex:4931},{id:"clear-sequence",text:"Sequence of events",depth:3,charIndex:5231},{id:"paste",text:"`paste()`",depth:2,charIndex:5514},{id:"paste-sequence",text:"Sequence of events",depth:3,charIndex:5845},{id:"scroll-to",text:"`scrollTo()`",depth:2,charIndex:6116},{id:"scroll-to-options",text:"Options",depth:3,charIndex:7512},{id:"scroll-sequence",text:"Sequence of events",depth:3,charIndex:8502}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/events/user-event.mdx"},{title:"Jest matchers",routePath:"/docs/api/jest-matchers",lang:"en",toc:[{id:"setup",text:"Setup",depth:2,charIndex:117},{id:"migration-from-legacy-jest-native-matchers",text:"Migration from legacy Jest Native matchers",depth:2,charIndex:217},{id:"checking-element-existence",text:"Checking element existence",depth:2,charIndex:327},{id:"tobeonthescreen",text:"`toBeOnTheScreen()`",depth:3,charIndex:355},{id:"element-content",text:"Element Content",depth:2,charIndex:543},{id:"tohavetextcontent",text:"`toHaveTextContent()`",depth:3,charIndex:560},{id:"tocontainelement",text:"`toContainElement()`",depth:3,charIndex:863},{id:"tobeemptyelement",text:"`toBeEmptyElement()`",depth:3,charIndex:1016},{id:"checking-element-state",text:"Checking element state",depth:2,charIndex:1135},{id:"tohavedisplayvalue",text:"`toHaveDisplayValue()`",depth:3,charIndex:1159},{id:"tohaveaccessibilityvalue",text:"`toHaveAccessibilityValue()`",depth:3,charIndex:1466},{id:"tobeenabled",text:"`toBeEnabled()` / `toBeDisabled`",depth:3,charIndex:1964},{id:"tobeselected",text:"`toBeSelected()`",depth:3,charIndex:2342},{id:"tobechecked",text:"`toBeChecked()` / `toBePartiallyChecked()`",depth:3,charIndex:2487},{id:"tobeexpanded",text:"`toBeExpanded()` / `toBeCollapsed()`",depth:3,charIndex:2905},{id:"tobebusy",text:"`toBeBusy()`",depth:3,charIndex:3323},{id:"checking-element-style",text:"Checking element style",depth:2,charIndex:3448},{id:"tobevisible",text:"`toBeVisible()`",depth:3,charIndex:3472},{id:"tohavestyle",text:"`toHaveStyle()`",depth:3,charIndex:3683},{id:"other-matchers",text:"Other matchers",depth:2,charIndex:3801},{id:"tohaveaccessiblename",text:"`toHaveAccessibleName()`",depth:3,charIndex:3817},{id:"tohaveprop",text:"`toHaveProp()`",depth:3,charIndex:4405}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/jest-matchers.mdx",description:"This guide describes built-in Jest matchers. These matchers provide readable assertions with accessibility support."},{title:"Accessibility",routePath:"/docs/api/misc/accessibility",lang:"en",toc:[{id:"ishiddenfromaccessibility",text:"`isHiddenFromAccessibility`",depth:2,charIndex:0}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/accessibility.mdx"},{title:"Async utilities",routePath:"/docs/api/misc/async",lang:"en",toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2,charIndex:0},{id:"waitfor",text:"`waitFor`",depth:2,charIndex:181},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2,charIndex:3467}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/async.mdx"},{title:"Configuration",routePath:"/docs/api/misc/config",lang:"en",toc:[{id:"configure",text:"`configure`",depth:2,charIndex:0},{id:"asyncutiltimeout-option",text:"`asyncUtilTimeout` option",depth:3,charIndex:207},{id:"defaultincludehiddenelements-option",text:"`defaultIncludeHiddenElements` option",depth:3,charIndex:363},{id:"defaultdebugoptions-option",text:"`defaultDebugOptions` option",depth:3,charIndex:734},{id:"concurrent-root",text:"`concurrentRoot` option",depth:3,charIndex:904},{id:"resettodefaults",text:"`resetToDefaults()`",depth:2,charIndex:1093},{id:"environment-variables",text:"Environment variables",depth:2,charIndex:1143},{id:"rntl_skip_auto_cleanup",text:"`RNTL_SKIP_AUTO_CLEANUP`",depth:3,charIndex:1166},{id:"rntl_skip_auto_detect_fake_timers",text:"`RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS`",depth:3,charIndex:1417}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/config.mdx"},{title:"Other helpers",routePath:"/docs/api/misc/other",lang:"en",toc:[{id:"within",text:"`within`, `getQueriesForElement`",depth:2,charIndex:0},{id:"act",text:"`act`",depth:2,charIndex:966},{id:"cleanup",text:"`cleanup`",depth:2,charIndex:1306}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/other.mdx"},{title:"`renderHook` function",routePath:"/docs/api/misc/render-hook",lang:"en",toc:[{id:"renderhook",text:"`renderHook`",depth:2,charIndex:0},{id:"options",text:"`options`",depth:3,charIndex:1305},{id:"initial-props",text:"`initialProps`",depth:4,charIndex:1436},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:1631},{id:"concurrent-root",text:"`concurrentRoot`",depth:3,charIndex:1816},{id:"result",text:"Result",depth:3,charIndex:2002},{id:"result-1",text:"`result`",depth:4,charIndex:2225},{id:"rerender",text:"`rerender`",depth:4,charIndex:2442},{id:"unmount",text:"`unmount`",depth:4,charIndex:2721},{id:"examples",text:"Examples",depth:3,charIndex:2843},{id:"with-initialprops",text:"With `initialProps`",depth:4,charIndex:2917},{id:"with-wrapper",text:"With `wrapper`",depth:4,charIndex:3567},{id:"renderhookasync-function",text:"`renderHookAsync` function",depth:2,charIndex:3848},{id:"result-async",text:"Result",depth:3,charIndex:4440}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/misc/render-hook.mdx"},{title:"Queries",routePath:"/docs/api/queries",lang:"en",toc:[{id:"accessing-queries",text:"Accessing queries",depth:2,charIndex:203},{id:"using-screen-object",text:"Using `screen` object",depth:3,charIndex:366},{id:"using-render-result",text:"Using `render` result",depth:3,charIndex:708},{id:"query-parts",text:"Query parts",depth:2,charIndex:1020},{id:"query-variant",text:"Query variant",depth:2,charIndex:1222},{id:"get-by",text:"`getBy*` queries",depth:3,charIndex:1901},{id:"get-all-by",text:"`getAllBy*` queries",depth:3,charIndex:2155},{id:"query-by",text:"`queryBy*` queries",depth:3,charIndex:2338},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3,charIndex:2639},{id:"find-by",text:"`findBy*` queries",depth:3,charIndex:2841},{id:"find-all-by",text:"`findAllBy*` queries",depth:3,charIndex:3252},{id:"query-predicates",text:"Query predicates",depth:2,charIndex:4008},{id:"by-role",text:"`*ByRole`",depth:3,charIndex:4327},{id:"by-role-options",text:"Options",depth:4,charIndex:5518},{id:"by-label-text",text:"`*ByLabelText`",depth:3,charIndex:8198},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3,charIndex:8804},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3,charIndex:9372},{id:"by-text",text:"`*ByText`",depth:3,charIndex:9925},{id:"by-hint-text",text:"`*ByHintText`",depth:3,charIndex:10597},{id:"by-test-id",text:"`*ByTestId`",depth:3,charIndex:11403},{id:"common-options",text:"Common options",depth:3,charIndex:12319},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4,charIndex:12579},{id:"textmatch-type",text:"TextMatch type",depth:2,charIndex:13464},{id:"examples",text:"Examples",depth:3,charIndex:13623},{id:"text-match-options",text:"Options",depth:3,charIndex:14427},{id:"precision",text:"Precision",depth:4,charIndex:14458},{id:"normalization",text:"Normalization",depth:4,charIndex:15300},{id:"legacy-unit-testing-helpers",text:"Legacy unit testing helpers",depth:2,charIndex:16777},{id:"unsafe_bytype",text:"`UNSAFE_ByType`",depth:3,charIndex:17174},{id:"unsafe_byprops",text:"`UNSAFE_ByProps`",depth:3,charIndex:17482}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/queries.mdx",description:"Queries are one of the main building blocks of React Native Testing Library. They let you find elements in the element tree, which represents your application's user interface when running under tests."},{title:"`render` API",routePath:"/docs/api/render",lang:"en",toc:[{id:"render",text:"`render` function",depth:2,charIndex:0},{id:"options",text:"Options",depth:3,charIndex:678},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:815},{id:"concurrent-root",text:"`concurrentRoot`",depth:4,charIndex:1101},{id:"create-node-mock",text:"`createNodeMock`",depth:4,charIndex:1287},{id:"unstable_validatestringsrenderedwithintext",text:"`unstable_validateStringsRenderedWithinText`",depth:4,charIndex:1586},{id:"result",text:"Result",depth:3,charIndex:2368},{id:"render-async",text:"`renderAsync` function",depth:2,charIndex:2592},{id:"options-1",text:"Options",depth:3,charIndex:3222},{id:"result-1",text:"Result",depth:3,charIndex:3280}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/render.mdx"},{title:"`screen` object",routePath:"/docs/api/screen",lang:"en",toc:[{id:"queries",text:"`...queries`",depth:3,charIndex:588},{id:"example",text:"Example",depth:4,charIndex:773},{id:"rerender",text:"`rerender`",depth:3,charIndex:875},{id:"rerenderasync",text:"`rerenderAsync`",depth:3,charIndex:1275},{id:"unmount",text:"`unmount`",depth:3,charIndex:1896},{id:"unmountasync",text:"`unmountAsync`",depth:3,charIndex:2166},{id:"debug",text:"`debug`",depth:3,charIndex:2646},{id:"debug-message-option",text:"`message` option",depth:4,charIndex:2796},{id:"debug-map-props-option",text:"`mapProps` option",depth:4,charIndex:3094},{id:"tojson",text:"`toJSON`",depth:3,charIndex:4081},{id:"root",text:"`root`",depth:3,charIndex:4215},{id:"unsafe_root",text:"`UNSAFE_root`",depth:3,charIndex:4443}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/api/screen.mdx",description:"The screen object offers a recommended way to access queries and utilities for the currently rendered UI. This object is assigned after the render call and cleared after each test by calling cleanup. If no render call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access. ...queries The most important feature of screen is providing a set of helpful queries that allow you to find certain elements in the view hierarchy. See Queries for a complete list. Example rerender Also available under update alias Re-renders the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and key) as the previous element, the tree is updated; otherwise, it re-mounts a new tree. In both cases, it triggers the appropriate lifecycle events. rerenderAsync Also available under updateAsync alias Async version of rerender designed for working with React 19 and React Suspense. This method uses async act internally to ensure all pending React updates are executed during updating. unmount Unmount the in-memory tree, triggering the appropriate lifecycle events. unmountAsync Async version of unmount designed for working with React 19 and React Suspense. This method uses async act internally to ensure all pending React updates are executed during unmounting. debug Pretty prints deeply rendered component passed to render. message option {#debug-message-option} You can provide a message that will be printed on top. logs optional message and colored JSX: mapProps option {#debug-map-props-option} You can use the mapProps option to transform the props that will be printed: This will log the rendered JSX without the style props. The children prop cannot be filtered out so the following will print all rendered components with all props but children filtered out. This option can be used to target specific props when debugging a query (for instance, keeping only the children prop when debugging a getByText query). You can also transform prop values to make them more readable (e.g., flatten styles). Or remove props that have little value when debugging tests, e.g., path prop for SVGs toJSON Get the rendered component JSON representation, e.g. for snapshot testing. root Returns the rendered root host element. This API is primarily useful for component tests, as it allows you to access the root host view without using *ByTestId queries or similar methods. UNSAFE_root Returns the rendered composite root element."},{title:"Common Mistakes with React Native Testing Library",routePath:"/docs/guides/common-mistakes",lang:"en",toc:[{id:"using-the-wrong-query",text:"Using the wrong query",depth:2,charIndex:606},{id:"not-using-byrole-most-of-the-time",text:"Not using `*ByRole` query most of the time",depth:2,charIndex:1615},{id:"using-the-wrong-assertion",text:"Using the wrong assertion",depth:2,charIndex:2735},{id:"using-query-variants-for-anything-except-checking-for-non-existence",text:"Using `query*` variants for anything except checking for non-existence",depth:2,charIndex:3592},{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",text:"Using `waitFor` to wait for elements that can be queried with `find*`",depth:2,charIndex:4340},{id:"performing-side-effects-in-waitfor",text:"Performing side-effects in `waitFor`",depth:2,charIndex:5149},{id:"using-unsafe-root-to-query-for-elements",text:"Using `UNSAFE_root` to query for elements",depth:2,charIndex:6093},{id:"passing-an-empty-callback-to-waitfor",text:"Passing an empty callback to `waitFor`",depth:2,charIndex:6883},{id:"not-using-screen",text:"Not using `screen`",depth:2,charIndex:7336},{id:"wrapping-things-in-act-unnecessarily",text:"Wrapping things in `act` unnecessarily",depth:2,charIndex:8030},{id:"not-using-user-event-api",text:"Not using User Event API",depth:2,charIndex:8903},{id:"not-querying-by-text",text:"Not querying by text",depth:2,charIndex:10063},{id:"not-using-testing-library-eslint-plugins",text:"Not using Testing Library ESLint plugins",depth:2,charIndex:10623},{id:"using-cleanup",text:"Using `cleanup`",depth:2,charIndex:11283},{id:"using-get-variants-as-assertions",text:"Using `get*` variants as assertions",depth:2,charIndex:11880},{id:"having-multiple-assertions-in-a-single-waitfor-callback",text:"Having multiple assertions in a single `waitFor` callback",depth:2,charIndex:12692},{id:"using-wrapper-as-the-variable-name",text:"Using `wrapper` as the variable name",depth:2,charIndex:13749},{id:"summary",text:"Summary",depth:2,charIndex:14603}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/common-mistakes.mdx",description:'Note: This guide is adapted from Kent C. Dodds\' article "Common mistakes with React Testing Library" for React Native Testing Library v13. The original article focuses on web React, but the principles apply to React Native as well. This adaptation includes React Native-specific examples and ARIA-compatible accessibility attributes. React Native Testing Library guiding principle is: "The more your tests resemble the way your software is used, the more confidence they can give you." This guide outlines some common mistakes people make when using React Native Testing Library and how to avoid them.'},{title:"Community resources",routePath:"/docs/guides/community-resources",lang:"en",toc:[{id:"recommended-content",text:"Recommended content",depth:2,charIndex:0},{id:"older-potentially-outdated-content",text:"Older, potentially outdated content",depth:2,charIndex:569}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/community-resources.mdx"},{title:"FAQ",routePath:"/docs/guides/faq",lang:"en",toc:[{id:"can-i-test-the-native-features-of-react-native-apps",text:"Can I test the native features of React Native apps?",depth:2,charIndex:0},{id:"should-i-usemigrate-to-screen-queries",text:"Should I use/migrate to `screen` queries?",depth:2,charIndex:1188},{id:"should-i-usemigrate-to-user-event-interactions",text:"Should I use/migrate to User Event interactions?",depth:2,charIndex:1568}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/faq.mdx"},{title:"How should I query?",routePath:"/docs/guides/how-to-query",lang:"en",toc:[{id:"query-parts",text:"Query parts",depth:2,charIndex:203},{id:"query-variant",text:"Query variant",depth:2,charIndex:461},{id:"idiomatic-query-variants",text:"Idiomatic query variants",depth:3,charIndex:1151},{id:"query-predicate",text:"Query predicate",depth:2,charIndex:2073},{id:"idiomatic-query-predicates",text:"Idiomatic query predicates",depth:3,charIndex:2637},{id:"by-role-query",text:"1. By Role query",depth:3,charIndex:3086},{id:"by-role-query-name-option",text:"Name option",depth:4,charIndex:4143},{id:"text-input-queries",text:"2. Text input queries",depth:3,charIndex:4682},{id:"other-accessible-queries",text:"3. Other accessible queries",depth:3,charIndex:5479},{id:"test-id-query",text:"4. Test ID query",depth:3,charIndex:5908}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/how-to-query.mdx",description:"React Native Testing Library provides various query types for finding views in your tests. The number of queries might be confusing. This guide helps you pick the right queries for your test scenarios."},{title:"LLM Guidelines for React Native Testing Library",routePath:"/docs/guides/llm-guidelines",lang:"en",toc:[{id:"core-apis",text:"Core APIs",depth:2,charIndex:87},{id:"render",text:"render",depth:3,charIndex:98},{id:"screen",text:"screen",depth:3,charIndex:563},{id:"renderhook",text:"renderHook",depth:3,charIndex:754},{id:"query-selection",text:"Query Selection",depth:2,charIndex:1129},{id:"assertions",text:"Assertions",depth:2,charIndex:1659},{id:"jest-matchers-reference",text:"Jest Matchers Reference",depth:2,charIndex:1885},{id:"user-interactions",text:"User Interactions",depth:2,charIndex:3349},{id:"userevent-preferred-async",text:"userEvent (Preferred, Async)",depth:3,charIndex:3522},{id:"fireevent-low-level-sync-in-v13",text:"fireEvent (Low-level, Sync in v13)",depth:3,charIndex:4089},{id:"sync-vs-async-apis-v13",text:"Sync vs Async APIs (v13)",depth:2,charIndex:4486},{id:"waitfor-usage",text:"waitFor Usage",depth:2,charIndex:4775},{id:"code-organization",text:"Code Organization",depth:2,charIndex:5114},{id:"quick-checklist",text:"Quick Checklist",depth:2,charIndex:5454},{id:"example-good-pattern",text:"Example: Good Pattern",depth:2,charIndex:5784},{id:"example-anti-patterns",text:"Example: Anti-Patterns",depth:2,charIndex:6898}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/llm-guidelines.mdx",description:"Actionable guidelines for writing tests with React Native Testing Library (RNTL) v13."},{title:"React 19 & Suspense Support",routePath:"/docs/guides/react-19",lang:"en",toc:[{id:"new-async-apis",text:"New async APIs",depth:2,charIndex:381},{id:"apis-that-remain-unchanged",text:"APIs that remain unchanged",depth:2,charIndex:723},{id:"what-changes-in-your-tests",text:"What changes in your tests",depth:2,charIndex:1026},{id:"making-tests-async",text:"Making tests async",depth:3,charIndex:1054},{id:"when-to-use-async-apis",text:"When to use async APIs",depth:3,charIndex:1540},{id:"migration-strategy",text:"Migration strategy",depth:2,charIndex:1770},{id:"new-projects",text:"New projects",depth:3,charIndex:1790},{id:"existing-projects",text:"Existing projects",depth:3,charIndex:1936},{id:"future-direction",text:"Future direction",depth:3,charIndex:2139}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/react-19.mdx",description:"React 19 introduced full support for React Suspense, React.use(), and other async rendering features to React Native 0.78.0. When testing components that use these features, React requires the async act helper to handle async state updates. This means React Native Testing Library needs new async versions of its core APIs. These async APIs work with both React 18 and React 19."},{title:"Troubleshooting",routePath:"/docs/guides/troubleshooting",lang:"en",toc:[{id:"matching-react-native-react--react-test-renderer-versions",text:"Matching React Native, React & React Test Renderer versions",depth:2,charIndex:113},{id:"example-repository",text:"Example repository",depth:2,charIndex:985},{id:"undefined-component-error",text:"Undefined component error",depth:2,charIndex:1232},{id:"mocking-react-native",text:"Mocking React Native",depth:3,charIndex:2327},{id:"act-warnings",text:"Act warnings",depth:2,charIndex:2655}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/guides/troubleshooting.mdx",description:"This guide describes common issues found by users when integrating React Native Test Library to their projects:"},{title:"Migration to built-in Jest matchers",routePath:"/docs/migration/jest-matchers",lang:"en",toc:[{id:"general-notes",text:"General notes",depth:2,charIndex:116},{id:"usage",text:"Usage",depth:2,charIndex:528},{id:"gradual-migration",text:"Gradual migration",depth:3,charIndex:708},{id:"migration-details",text:"Migration details",depth:2,charIndex:1148},{id:"matchers-not-requiring-changes",text:"Matchers not requiring changes",depth:3,charIndex:1167},{id:"replaced-matchers",text:"Replaced matchers",depth:3,charIndex:1451},{id:"added-matchers",text:"Added matchers",depth:3,charIndex:1831},{id:"noteworthy-details",text:"Noteworthy details",depth:3,charIndex:1891}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/jest-matchers.mdx",description:"This guide describes the steps necessary to migrate from legacy Jest Native matchers v5 to built-in Jest matchers."},{title:"Migration to 11.x",routePath:"/docs/migration/previous/v11",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:150},{id:"update-to-jest-28-if-you-use-fake-timers",text:"Update to Jest 28 if you use fake timers",depth:3,charIndex:168},{id:"refactor-legacy-waitforoptions-position",text:"Refactor legacy `waitForOptions` position",depth:3,charIndex:391},{id:"triggering-non-touch-events-on-targets-with-pointereventsbox-none-prop",text:'Triggering non-touch events on targets with `pointerEvents="box-none"` prop',depth:3,charIndex:1335},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:1684}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v11.mdx",description:"Migration to React Native Testing Library version 11 from version 9.x or 10.x should be a relatively easy task due small amount of breaking changes."},{title:"Migration to 12.x",routePath:"/docs/migration/previous/v12",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:489},{id:"1-all-queries-exclude-elements-hidden-from-accessibility-by-default",text:"1. All queries exclude elements hidden from accessibility by default",depth:3,charIndex:507},{id:"2-byrole-queries-now-return-only-accessibility-elements",text:"2. `*ByRole` queries now return only accessibility elements",depth:3,charIndex:1122},{id:"examples",text:"Examples",depth:4,charIndex:1510},{id:"3-bytext-bydisplayvalue-byplaceholdertext-queries-now-return-host-elements",text:"3. `*ByText`, `*ByDisplayValue`, `*ByPlaceholderText` queries now return host elements",depth:3,charIndex:2192},{id:"4-container-api-has-been-renamed-to-unsafe_root",text:"4. `container` API has been renamed to `UNSAFE_root`.",depth:3,charIndex:2754},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:3457}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v12.mdx",description:"React Native Testing Library 12 introduces a handful of breaking changes compared to 11.x versions. We believe they were necessary to improve the experience using the library and help the users fall into the pit of success when writing meaningful tests. You will find migration instructions for each and every change described below."},{title:"Migration to 2.x",routePath:"/docs/migration/previous/v2",lang:"en",toc:[{id:"dropping-node-8",text:"Dropping Node 8",depth:2,charIndex:97},{id:"auto-cleanup",text:"Auto Cleanup",depth:2,charIndex:320},{id:"waitfor-api-changes",text:"WaitFor API changes",depth:2,charIndex:1327},{id:"removed-global-debug-function",text:"Removed global `debug` function",depth:2,charIndex:2107},{id:"removed-global-shallow-function",text:"Removed global `shallow` function",depth:2,charIndex:2256},{id:"removed-functions",text:"Removed functions",depth:2,charIndex:2725},{id:"some-bytestid-queries-behavior-changes",text:"Some `ByTestId` queries behavior changes",depth:2,charIndex:3422},{id:"deprecated-flushmicrotasksqueue",text:"Deprecated `flushMicrotasksQueue`",depth:2,charIndex:4166}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v2.mdx",description:"This guide describes steps necessary to migrate from React Native Testing Library v1.x to v2.x."},{title:"Migration to 7.x",routePath:"/docs/migration/previous/v7",lang:"en",toc:[{id:"guide-for-react-native-testing-library-users",text:"Guide for `react-native-testing-library` users",depth:2,charIndex:304},{id:"renaming-the-library",text:"Renaming the library",depth:3,charIndex:455},{id:"new-aliases",text:"New aliases",depth:3,charIndex:1339},{id:"renaming-byplaceholder-queries",text:"Renaming `ByPlaceholder` queries",depth:3,charIndex:1747},{id:"fireevent-support-for-disabled-components",text:"`fireEvent` support for disabled components",depth:3,charIndex:2059},{id:"guide-for-testing-libraryreact-native-users",text:"Guide for `@testing-library/react-native` users",depth:2,charIndex:2528},{id:"renaming-wait-helpers",text:'Renaming "wait" helpers',depth:3,charIndex:2843},{id:"changes-to-bytestid-queries",text:"Changes to `ByTestId` queries",depth:3,charIndex:2987},{id:"no-bytitle-queries",text:"No `ByTitle` queries",depth:3,charIndex:3144},{id:"no-custom-jest-configuration",text:"No custom Jest configuration",depth:3,charIndex:3591},{id:"cleanup-is-included-by-default",text:"Cleanup is included by default",depth:3,charIndex:3974},{id:"no-nativetestinstance-abstraction",text:"No NativeTestInstance abstraction",depth:3,charIndex:4467},{id:"no-container-nor-baseelement-returned-from-render",text:"No `container` nor `baseElement` returned from `render`",depth:3,charIndex:4671},{id:"firing-events-changes",text:"Firing events changes",depth:3,charIndex:4973}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v7.mdx",description:"As the version 7.0 involves merging two libraries together, there are two variants for migration guide, dependent on library you used previously:"},{title:"Migration to 9.x",routePath:"/docs/migration/previous/v9",lang:"en",toc:[{id:"support-for-text-match-options-aka-string-precision-api",text:"Support for text match options a.k.a string precision API",depth:2,charIndex:281},{id:"reverted-matching-text-across-several-nodes",text:"Reverted matching text across several nodes",depth:2,charIndex:1275},{id:"future-plans",text:"Future plans",depth:2,charIndex:2038}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/previous/v9.mdx",description:"Version 7.0 brought React Native Testing Library into the @testing-library family. Since it has been implemented independently from its web counterpart – the React Testing Library – there are some differences in the API and behavior. Version 9.0 solves several of these problems."},{title:"Migration to 13.x",routePath:"/docs/migration/v13",lang:"en",toc:[{id:"breaking-changes",text:"Breaking changes",depth:2,charIndex:225},{id:"supported-react-and-react-native-versions",text:"Supported React and React Native versions",depth:3,charIndex:243},{id:"concurrent-rendering-by-default",text:"Concurrent rendering by default",depth:3,charIndex:586},{id:"extend-jest-matchers-by-default",text:"Extend Jest matchers by default",depth:3,charIndex:971},{id:"removed-deprecated-byaccessibilitystate-queries",text:"Removed deprecated `*ByAccessibilityState` queries",depth:3,charIndex:1372},{id:"removed-deprecated-byaccessibilityvalue-queries",text:"Removed deprecated `*ByAccessibilityValue` queries",depth:3,charIndex:2318},{id:"removed-jest-preset",text:"Removed Jest preset",depth:3,charIndex:3082},{id:"removed-debugshallow",text:"Removed `debug.shallow`",depth:3,charIndex:3299},{id:"changes-to-accessibility-label-calculation",text:"Changes to accessibility label calculation",depth:3,charIndex:3494},{id:"other-changes",text:"Other changes",depth:2,charIndex:3716},{id:"removed-host-component-names-autodetection",text:"Removed host component names autodetection",depth:3,charIndex:3731},{id:"use-react-implementation-of-act-instead-of-react-test-renderer-one",text:"Use React implementation of `act` instead of React Test Renderer one",depth:3,charIndex:3866},{id:"updated-flushmicrotasks-internal-method",text:"Updated `flushMicroTasks` internal method",depth:3,charIndex:3975},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:4057}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/migration/v13.mdx",description:"This guide describes the migration to React Native Testing Library version 13 from version 12.x. Overall, the v13 release is relatively small, focusing on removing deprecated queries and improving the developer experience."},{title:"Introduction",routePath:"/docs/start/intro",lang:"en",toc:[{id:"the-problem",text:"The problem",depth:2,charIndex:0},{id:"this-solution",text:"This solution",depth:2,charIndex:357},{id:"example",text:"Example",depth:2,charIndex:860}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/start/intro.md"},{title:"Quick Start",routePath:"/docs/start/quick-start",lang:"en",toc:[{id:"installation",text:"Installation",depth:2,charIndex:0},{id:"jest-matchers",text:"Jest matchers",depth:3,charIndex:360},{id:"eslint-plugin",text:"ESLint plugin",depth:3,charIndex:596}],frontmatter:{},version:"13.x",_relativePath:"13.x/docs/start/quick-start.mdx"},{title:"",routePath:"/",lang:"en",toc:[],frontmatter:{pageType:"home",hero:{image:{src:{light:"/img/logo-light.svg",dark:"/img/logo-dark.svg"}},name:"JavaScript Integration testing for React Native",tagline:"The more your tests resemble the way your software is used, the more confidence they can give you.
      — Kent C. Dodds",actions:[{theme:"brand",text:"Quick Start",link:"/docs/start/quick-start"},{theme:"alt",text:"Explore API",link:"/docs/api"}]},features:[{title:"Maintainable",details:"Write maintainable tests for your React Native apps.",icon:''},{title:"Reliable",details:"Promotes testing public APIs and avoiding implementation details.",icon:''},{title:"Community Driven",details:"Supported by React Native community and its core contributors.",icon:''}]},version:"13.x",_relativePath:"13.x/index.md"},{title:"Network Requests",routePath:"/14.x/cookbook/advanced/network-requests",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"phonebook-example",text:"Phonebook Example",depth:2,charIndex:569},{id:"start-testing-with-a-simple-test",text:"Start testing with a simple test",depth:2,charIndex:4791},{id:"testing-error-handling",text:"Testing error handling",depth:2,charIndex:7891},{id:"global-guarding-against-unwanted-api-requests",text:"Global guarding against unwanted API requests",depth:2,charIndex:9730},{id:"conclusion",text:"Conclusion",depth:2,charIndex:10748},{id:"further-reading-and-alternatives",text:"Further Reading and Alternatives",depth:2,charIndex:11368}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/advanced/network-requests.md"},{title:"Async Events",routePath:"/14.x/cookbook/basics/async-events",lang:"en",toc:[{id:"summary",text:"Summary",depth:2,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:638},{id:"async-utilities",text:"Async utilities",depth:2,charIndex:1767},{id:"findby-queries",text:"`findBy*` queries",depth:3,charIndex:1855},{id:"example-1",text:"Example",depth:4,charIndex:2578},{id:"waitfor-function",text:"`waitFor` function",depth:3,charIndex:2829},{id:"example-2",text:"Example",depth:4,charIndex:3351},{id:"waitforelementtoberemoved-function",text:"`waitForElementToBeRemoved` function",depth:3,charIndex:3573},{id:"example-3",text:"Example",depth:4,charIndex:4165},{id:"fake-timers",text:"Fake Timers",depth:2,charIndex:4240}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/basics/async-events.md"},{title:"Custom `render` function",routePath:"/14.x/cookbook/basics/custom-render",lang:"en",toc:[{id:"summary",text:"Summary",depth:3,charIndex:0},{id:"example",text:"Example",depth:3,charIndex:291},{id:"more-info",text:"More info",depth:3,charIndex:1143},{id:"additional-params",text:"Additional params",depth:4,charIndex:1154},{id:"multiple-functions",text:"Multiple functions",depth:4,charIndex:1488},{id:"async-setup",text:"Async setup",depth:4,charIndex:1777}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/basics/custom-render.md",description:"Summary RNTL exposes the render function as the primary entry point for tests. If you make complex, repeating setups for your tests, consider creating a custom render function. The idea is to encapsulate common setup steps and test wiring inside a render function suitable for your tests. Example Example full source code. More info Additional params A custom render function might accept additional parameters to allow for setting up different start conditions for a test, e.g., the initial state for global state management. Multiple functions Depending on the situation, you may declare more than one custom render function. For example, you have one function for testing application flows and a second for testing individual screens. Async setup Since render is async, your custom render function should be marked as async and use await render(). This pattern also makes it easy to add additional async setup if needed:"},{title:"Introduction",routePath:"/14.x/cookbook/",lang:"en",toc:[{id:"whats-inside-the-cookbook",text:"What's Inside the Cookbook?",depth:2,charIndex:431},{id:"whats-next",text:"What's Next?",depth:2,charIndex:1024}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/index.md",description:"Welcome to the React Native Testing Library (RNTL) Cookbook! This app is your go-to resource for learning how to effectively test React Native applications. It provides a collection of best practices, ready-made recipes, and tips & tricks to simplify and improve your testing workflow. Whether you’re a beginner just getting started or a seasoned developer looking to sharpen your skills, the Cookbook has something for everyone."},{title:"Jotai",routePath:"/14.x/cookbook/state-management/jotai",lang:"en",toc:[{id:"introduction",text:"Introduction",depth:2,charIndex:0},{id:"task-list-example",text:"Task List Example",depth:2,charIndex:332},{id:"starting-with-a-simple-test",text:"Starting with a Simple Test",depth:2,charIndex:1433},{id:"custom-render-function-to-populate-jotai-atoms-with-initial-values",text:"Custom Render Function to populate Jotai Atoms with Initial Values",depth:2,charIndex:1910},{id:"testing-the-tasklist-component-with-initial-tasks",text:"Testing the `TaskList` Component with initial tasks",depth:2,charIndex:3562},{id:"modifying-atom-outside-of-react-components",text:"Modifying atom outside of React components",depth:2,charIndex:4810},{id:"testing-atom-outside-of-react-components",text:"Testing atom outside of React components",depth:2,charIndex:5413},{id:"conclusion",text:"Conclusion",depth:2,charIndex:6089}],frontmatter:{},version:"14.x",_relativePath:"14.x/cookbook/state-management/jotai.md"},{title:"Testing environment",routePath:"/14.x/docs/advanced/testing-env",lang:"en",toc:[{id:"react-renderers",text:"React renderers",depth:2,charIndex:635},{id:"test-renderer",text:"Test Renderer",depth:2,charIndex:1346},{id:"element-tree",text:"Element tree",depth:2,charIndex:2804},{id:"host-and-composite-components",text:"Host and composite components",depth:2,charIndex:3487},{id:"host-only-element-tree",text:"Host-only element tree",depth:3,charIndex:5327},{id:"tree-nodes",text:"Tree nodes",depth:2,charIndex:5822},{id:"understanding-props",text:"Understanding props",depth:3,charIndex:6088},{id:"tree-navigation",text:"Tree navigation",depth:2,charIndex:6755},{id:"queries",text:"Queries",depth:2,charIndex:7242}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/advanced/testing-env.mdx",description:"React Native Testing Library lets you write integration and component tests for your React Native app or library. While the JSX code in tests closely resembles your React Native app, the underlying environment differs. This document describes the key elements of our testing environment and highlights things to be aware of when writing advanced tests or diagnosing issues."},{title:"Third-Party Library Integration",routePath:"/14.x/docs/advanced/third-party-integration",lang:"en",toc:[{id:"handling-events-in-third-party-libraries",text:"Handling Events in Third-Party Libraries",depth:2,charIndex:231},{id:"example-react-native-gesture-handler",text:"Example: React Native Gesture Handler",depth:3,charIndex:1010}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/advanced/third-party-integration.mdx",description:"The React Native Testing Library is designed to simulate the core behaviors of React Native. However, it does not replicate the internal logic of third-party libraries. This guide explains how to integrate your library with RNTL."},{title:"Understanding `act` function",routePath:"/14.x/docs/advanced/understanding-act",lang:"en",toc:[{id:"act-warning",text:"`act` warning",depth:2,charIndex:201},{id:"understanding-act",text:"Understanding `act`",depth:2,charIndex:643},{id:"responsibility",text:"Responsibility",depth:3,charIndex:662},{id:"when-to-use-act",text:"When to use act",depth:3,charIndex:2489},{id:"implementation",text:"Implementation",depth:3,charIndex:3542},{id:"asynchronous-code",text:"Asynchronous code",depth:2,charIndex:4342},{id:"handling-asynchronous-operations",text:"Handling asynchronous operations",depth:3,charIndex:4766},{id:"solution-with-fake-timers",text:"Solution with fake timers",depth:3,charIndex:5626},{id:"solution-with-real-timers",text:"Solution with real timers",depth:3,charIndex:6123},{id:"references",text:"References",depth:2,charIndex:7510}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/advanced/understanding-act.mdx",description:"When writing RNTL tests, cryptic act() function errors logged to console often confuse developers. This article explains the purpose and behavior of act() so you can write tests with more confidence."},{title:"API Overview",routePath:"/14.x/docs/api",lang:"en",toc:[],frontmatter:{uri:"/api"},version:"14.x",_relativePath:"14.x/docs/api.md",description:"React Native Testing Library consists of following APIs: render function - render your UI components for testing purposesscreen object - access rendered UI:Queries - find relevant components by various predicates: role, text, test ids, etcLifecycle methods: rerender, unmountHelpers: debug, toJSON, rootJest matchers - validate assumptions about your UIUser Event - simulate common user interactions like press or type in a realistic wayFire Event - simulate any component event in a simplified way purposesMisc APIs:renderHook function - render hooks for testingAsync utils: findBy* queries, waitFor, waitForElementToBeRemovedConfiguration: configure, resetToDefaultsAccessibility: isHiddenFromAccessibilityOther: within, act, cleanup"},{title:"Fire Event API",routePath:"/14.x/docs/api/events/fire-event",lang:"en",toc:[{id:"fire-event",text:"`fireEvent`",depth:2,charIndex:0},{id:"press",text:"`fireEvent.press`",depth:3,charIndex:2137},{id:"change-text",text:"`fireEvent.changeText`",depth:3,charIndex:2919},{id:"scroll",text:"`fireEvent.scroll`",depth:3,charIndex:3570},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4,charIndex:4033}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/events/fire-event.mdx"},{title:"User Event interactions",routePath:"/14.x/docs/api/events/user-event",lang:"en",toc:[{id:"comparison-with-fire-event-api",text:"Comparison with Fire Event API",depth:2,charIndex:0},{id:"setup",text:"`setup()`",depth:2,charIndex:1095},{id:"setup-options",text:"Options",depth:3,charIndex:1331},{id:"press",text:"`press()`",depth:2,charIndex:1592},{id:"longpress",text:"`longPress()`",depth:2,charIndex:2257},{id:"longpress-options",text:"Options",depth:3,charIndex:3094},{id:"type",text:"`type()`",depth:2,charIndex:3204},{id:"type-options",text:"Options",depth:3,charIndex:3868},{id:"type-sequence",text:"Sequence of events",depth:3,charIndex:4148},{id:"clear",text:"`clear()`",depth:2,charIndex:4877},{id:"clear-sequence",text:"Sequence of events",depth:3,charIndex:5180},{id:"paste",text:"`paste()`",depth:2,charIndex:5463},{id:"paste-sequence",text:"Sequence of events",depth:3,charIndex:5793},{id:"scroll-to",text:"`scrollTo()`",depth:2,charIndex:6100},{id:"scroll-to-options",text:"Options",depth:3,charIndex:7492},{id:"scroll-sequence",text:"Sequence of events",depth:3,charIndex:8482}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/events/user-event.mdx"},{title:"Jest matchers",routePath:"/14.x/docs/api/jest-matchers",lang:"en",toc:[{id:"setup",text:"Setup",depth:2,charIndex:138},{id:"checking-element-existence",text:"Checking element existence",depth:2,charIndex:238},{id:"tobeonthescreen",text:"`toBeOnTheScreen()`",depth:3,charIndex:266},{id:"element-content",text:"Element Content",depth:2,charIndex:479},{id:"tohavetextcontent",text:"`toHaveTextContent()`",depth:3,charIndex:496},{id:"tocontainelement",text:"`toContainElement()`",depth:3,charIndex:803},{id:"tobeemptyelement",text:"`toBeEmptyElement()`",depth:3,charIndex:952},{id:"checking-element-state",text:"Checking element state",depth:2,charIndex:1070},{id:"tohavedisplayvalue",text:"`toHaveDisplayValue()`",depth:3,charIndex:1094},{id:"tohaveaccessibilityvalue",text:"`toHaveAccessibilityValue()`",depth:3,charIndex:1406},{id:"tobeenabled",text:"`toBeEnabled()` / `toBeDisabled`",depth:3,charIndex:1938},{id:"tobeselected",text:"`toBeSelected()`",depth:3,charIndex:2344},{id:"tobechecked",text:"`toBeChecked()` / `toBePartiallyChecked()`",depth:3,charIndex:2484},{id:"tobeexpanded",text:"`toBeExpanded()` / `toBeCollapsed()`",depth:3,charIndex:2902},{id:"tobebusy",text:"`toBeBusy()`",depth:3,charIndex:3318},{id:"checking-element-style",text:"Checking element style",depth:2,charIndex:3438},{id:"tobevisible",text:"`toBeVisible()`",depth:3,charIndex:3462},{id:"tohavestyle",text:"`toHaveStyle()`",depth:3,charIndex:3668},{id:"other-matchers",text:"Other matchers",depth:2,charIndex:3785},{id:"tohaveaccessiblename",text:"`toHaveAccessibleName()`",depth:3,charIndex:3801},{id:"tohaveprop",text:"`toHaveProp()`",depth:3,charIndex:4696}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/jest-matchers.mdx",description:"This guide covers the built-in Jest matchers. These matchers make your tests easier to read and work better with accessibility features."},{title:"Accessibility",routePath:"/14.x/docs/api/misc/accessibility",lang:"en",toc:[{id:"ishiddenfromaccessibility",text:"`isHiddenFromAccessibility`",depth:2,charIndex:0}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/accessibility.mdx"},{title:"Async utilities",routePath:"/14.x/docs/api/misc/async",lang:"en",toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2,charIndex:0},{id:"waitfor",text:"`waitFor`",depth:2,charIndex:181},{id:"options",text:"Options",depth:3,charIndex:3295},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2,charIndex:3591}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/async.mdx"},{title:"Configuration",routePath:"/14.x/docs/api/misc/config",lang:"en",toc:[{id:"configure",text:"`configure`",depth:2,charIndex:0},{id:"asyncutiltimeout-option",text:"`asyncUtilTimeout` option",depth:3,charIndex:526},{id:"defaultincludehiddenelements-option",text:"`defaultIncludeHiddenElements` option",depth:3,charIndex:682},{id:"defaultdebugoptions-option",text:"`defaultDebugOptions` option",depth:3,charIndex:1068},{id:"resettodefaults",text:"`resetToDefaults()`",depth:2,charIndex:1248},{id:"environment-variables",text:"Environment variables",depth:2,charIndex:1298},{id:"rntl_skip_auto_cleanup",text:"`RNTL_SKIP_AUTO_CLEANUP`",depth:3,charIndex:1321},{id:"rntl_skip_auto_detect_fake_timers",text:"`RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS`",depth:3,charIndex:1570}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/config.mdx"},{title:"Other helpers",routePath:"/14.x/docs/api/misc/other",lang:"en",toc:[{id:"within",text:"`within`",depth:2,charIndex:0},{id:"act",text:"`act`",depth:2,charIndex:824},{id:"cleanup",text:"`cleanup`",depth:2,charIndex:1683}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/other.mdx"},{title:"`renderHook` function",routePath:"/14.x/docs/api/misc/render-hook",lang:"en",toc:[{id:"renderhook",text:"`renderHook`",depth:2,charIndex:0},{id:"options",text:"`options`",depth:3,charIndex:1700},{id:"initial-props",text:"`initialProps`",depth:4,charIndex:1775},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:1970},{id:"result",text:"Result",depth:3,charIndex:2105},{id:"result-1",text:"`result`",depth:4,charIndex:2369},{id:"rerender",text:"`rerender`",depth:4,charIndex:2632},{id:"unmount",text:"`unmount`",depth:4,charIndex:2966},{id:"examples",text:"Examples",depth:3,charIndex:3155},{id:"with-initialprops",text:"With `initialProps`",depth:4,charIndex:3207},{id:"with-wrapper",text:"With `wrapper`",depth:4,charIndex:3881},{id:"with-react-suspense",text:"With React Suspense",depth:4,charIndex:4174}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/render-hook.mdx"},{title:"Queries",routePath:"/14.x/docs/api/queries",lang:"en",toc:[{id:"accessing-queries",text:"Accessing queries",depth:2,charIndex:223},{id:"using-screen-object",text:"Using `screen` object",depth:3,charIndex:379},{id:"using-render-result",text:"Using `render` result",depth:3,charIndex:710},{id:"query-parts",text:"Query parts",depth:2,charIndex:1020},{id:"query-variant",text:"Query variant",depth:2,charIndex:1276},{id:"get-by",text:"`getBy*` queries",depth:3,charIndex:1936},{id:"get-all-by",text:"`getAllBy*` queries",depth:3,charIndex:2191},{id:"query-by",text:"`queryBy*` queries",depth:3,charIndex:2369},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3,charIndex:2648},{id:"find-by",text:"`findBy*` queries",depth:3,charIndex:2845},{id:"find-all-by",text:"`findAllBy*` queries",depth:3,charIndex:3251},{id:"query-predicates",text:"Query predicates",depth:2,charIndex:4009},{id:"by-role",text:"`*ByRole`",depth:3,charIndex:4293},{id:"by-role-options",text:"Options",depth:4,charIndex:5478},{id:"by-label-text",text:"`*ByLabelText`",depth:3,charIndex:8146},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3,charIndex:9028},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3,charIndex:9594},{id:"by-text",text:"`*ByText`",depth:3,charIndex:10134},{id:"by-hint-text",text:"`*ByHintText`",depth:3,charIndex:10807},{id:"by-test-id",text:"`*ByTestId`",depth:3,charIndex:11609},{id:"common-options",text:"Common options",depth:3,charIndex:12433},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4,charIndex:12689},{id:"textmatch-type",text:"TextMatch type",depth:2,charIndex:13515},{id:"examples",text:"Examples",depth:3,charIndex:13681},{id:"text-match-options",text:"Options",depth:3,charIndex:14491},{id:"precision",text:"Precision",depth:4,charIndex:14522},{id:"normalization",text:"Normalization",depth:4,charIndex:15368}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/queries.mdx",description:"Queries are one of the main building blocks for the React Native Testing Library. They enable you to find relevant elements in the element tree, which represents your application's user interface when running under tests."},{title:"`render` API",routePath:"/14.x/docs/api/render",lang:"en",toc:[{id:"render",text:"`render` function",depth:2,charIndex:0},{id:"options",text:"Options",depth:3,charIndex:852},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:941},{id:"result",text:"Result",depth:3,charIndex:1653}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/render.mdx"},{title:"`screen` object",routePath:"/14.x/docs/api/screen",lang:"en",toc:[{id:"queries",text:"`...queries`",depth:3,charIndex:575},{id:"example",text:"Example",depth:4,charIndex:708},{id:"rerender",text:"`rerender`",depth:3,charIndex:854},{id:"unmount",text:"`unmount`",depth:3,charIndex:1644},{id:"debug",text:"`debug`",depth:3,charIndex:2113},{id:"debug-message-option",text:"`message` option",depth:4,charIndex:2263},{id:"debug-map-props-option",text:"`mapProps` option",depth:4,charIndex:2567},{id:"tojson",text:"`toJSON`",depth:3,charIndex:3563},{id:"container",text:"`container`",depth:3,charIndex:3687},{id:"root",text:"`root`",depth:3,charIndex:4231}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/screen.mdx",description:"The screen object provides access to queries and utilities for the currently rendered UI. This object is assigned after the render call and cleared after each test by calling cleanup. If no render call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access. ...queries The main feature of screen is its queries for finding elements in the view hierarchy. See Queries for a complete list. Example rerender Re-render the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and key) as the previous element, the tree will be updated; otherwise, it will re-mount a new tree, in both cases triggering the appropriate lifecycle events. This method is async and uses async act internally to execute all pending React updates during updating. This works with async React features like Suspense boundaries and the use() hook. unmount Unmount the in-memory tree, triggering the appropriate lifecycle events. This method is async and uses async act internally to execute all pending React updates during unmounting. This works with async React features like Suspense boundaries and the use() hook. debug Pretty prints deeply rendered component passed to render. message option {#debug-message-option} You can provide a message that will be printed on top. logs optional message and colored JSX: mapProps option {#debug-map-props-option} You can use the mapProps option to transform the props that will be printed : This will log the rendered JSX without the style props. The children prop cannot be filtered out so the following will print all rendered components with all props but children filtered out. This option can be used to target specific props when debugging a query (for instance, keeping only the children prop when debugging a getByText query). You can also transform prop values so that they are more readable (e.g., flatten styles). Or remove props that have little value when debugging tests, e.g. path prop for svgs toJSON Get the rendered component JSON representation, e.g. for snapshot testing. container Returns a pseudo-element container whose children are the elements you asked to render. This is the root container element from Test Renderer. The container provides access to the entire rendered tree. Use it to query or manipulate the rendered output, similar to how container works in React Testing Library. root Returns the rendered root host element, or null if nothing was rendered. This is the first child of the container, which represents the actual root element you rendered. This API is useful for component tests where you need to access the root host view without using *ByTestId queries or similar methods."},{title:"Common Mistakes with React Native Testing Library",routePath:"/14.x/docs/guides/common-mistakes",lang:"en",toc:[{id:"using-the-wrong-query",text:"Using the wrong query",depth:2,charIndex:630},{id:"not-using-byrole-most-of-the-time",text:"Not using `*ByRole` query most of the time",depth:2,charIndex:1651},{id:"using-the-wrong-assertion",text:"Using the wrong assertion",depth:2,charIndex:2783},{id:"using-query-variants-for-anything-except-checking-for-non-existence",text:"Using `query*` variants for anything except checking for non-existence",depth:2,charIndex:3652},{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",text:"Using `waitFor` to wait for elements that can be queried with `find*`",depth:2,charIndex:4412},{id:"performing-side-effects-in-waitfor",text:"Performing side-effects in `waitFor`",depth:2,charIndex:5227},{id:"using-container-to-query-for-elements",text:"Using `container` to query for elements",depth:2,charIndex:6195},{id:"passing-an-empty-callback-to-waitfor",text:"Passing an empty callback to `waitFor`",depth:2,charIndex:6981},{id:"not-using-screen",text:"Not using `screen`",depth:2,charIndex:7440},{id:"wrapping-things-in-act-unnecessarily",text:"Wrapping things in `act` unnecessarily",depth:2,charIndex:8158},{id:"not-using-user-event-api",text:"Not using User Event API",depth:2,charIndex:9094},{id:"not-querying-by-text",text:"Not querying by text",depth:2,charIndex:10260},{id:"not-using-testing-library-eslint-plugins",text:"Not using Testing Library ESLint plugins",depth:2,charIndex:10832},{id:"using-cleanup",text:"Using `cleanup`",depth:2,charIndex:11492},{id:"using-get-variants-as-assertions",text:"Using `get*` variants as assertions",depth:2,charIndex:12101},{id:"having-multiple-assertions-in-a-single-waitfor-callback",text:"Having multiple assertions in a single `waitFor` callback",depth:2,charIndex:12925},{id:"using-wrapper-as-the-variable-name",text:"Using `wrapper` as the variable name",depth:2,charIndex:13988},{id:"summary",text:"Summary",depth:2,charIndex:14854}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/common-mistakes.mdx",description:'Note: This guide is adapted from Kent C. Dodds\' article "Common mistakes with React Testing Library" for React Native Testing Library v14. The original article focuses on web React, but the principles apply to React Native as well. This adaptation includes React Native-specific examples, async API usage (v14), and ARIA-compatible accessibility attributes. React Native Testing Library guiding principle is: "The more your tests resemble the way your software is used, the more confidence they can give you." This guide outlines some common mistakes people make when using React Native Testing Library and how to avoid them.'},{title:"Community resources",routePath:"/14.x/docs/guides/community-resources",lang:"en",toc:[{id:"recommended-content",text:"Recommended content",depth:2,charIndex:0},{id:"older-potentially-outdated-content",text:"Older, potentially outdated content",depth:2,charIndex:569}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/community-resources.mdx"},{title:"FAQ",routePath:"/14.x/docs/guides/faq",lang:"en",toc:[{id:"can-i-test-the-native-features-of-react-native-apps",text:"Can I test the native features of React Native apps?",depth:2,charIndex:0},{id:"should-i-usemigrate-to-screen-queries",text:"Should I use/migrate to `screen` queries?",depth:2,charIndex:1097},{id:"should-i-usemigrate-to-user-event-interactions",text:"Should I use/migrate to User Event interactions?",depth:2,charIndex:1405}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/faq.mdx"},{title:"How should I query?",routePath:"/14.x/docs/guides/how-to-query",lang:"en",toc:[{id:"query-parts",text:"Query parts",depth:2,charIndex:196},{id:"query-variant",text:"Query variant",depth:2,charIndex:454},{id:"idiomatic-query-variants",text:"Idiomatic query variants",depth:3,charIndex:1114},{id:"query-predicate",text:"Query predicate",depth:2,charIndex:2036},{id:"idiomatic-query-predicates",text:"Idiomatic query predicates",depth:3,charIndex:2617},{id:"by-role-query",text:"1. By Role query",depth:3,charIndex:3034},{id:"by-role-query-name-option",text:"Name option",depth:4,charIndex:4039},{id:"text-input-queries",text:"2. Text input queries",depth:3,charIndex:4578},{id:"other-accessible-queries",text:"3. Other accessible queries",depth:3,charIndex:5375},{id:"test-id-query",text:"4. Test ID query",depth:3,charIndex:5804}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/how-to-query.mdx",description:"React Native Testing Library provides various query types for finding views in tests. The number of queries can be confusing. This guide helps you pick the right queries for your test scenarios."},{title:"LLM Guidelines for React Native Testing Library",routePath:"/14.x/docs/guides/llm-guidelines",lang:"en",toc:[{id:"agent-docs-in-the-package",text:"Agent docs in the package",depth:2,charIndex:87},{id:"core-apis",text:"Core APIs",depth:2,charIndex:920},{id:"render",text:"render",depth:3,charIndex:931},{id:"screen",text:"screen",depth:3,charIndex:1417},{id:"renderhook",text:"renderHook",depth:3,charIndex:1614},{id:"query-selection",text:"Query Selection",depth:2,charIndex:1995},{id:"assertions",text:"Assertions",depth:2,charIndex:2525},{id:"jest-matchers-reference",text:"Jest Matchers Reference",depth:2,charIndex:2751},{id:"user-interactions",text:"User Interactions",depth:2,charIndex:4215},{id:"userevent-preferred",text:"userEvent (Preferred)",depth:3,charIndex:4388},{id:"fireevent-low-level",text:"fireEvent (Low-level)",depth:3,charIndex:4912},{id:"asyncawait-v14",text:"Async/Await (v14)",depth:2,charIndex:5296},{id:"waitfor-usage",text:"waitFor Usage",depth:2,charIndex:5506},{id:"code-organization",text:"Code Organization",depth:2,charIndex:5845},{id:"quick-checklist",text:"Quick Checklist",depth:2,charIndex:6185},{id:"example-good-pattern",text:"Example: Good Pattern",depth:2,charIndex:6570},{id:"example-anti-patterns",text:"Example: Anti-Patterns",depth:2,charIndex:7690}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/llm-guidelines.mdx",description:"Actionable guidelines for writing tests with React Native Testing Library (RNTL) v14."},{title:"Troubleshooting",routePath:"/14.x/docs/guides/troubleshooting",lang:"en",toc:[{id:"example-repository",text:"Example repository",depth:2,charIndex:113},{id:"undefined-component-error",text:"Undefined component error",depth:2,charIndex:320},{id:"mocking-react-native",text:"Mocking React Native",depth:3,charIndex:1383},{id:"act-warnings",text:"Act warnings",depth:2,charIndex:1659}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/troubleshooting.mdx",description:"This guide describes common issues found by users when integrating React Native Test Library to their projects:"},{title:"Introduction",routePath:"/14.x/docs/start/intro",lang:"en",toc:[{id:"the-problem",text:"The problem",depth:2,charIndex:0},{id:"this-solution",text:"This solution",depth:2,charIndex:474},{id:"example",text:"Example",depth:2,charIndex:981}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/start/intro.md"},{title:"Migration to 14.x",routePath:"/14.x/docs/start/migration-v14",lang:"en",toc:[{id:"overview",text:"Overview",depth:2,charIndex:98},{id:"quick-migration",text:"Quick Migration",depth:2,charIndex:690},{id:"breaking-changes",text:"Breaking Changes",depth:2,charIndex:1555},{id:"supported-react-react-native-and-nodejs-versions",text:"Supported React, React Native, and Node.js versions",depth:3,charIndex:1573},{id:"test-renderer-replaces-react-test-renderer",text:"Test Renderer replaces React Test Renderer",depth:3,charIndex:1916},{id:"recommended-test-renderer-versions",text:"Recommended Test Renderer versions",depth:4,charIndex:2535},{id:"1-update-dependencies",text:"1. Update dependencies",depth:4,charIndex:3233},{id:"2-update-type-imports-if-needed",text:"2. Update type imports (if needed)",depth:4,charIndex:4329},{id:"async-apis-by-default",text:"Async APIs by Default",depth:3,charIndex:4674},{id:"render-async-default",text:"`render` is now async",depth:4,charIndex:5386},{id:"renderhook-is-now-async",text:"`renderHook` is now async",depth:4,charIndex:5887},{id:"fireevent-is-now-async",text:"`fireEvent` is now async",depth:4,charIndex:6335},{id:"act-is-now-async",text:"`act` is now async",depth:4,charIndex:7398},{id:"why-async-apis",text:"Why async APIs?",depth:4,charIndex:8221},{id:"removed-apis",text:"Removed APIs",depth:3,charIndex:8426},{id:"update-alias-removed",text:"`update` alias removed",depth:4,charIndex:8440},{id:"getqueriesforelement-export-removed",text:"`getQueriesForElement` export removed",depth:4,charIndex:8808},{id:"unsafe_root-removed",text:"`UNSAFE_root` removed",depth:4,charIndex:9177},{id:"legacy-unsafe_-queries-removed",text:"Legacy `UNSAFE_*` queries removed",depth:4,charIndex:9527},{id:"concurrentroot-option-removed",text:"`concurrentRoot` option removed",depth:4,charIndex:10258},{id:"createnodemock-option-removed",text:"`createNodeMock` option removed",depth:4,charIndex:11118},{id:"container-api-reintroduced",text:"`container` API reintroduced",depth:3,charIndex:11736},{id:"text-string-validation-enforced-by-default",text:"Text string validation enforced by default",depth:3,charIndex:12778},{id:"hidden-suspense-and-activity-content",text:"Hidden Suspense and Activity content",depth:3,charIndex:14038},{id:"accessible-name-changes",text:"Accessible name changes",depth:3,charIndex:14636},{id:"unknown-options-now-warn",text:"Unknown options now warn",depth:3,charIndex:15423},{id:"codemods",text:"Codemods",depth:2,charIndex:15818},{id:"rntl-v14-update-deps",text:"`rntl-v14-update-deps`",depth:3,charIndex:15977},{id:"rntl-v14-async-functions",text:"`rntl-v14-async-functions`",depth:3,charIndex:16583},{id:"custom-render-functions",text:"Custom render functions",depth:4,charIndex:17123},{id:"limitations",text:"Limitations",depth:4,charIndex:18116},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:18254}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/start/migration-v14.mdx",description:"This guide describes the migration to React Native Testing Library version 14 from version 13.x."},{title:"Quick Start",routePath:"/14.x/docs/start/quick-start",lang:"en",toc:[{id:"installation",text:"Installation",depth:2,charIndex:0},{id:"jest-matchers",text:"Jest matchers",depth:3,charIndex:691},{id:"eslint-plugin",text:"ESLint plugin",depth:3,charIndex:923}],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":"7b5efbcf"}},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:"b85f1e33c6",221:"d1d1eecda4",2222:"e4219197a5",2721:"f7d5a21d1e",2755:"e189cf0d84",2864:"620134a1f9",3107:"7f9d7e1692",328:"342b028aa7",3435:"3658110b0b",3453:"8847d1880f",3508:"ec869e079e",3527:"735015dc16",3783:"f4fb94edbf",3974:"5afbd7ac76",3990:"33356aa775",4064:"51bb89469f",4152:"0f4f486f83",4359:"4ce3992c8f",4397:"63c8110b9e",4460:"75cded72f7",4553:"252778f9e6",4756:"ec1ea1489f",4800:"198efb3c72",4819:"c87a288763",4889:"73af98e385",4936:"19c9836cd9",5197:"b12b147b48",543:"f2b9a04424",5507:"7697238262",5608:"9745905e0c",5816:"9ec1e73c3d",5868:"d20715eda8",594:"cfd2e88542",5957:"54d54b0d67",6047:"c368b58ff2",6137:"4f8bcdd711",6156:"36f094c15a",631:"5943a4bdf3",6341:"29aa18fd2d",6466:"161bfed80d",6811:"a7c068286d",6930:"570ea35492",6958:"0e94eb3026",7146:"96cf008c15",7240:"aa6941637a",7262:"891f23ef0b",7296:"e9154a3c13",7340:"94b9988bf4",7351:"5ac093b30d",7497:"6df9901b3b",7515:"21bfaf1f22",7562:"0746b461e5",7623:"31e696a01f",7721:"aafd3d35b1",7753:"9825f7bd57",7759:"dea7c10e5a",7863:"25db6455c2",8129:"1520c4f94a",8146:"9a723fbe54",8187:"f3a75de1cb",8222:"2c5ffb0fc0",8293:"1b919addf6",8353:"5bbb73cd64",8358:"adc771bfb4",836:"8b5f5c552b",8397:"3a94532f76",8481:"090b538456",8617:"2bd68393e9",8632:"5efd81696e",8648:"8b66180249",8748:"bef8c201cf",8750:"f5a8cb4fad",8810:"8f39c110a3",8885:"d76583d43d",8901:"ca0d5e9ff2",9150:"5adb49dcde",92:"e67edfef80",9273:"66447e6e6c",9277:"1f140afe65",9377:"c7a2de4a08",9408:"a5e068033f",9419:"4a0828e91a",9637:"4ee3fa727a",9667:"094d339b43",9782:"4f0472abe1",9808:"fd6f06399e",9826:"7537a1ed35",9873:"9845e443a7",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, waitFor, waitForElementToBeRemovedConfiguration: configure, resetToDefaultsAccessibility: isHiddenFromAccessibilityOther: within, act, cleanup"},{title:"Fire Event API",routePath:"/14.x/docs/api/events/fire-event",lang:"en",toc:[{id:"fire-event",text:"`fireEvent`",depth:2,charIndex:0},{id:"press",text:"`fireEvent.press`",depth:3,charIndex:2137},{id:"change-text",text:"`fireEvent.changeText`",depth:3,charIndex:2919},{id:"scroll",text:"`fireEvent.scroll`",depth:3,charIndex:3570},{id:"on-a-scrollview",text:"On a `ScrollView`",depth:4,charIndex:4033}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/events/fire-event.mdx"},{title:"User Event interactions",routePath:"/14.x/docs/api/events/user-event",lang:"en",toc:[{id:"comparison-with-fire-event-api",text:"Comparison with Fire Event API",depth:2,charIndex:0},{id:"setup",text:"`setup()`",depth:2,charIndex:1095},{id:"setup-options",text:"Options",depth:3,charIndex:1331},{id:"press",text:"`press()`",depth:2,charIndex:1592},{id:"longpress",text:"`longPress()`",depth:2,charIndex:2257},{id:"longpress-options",text:"Options",depth:3,charIndex:3094},{id:"type",text:"`type()`",depth:2,charIndex:3204},{id:"type-options",text:"Options",depth:3,charIndex:3868},{id:"type-sequence",text:"Sequence of events",depth:3,charIndex:4148},{id:"clear",text:"`clear()`",depth:2,charIndex:4877},{id:"clear-sequence",text:"Sequence of events",depth:3,charIndex:5180},{id:"paste",text:"`paste()`",depth:2,charIndex:5463},{id:"paste-sequence",text:"Sequence of events",depth:3,charIndex:5793},{id:"scroll-to",text:"`scrollTo()`",depth:2,charIndex:6100},{id:"scroll-to-options",text:"Options",depth:3,charIndex:7492},{id:"scroll-sequence",text:"Sequence of events",depth:3,charIndex:8482}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/events/user-event.mdx"},{title:"Jest matchers",routePath:"/14.x/docs/api/jest-matchers",lang:"en",toc:[{id:"setup",text:"Setup",depth:2,charIndex:138},{id:"checking-element-existence",text:"Checking element existence",depth:2,charIndex:238},{id:"tobeonthescreen",text:"`toBeOnTheScreen()`",depth:3,charIndex:266},{id:"element-content",text:"Element Content",depth:2,charIndex:479},{id:"tohavetextcontent",text:"`toHaveTextContent()`",depth:3,charIndex:496},{id:"tocontainelement",text:"`toContainElement()`",depth:3,charIndex:803},{id:"tobeemptyelement",text:"`toBeEmptyElement()`",depth:3,charIndex:952},{id:"checking-element-state",text:"Checking element state",depth:2,charIndex:1070},{id:"tohavedisplayvalue",text:"`toHaveDisplayValue()`",depth:3,charIndex:1094},{id:"tohaveaccessibilityvalue",text:"`toHaveAccessibilityValue()`",depth:3,charIndex:1406},{id:"tobeenabled",text:"`toBeEnabled()` / `toBeDisabled`",depth:3,charIndex:1938},{id:"tobeselected",text:"`toBeSelected()`",depth:3,charIndex:2344},{id:"tobechecked",text:"`toBeChecked()` / `toBePartiallyChecked()`",depth:3,charIndex:2484},{id:"tobeexpanded",text:"`toBeExpanded()` / `toBeCollapsed()`",depth:3,charIndex:2902},{id:"tobebusy",text:"`toBeBusy()`",depth:3,charIndex:3318},{id:"checking-element-style",text:"Checking element style",depth:2,charIndex:3438},{id:"tobevisible",text:"`toBeVisible()`",depth:3,charIndex:3462},{id:"tohavestyle",text:"`toHaveStyle()`",depth:3,charIndex:3668},{id:"other-matchers",text:"Other matchers",depth:2,charIndex:3785},{id:"tohaveaccessiblename",text:"`toHaveAccessibleName()`",depth:3,charIndex:3801},{id:"tohaveprop",text:"`toHaveProp()`",depth:3,charIndex:4696}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/jest-matchers.mdx",description:"This guide covers the built-in Jest matchers. These matchers make your tests easier to read and work better with accessibility features."},{title:"Accessibility",routePath:"/14.x/docs/api/misc/accessibility",lang:"en",toc:[{id:"ishiddenfromaccessibility",text:"`isHiddenFromAccessibility`",depth:2,charIndex:0}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/accessibility.mdx"},{title:"Async utilities",routePath:"/14.x/docs/api/misc/async",lang:"en",toc:[{id:"findby-queries",text:"`findBy*` queries",depth:2,charIndex:0},{id:"waitfor",text:"`waitFor`",depth:2,charIndex:181},{id:"options",text:"Options",depth:3,charIndex:3295},{id:"waitforelementtoberemoved",text:"`waitForElementToBeRemoved`",depth:2,charIndex:3591}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/async.mdx"},{title:"Configuration",routePath:"/14.x/docs/api/misc/config",lang:"en",toc:[{id:"configure",text:"`configure`",depth:2,charIndex:0},{id:"asyncutiltimeout-option",text:"`asyncUtilTimeout` option",depth:3,charIndex:526},{id:"defaultincludehiddenelements-option",text:"`defaultIncludeHiddenElements` option",depth:3,charIndex:682},{id:"defaultdebugoptions-option",text:"`defaultDebugOptions` option",depth:3,charIndex:1068},{id:"resettodefaults",text:"`resetToDefaults()`",depth:2,charIndex:1248},{id:"environment-variables",text:"Environment variables",depth:2,charIndex:1298},{id:"rntl_skip_auto_cleanup",text:"`RNTL_SKIP_AUTO_CLEANUP`",depth:3,charIndex:1321},{id:"rntl_skip_auto_detect_fake_timers",text:"`RNTL_SKIP_AUTO_DETECT_FAKE_TIMERS`",depth:3,charIndex:1570}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/config.mdx"},{title:"Other helpers",routePath:"/14.x/docs/api/misc/other",lang:"en",toc:[{id:"within",text:"`within`",depth:2,charIndex:0},{id:"act",text:"`act`",depth:2,charIndex:824},{id:"cleanup",text:"`cleanup`",depth:2,charIndex:1683}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/other.mdx"},{title:"`renderHook` function",routePath:"/14.x/docs/api/misc/render-hook",lang:"en",toc:[{id:"renderhook",text:"`renderHook`",depth:2,charIndex:0},{id:"options",text:"`options`",depth:3,charIndex:1700},{id:"initial-props",text:"`initialProps`",depth:4,charIndex:1775},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:1970},{id:"result",text:"Result",depth:3,charIndex:2105},{id:"result-1",text:"`result`",depth:4,charIndex:2369},{id:"rerender",text:"`rerender`",depth:4,charIndex:2632},{id:"unmount",text:"`unmount`",depth:4,charIndex:2966},{id:"examples",text:"Examples",depth:3,charIndex:3155},{id:"with-initialprops",text:"With `initialProps`",depth:4,charIndex:3207},{id:"with-wrapper",text:"With `wrapper`",depth:4,charIndex:3881},{id:"with-react-suspense",text:"With React Suspense",depth:4,charIndex:4174}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/misc/render-hook.mdx"},{title:"Queries",routePath:"/14.x/docs/api/queries",lang:"en",toc:[{id:"accessing-queries",text:"Accessing queries",depth:2,charIndex:223},{id:"using-screen-object",text:"Using `screen` object",depth:3,charIndex:379},{id:"using-render-result",text:"Using `render` result",depth:3,charIndex:710},{id:"query-parts",text:"Query parts",depth:2,charIndex:1020},{id:"query-variant",text:"Query variant",depth:2,charIndex:1276},{id:"get-by",text:"`getBy*` queries",depth:3,charIndex:1936},{id:"get-all-by",text:"`getAllBy*` queries",depth:3,charIndex:2191},{id:"query-by",text:"`queryBy*` queries",depth:3,charIndex:2369},{id:"query-all-by",text:"`queryAllBy*` queries",depth:3,charIndex:2648},{id:"find-by",text:"`findBy*` queries",depth:3,charIndex:2845},{id:"find-all-by",text:"`findAllBy*` queries",depth:3,charIndex:3251},{id:"query-predicates",text:"Query predicates",depth:2,charIndex:4009},{id:"by-role",text:"`*ByRole`",depth:3,charIndex:4293},{id:"by-role-options",text:"Options",depth:4,charIndex:5478},{id:"by-label-text",text:"`*ByLabelText`",depth:3,charIndex:8146},{id:"by-placeholder-text",text:"`*ByPlaceholderText`",depth:3,charIndex:9028},{id:"by-display-value",text:"`*ByDisplayValue`",depth:3,charIndex:9594},{id:"by-text",text:"`*ByText`",depth:3,charIndex:10134},{id:"by-hint-text",text:"`*ByHintText`",depth:3,charIndex:10807},{id:"by-test-id",text:"`*ByTestId`",depth:3,charIndex:11609},{id:"common-options",text:"Common options",depth:3,charIndex:12433},{id:"includehiddenelements-option",text:"`includeHiddenElements` option",depth:4,charIndex:12689},{id:"textmatch-type",text:"TextMatch type",depth:2,charIndex:13515},{id:"examples",text:"Examples",depth:3,charIndex:13681},{id:"text-match-options",text:"Options",depth:3,charIndex:14491},{id:"precision",text:"Precision",depth:4,charIndex:14522},{id:"normalization",text:"Normalization",depth:4,charIndex:15368}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/queries.mdx",description:"Queries are one of the main building blocks for the React Native Testing Library. They enable you to find relevant elements in the element tree, which represents your application's user interface when running under tests."},{title:"`render` API",routePath:"/14.x/docs/api/render",lang:"en",toc:[{id:"render",text:"`render` function",depth:2,charIndex:0},{id:"options",text:"Options",depth:3,charIndex:852},{id:"wrapper",text:"`wrapper`",depth:4,charIndex:941},{id:"result",text:"Result",depth:3,charIndex:1653}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/render.mdx"},{title:"`screen` object",routePath:"/14.x/docs/api/screen",lang:"en",toc:[{id:"queries",text:"`...queries`",depth:3,charIndex:575},{id:"example",text:"Example",depth:4,charIndex:708},{id:"rerender",text:"`rerender`",depth:3,charIndex:854},{id:"unmount",text:"`unmount`",depth:3,charIndex:1644},{id:"debug",text:"`debug`",depth:3,charIndex:2113},{id:"debug-message-option",text:"`message` option",depth:4,charIndex:2263},{id:"debug-map-props-option",text:"`mapProps` option",depth:4,charIndex:2567},{id:"tojson",text:"`toJSON`",depth:3,charIndex:3563},{id:"container",text:"`container`",depth:3,charIndex:3687},{id:"root",text:"`root`",depth:3,charIndex:4231}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/api/screen.mdx",description:"The screen object provides access to queries and utilities for the currently rendered UI. This object is assigned after the render call and cleared after each test by calling cleanup. If no render call has been made in a given test, then it holds a special object and throws a helpful error on each property and method access. ...queries The main feature of screen is its queries for finding elements in the view hierarchy. See Queries for a complete list. Example rerender Re-render the in-memory tree with a new root element. This simulates a React update render at the root. If the new element has the same type (and key) as the previous element, the tree will be updated; otherwise, it will re-mount a new tree, in both cases triggering the appropriate lifecycle events. This method is async and uses async act internally to execute all pending React updates during updating. This works with async React features like Suspense boundaries and the use() hook. unmount Unmount the in-memory tree, triggering the appropriate lifecycle events. This method is async and uses async act internally to execute all pending React updates during unmounting. This works with async React features like Suspense boundaries and the use() hook. debug Pretty prints deeply rendered component passed to render. message option {#debug-message-option} You can provide a message that will be printed on top. logs optional message and colored JSX: mapProps option {#debug-map-props-option} You can use the mapProps option to transform the props that will be printed : This will log the rendered JSX without the style props. The children prop cannot be filtered out so the following will print all rendered components with all props but children filtered out. This option can be used to target specific props when debugging a query (for instance, keeping only the children prop when debugging a getByText query). You can also transform prop values so that they are more readable (e.g., flatten styles). Or remove props that have little value when debugging tests, e.g. path prop for svgs toJSON Get the rendered component JSON representation, e.g. for snapshot testing. container Returns a pseudo-element container whose children are the elements you asked to render. This is the root container element from Test Renderer. The container provides access to the entire rendered tree. Use it to query or manipulate the rendered output, similar to how container works in React Testing Library. root Returns the rendered root host element, or null if nothing was rendered. This is the first child of the container, which represents the actual root element you rendered. This API is useful for component tests where you need to access the root host view without using *ByTestId queries or similar methods."},{title:"Common Mistakes with React Native Testing Library",routePath:"/14.x/docs/guides/common-mistakes",lang:"en",toc:[{id:"using-the-wrong-query",text:"Using the wrong query",depth:2,charIndex:630},{id:"not-using-byrole-most-of-the-time",text:"Not using `*ByRole` query most of the time",depth:2,charIndex:1651},{id:"using-the-wrong-assertion",text:"Using the wrong assertion",depth:2,charIndex:2783},{id:"using-query-variants-for-anything-except-checking-for-non-existence",text:"Using `query*` variants for anything except checking for non-existence",depth:2,charIndex:3652},{id:"using-waitfor-to-wait-for-elements-that-can-be-queried-with-find",text:"Using `waitFor` to wait for elements that can be queried with `find*`",depth:2,charIndex:4412},{id:"performing-side-effects-in-waitfor",text:"Performing side-effects in `waitFor`",depth:2,charIndex:5227},{id:"using-container-to-query-for-elements",text:"Using `container` to query for elements",depth:2,charIndex:6195},{id:"passing-an-empty-callback-to-waitfor",text:"Passing an empty callback to `waitFor`",depth:2,charIndex:6981},{id:"not-using-screen",text:"Not using `screen`",depth:2,charIndex:7440},{id:"wrapping-things-in-act-unnecessarily",text:"Wrapping things in `act` unnecessarily",depth:2,charIndex:8158},{id:"not-using-user-event-api",text:"Not using User Event API",depth:2,charIndex:9094},{id:"not-querying-by-text",text:"Not querying by text",depth:2,charIndex:10260},{id:"not-using-testing-library-eslint-plugins",text:"Not using Testing Library ESLint plugins",depth:2,charIndex:10832},{id:"using-cleanup",text:"Using `cleanup`",depth:2,charIndex:11492},{id:"using-get-variants-as-assertions",text:"Using `get*` variants as assertions",depth:2,charIndex:12101},{id:"having-multiple-assertions-in-a-single-waitfor-callback",text:"Having multiple assertions in a single `waitFor` callback",depth:2,charIndex:12925},{id:"using-wrapper-as-the-variable-name",text:"Using `wrapper` as the variable name",depth:2,charIndex:13988},{id:"summary",text:"Summary",depth:2,charIndex:14854}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/common-mistakes.mdx",description:'Note: This guide is adapted from Kent C. Dodds\' article "Common mistakes with React Testing Library" for React Native Testing Library v14. The original article focuses on web React, but the principles apply to React Native as well. This adaptation includes React Native-specific examples, async API usage (v14), and ARIA-compatible accessibility attributes. React Native Testing Library guiding principle is: "The more your tests resemble the way your software is used, the more confidence they can give you." This guide outlines some common mistakes people make when using React Native Testing Library and how to avoid them.'},{title:"Community resources",routePath:"/14.x/docs/guides/community-resources",lang:"en",toc:[{id:"recommended-content",text:"Recommended content",depth:2,charIndex:0},{id:"older-potentially-outdated-content",text:"Older, potentially outdated content",depth:2,charIndex:569}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/community-resources.mdx"},{title:"FAQ",routePath:"/14.x/docs/guides/faq",lang:"en",toc:[{id:"can-i-test-the-native-features-of-react-native-apps",text:"Can I test the native features of React Native apps?",depth:2,charIndex:0},{id:"should-i-usemigrate-to-screen-queries",text:"Should I use/migrate to `screen` queries?",depth:2,charIndex:1097},{id:"should-i-usemigrate-to-user-event-interactions",text:"Should I use/migrate to User Event interactions?",depth:2,charIndex:1405}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/faq.mdx"},{title:"How should I query?",routePath:"/14.x/docs/guides/how-to-query",lang:"en",toc:[{id:"query-parts",text:"Query parts",depth:2,charIndex:196},{id:"query-variant",text:"Query variant",depth:2,charIndex:454},{id:"idiomatic-query-variants",text:"Idiomatic query variants",depth:3,charIndex:1114},{id:"query-predicate",text:"Query predicate",depth:2,charIndex:2036},{id:"idiomatic-query-predicates",text:"Idiomatic query predicates",depth:3,charIndex:2617},{id:"by-role-query",text:"1. By Role query",depth:3,charIndex:3034},{id:"by-role-query-name-option",text:"Name option",depth:4,charIndex:4039},{id:"text-input-queries",text:"2. Text input queries",depth:3,charIndex:4578},{id:"other-accessible-queries",text:"3. Other accessible queries",depth:3,charIndex:5375},{id:"test-id-query",text:"4. Test ID query",depth:3,charIndex:5804}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/how-to-query.mdx",description:"React Native Testing Library provides various query types for finding views in tests. The number of queries can be confusing. This guide helps you pick the right queries for your test scenarios."},{title:"LLM Guidelines for React Native Testing Library",routePath:"/14.x/docs/guides/llm-guidelines",lang:"en",toc:[{id:"core-apis",text:"Core APIs",depth:2,charIndex:87},{id:"render",text:"render",depth:3,charIndex:98},{id:"screen",text:"screen",depth:3,charIndex:584},{id:"renderhook",text:"renderHook",depth:3,charIndex:781},{id:"query-selection",text:"Query Selection",depth:2,charIndex:1162},{id:"assertions",text:"Assertions",depth:2,charIndex:1692},{id:"jest-matchers-reference",text:"Jest Matchers Reference",depth:2,charIndex:1918},{id:"user-interactions",text:"User Interactions",depth:2,charIndex:3382},{id:"userevent-preferred",text:"userEvent (Preferred)",depth:3,charIndex:3555},{id:"fireevent-low-level",text:"fireEvent (Low-level)",depth:3,charIndex:4079},{id:"asyncawait-v14",text:"Async/Await (v14)",depth:2,charIndex:4463},{id:"waitfor-usage",text:"waitFor Usage",depth:2,charIndex:4673},{id:"code-organization",text:"Code Organization",depth:2,charIndex:5012},{id:"quick-checklist",text:"Quick Checklist",depth:2,charIndex:5352},{id:"example-good-pattern",text:"Example: Good Pattern",depth:2,charIndex:5737},{id:"example-anti-patterns",text:"Example: Anti-Patterns",depth:2,charIndex:6857}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/llm-guidelines.mdx",description:"Actionable guidelines for writing tests with React Native Testing Library (RNTL) v14."},{title:"Troubleshooting",routePath:"/14.x/docs/guides/troubleshooting",lang:"en",toc:[{id:"example-repository",text:"Example repository",depth:2,charIndex:113},{id:"undefined-component-error",text:"Undefined component error",depth:2,charIndex:320},{id:"mocking-react-native",text:"Mocking React Native",depth:3,charIndex:1383},{id:"act-warnings",text:"Act warnings",depth:2,charIndex:1659}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/guides/troubleshooting.mdx",description:"This guide describes common issues found by users when integrating React Native Test Library to their projects:"},{title:"Introduction",routePath:"/14.x/docs/start/intro",lang:"en",toc:[{id:"the-problem",text:"The problem",depth:2,charIndex:0},{id:"this-solution",text:"This solution",depth:2,charIndex:474},{id:"example",text:"Example",depth:2,charIndex:981}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/start/intro.md"},{title:"Migration to 14.x",routePath:"/14.x/docs/start/migration-v14",lang:"en",toc:[{id:"overview",text:"Overview",depth:2,charIndex:98},{id:"quick-migration",text:"Quick Migration",depth:2,charIndex:690},{id:"breaking-changes",text:"Breaking Changes",depth:2,charIndex:1726},{id:"supported-react-react-native-and-nodejs-versions",text:"Supported React, React Native, and Node.js versions",depth:3,charIndex:1744},{id:"test-renderer-replaces-react-test-renderer",text:"Test Renderer replaces React Test Renderer",depth:3,charIndex:2087},{id:"recommended-test-renderer-versions",text:"Recommended Test Renderer versions",depth:4,charIndex:2706},{id:"1-update-dependencies",text:"1. Update dependencies",depth:4,charIndex:3404},{id:"2-update-type-imports-if-needed",text:"2. Update type imports (if needed)",depth:4,charIndex:4500},{id:"async-apis-by-default",text:"Async APIs by Default",depth:3,charIndex:4845},{id:"render-async-default",text:"`render` is now async",depth:4,charIndex:5557},{id:"renderhook-is-now-async",text:"`renderHook` is now async",depth:4,charIndex:6058},{id:"fireevent-is-now-async",text:"`fireEvent` is now async",depth:4,charIndex:6506},{id:"act-is-now-async",text:"`act` is now async",depth:4,charIndex:7569},{id:"why-async-apis",text:"Why async APIs?",depth:4,charIndex:8392},{id:"removed-apis",text:"Removed APIs",depth:3,charIndex:8597},{id:"update-alias-removed",text:"`update` alias removed",depth:4,charIndex:8611},{id:"getqueriesforelement-export-removed",text:"`getQueriesForElement` export removed",depth:4,charIndex:8979},{id:"unsafe_root-removed",text:"`UNSAFE_root` removed",depth:4,charIndex:9348},{id:"legacy-unsafe_-queries-removed",text:"Legacy `UNSAFE_*` queries removed",depth:4,charIndex:9698},{id:"concurrentroot-option-removed",text:"`concurrentRoot` option removed",depth:4,charIndex:10429},{id:"createnodemock-option-removed",text:"`createNodeMock` option removed",depth:4,charIndex:11289},{id:"container-api-reintroduced",text:"`container` API reintroduced",depth:3,charIndex:11907},{id:"text-string-validation-enforced-by-default",text:"Text string validation enforced by default",depth:3,charIndex:12949},{id:"hidden-suspense-and-activity-content",text:"Hidden Suspense and Activity content",depth:3,charIndex:14209},{id:"accessible-name-changes",text:"Accessible name changes",depth:3,charIndex:14807},{id:"unknown-options-now-warn",text:"Unknown options now warn",depth:3,charIndex:15594},{id:"codemods",text:"Codemods",depth:2,charIndex:15989},{id:"rntl-v14-update-deps",text:"`rntl-v14-update-deps`",depth:3,charIndex:16148},{id:"rntl-v14-async-functions",text:"`rntl-v14-async-functions`",depth:3,charIndex:16754},{id:"custom-render-functions",text:"Custom render functions",depth:4,charIndex:17294},{id:"limitations",text:"Limitations",depth:4,charIndex:18287},{id:"full-changelog",text:"Full Changelog",depth:2,charIndex:18425}],frontmatter:{},version:"14.x",_relativePath:"14.x/docs/start/migration-v14.mdx",description:"This guide describes the migration to React Native Testing Library version 14 from version 13.x."},{title:"Quick Start",routePath:"/14.x/docs/start/quick-start",lang:"en",toc:[{id:"installation",text:"Installation",depth:2,charIndex:0},{id:"agent-docs-in-the-package",text:"Agent docs in the package",depth:2,charIndex:691},{id:"jest-matchers",text:"Jest matchers",depth:3,charIndex:1412},{id:"eslint-plugin",text:"ESLint plugin",depth:3,charIndex:1644}],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":"261f874a"}},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:"b85f1e33c6",221:"d1d1eecda4",2222:"e4219197a5",2721:"f7d5a21d1e",2755:"e189cf0d84",2864:"620134a1f9",3107:"7f9d7e1692",328:"342b028aa7",3435:"3658110b0b",3453:"8847d1880f",3508:"ec869e079e",3527:"735015dc16",3783:"f4fb94edbf",3974:"5afbd7ac76",3990:"33356aa775",4064:"51bb89469f",4152:"0f4f486f83",4359:"4ce3992c8f",4397:"63c8110b9e",4460:"75cded72f7",4553:"252778f9e6",4756:"ec1ea1489f",4800:"198efb3c72",4819:"c87a288763",4889:"73af98e385",4936:"19c9836cd9",5197:"b12b147b48",543:"b484d49a87",5507:"7697238262",5608:"9745905e0c",5816:"9ec1e73c3d",5868:"d20715eda8",594:"cfd2e88542",5957:"54d54b0d67",6047:"c368b58ff2",6137:"4f8bcdd711",6156:"36f094c15a",631:"5943a4bdf3",6341:"29aa18fd2d",6466:"161bfed80d",6811:"09c1b532f0",6930:"570ea35492",6958:"0e94eb3026",7146:"96cf008c15",7240:"aa6941637a",7262:"891f23ef0b",7296:"e9154a3c13",7340:"94b9988bf4",7351:"5ac093b30d",7497:"6df9901b3b",7515:"21bfaf1f22",7562:"0746b461e5",7623:"31e696a01f",7721:"aafd3d35b1",7753:"9825f7bd57",7759:"dea7c10e5a",7863:"25db6455c2",8129:"1520c4f94a",8146:"9a723fbe54",8187:"f3a75de1cb",8222:"2c5ffb0fc0",8293:"1b919addf6",8353:"5bbb73cd64",8358:"adc771bfb4",836:"8b5f5c552b",8397:"3a94532f76",8481:"090b538456",8617:"2bd68393e9",8632:"5efd81696e",8648:"8b66180249",8748:"bef8c201cf",8750:"f5a8cb4fad",8810:"8f39c110a3",8885:"d76583d43d",8901:"ca0d5e9ff2",9150:"5adb49dcde",92:"e67edfef80",9273:"66447e6e6c",9277:"1f140afe65",9377:"c7a2de4a08",9408:"a5e068033f",9419:"4a0828e91a",9637:"4ee3fa727a",9667:"094d339b43",9782:"4f0472abe1",9808:"fd6f06399e",9826:"7537a1ed35",9873:"64bf349afa",9914:"08c1c2547c",9950:"643c38eb89"})[e]+".js",c.miniCssF=e=>""+e+".css",c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n={},c.l=function(e,t,i,a){if(n[e])return void n[e].push(t);if(void 0!==i)for(var r,o,d=document.getElementsByTagName("script"),s=0;s{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i=[],c.O=(e,t,n,a)=>{if(t){a=a||0;for(var r=i.length;r>0&&i[r-1][2]>a;r--)i[r]=i[r-1];i[r]=[t,n,a];return}for(var o=1/0,r=0;r=a)&&Object.keys(c.O).every(e=>c.O[e](t[s]))?t.splice(s--,1):(d=!1,an=a[e]=[t,i]);t.push(n[2]=i);var r=c.p+c.u(e),o=Error();c.l(r,function(t){if(c.o(a,e)&&(0!==(n=a[e])&&(a[e]=void 0),n)){var i=t&&("load"===t.type?"missing":t.type),r=t&&t.target&&t.target.src;o.message="Loading chunk "+e+" failed.\n("+i+": "+r+")",o.name="ChunkLoadError",o.type=i,o.request=r,n[1](o)}},"chunk-"+e,e)}},c.O.j=e=>0===a[e],r=(e,t)=>{var n,i,[r,o,d]=t,s=0;if(r.some(e=>0!==a[e])){for(n in o)c.o(o,n)&&(c.m[n]=o[n]);if(d)var h=d(c)}for(e&&e(t);sc(2531)),c.O(void 0,["4014","9783","9535","2482"],()=>c(5344)),c.O(void 0,["4014","9783","9535","2482"],()=>c(7425));var h=c.O(void 0,["4014","9783","9535","2482"],()=>c(2581));h=c.O(h)})(); \ No newline at end of file diff --git a/static/search_index.14_x.en.7b5efbcf.json b/static/search_index.14_x.en.261f874a.json similarity index 80% rename from static/search_index.14_x.en.7b5efbcf.json rename to static/search_index.14_x.en.261f874a.json index 7ae356ff..f662324b 100644 --- a/static/search_index.14_x.en.7b5efbcf.json +++ b/static/search_index.14_x.en.261f874a.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, waitFor, 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, waitFor, 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\nThe base fireEvent(instance, eventName, ...data) API can pass multiple custom arguments to the handler. Convenience helpers such as fireEvent.press and fireEvent.scroll are different: they create a default event object and accept one optional object to merge into it.\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 eventProps?: Record,\n) => Promise\n\nBuilds a press event object, merges eventProps into it, and invokes the press handler on the element or nearest eligible parent.\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(expect.objectContaining(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 text: string,\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 eventProps?: Record,\n) => Promise\n\nBuilds a scroll event object, merges eventProps into it, and invokes the scroll handler on the element or nearest eligible parent.\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":2137},{"id":"change-text","text":"`fireEvent.changeText`","depth":3,"charIndex":2919},{"id":"scroll","text":"`fireEvent.scroll`","depth":3,"charIndex":3570},{"id":"on-a-scrollview","text":"On a `ScrollView`","depth":4,"charIndex":4033}],"frontmatter":{},"version":"14.x"},{"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