@testing-library/react-native 12.1.1 → 12.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (372) hide show
  1. package/.DS_Store +0 -0
  2. package/.codecov.yml +9 -0
  3. package/.eslintcache +1 -0
  4. package/.eslintignore +2 -0
  5. package/.eslintrc +19 -0
  6. package/.flowconfig +63 -0
  7. package/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
  8. package/.github/ISSUE_TEMPLATE/feature_request.md +14 -0
  9. package/.github/ISSUE_TEMPLATE/question.md +9 -0
  10. package/.github/PULL_REQUEST_TEMPLATE.md +10 -0
  11. package/.github/actions/setup-deps/action.yml +22 -0
  12. package/.github/actions/setup-website-deps/action.yml +22 -0
  13. package/.github/dependabot.yml +10 -0
  14. package/.github/workflows/deploy-website.yml +36 -0
  15. package/.github/workflows/example-apps.yml +25 -0
  16. package/.github/workflows/main.yml +103 -0
  17. package/.gitignore +11 -0
  18. package/.prettierrc.js +5 -0
  19. package/CODE_OF_CONDUCT.md +73 -0
  20. package/CONTRIBUTING.md +64 -0
  21. package/README.md +8 -7
  22. package/babel.config.js +22 -0
  23. package/build/act.js.map +1 -1
  24. package/build/cleanup.js.map +1 -1
  25. package/build/config.d.ts +1 -0
  26. package/build/config.js.map +1 -1
  27. package/build/fireEvent.d.ts +13 -5
  28. package/build/fireEvent.js +57 -48
  29. package/build/fireEvent.js.map +1 -1
  30. package/build/flush-micro-tasks.d.ts +19 -0
  31. package/build/flush-micro-tasks.js +36 -0
  32. package/build/flush-micro-tasks.js.map +1 -0
  33. package/build/helpers/accessiblity.js +3 -1
  34. package/build/helpers/accessiblity.js.map +1 -1
  35. package/build/helpers/component-tree.d.ts +0 -15
  36. package/build/helpers/component-tree.js +0 -45
  37. package/build/helpers/component-tree.js.map +1 -1
  38. package/build/helpers/deprecation.d.ts +1 -0
  39. package/build/helpers/deprecation.js +16 -0
  40. package/build/helpers/deprecation.js.map +1 -1
  41. package/build/helpers/errors.d.ts +0 -4
  42. package/build/helpers/errors.js +1 -25
  43. package/build/helpers/errors.js.map +1 -1
  44. package/build/helpers/findAll.js.map +1 -1
  45. package/build/helpers/format-default.js.map +1 -1
  46. package/build/helpers/format.js.map +1 -1
  47. package/build/helpers/host-component-names.js +4 -1
  48. package/build/helpers/host-component-names.js.map +1 -1
  49. package/build/helpers/matchers/matchLabelText.js.map +1 -1
  50. package/build/helpers/pointer-events.d.ts +9 -0
  51. package/build/helpers/pointer-events.js +25 -0
  52. package/build/helpers/pointer-events.js.map +1 -0
  53. package/build/helpers/stringValidation.js.map +1 -1
  54. package/build/helpers/timers.js.map +1 -1
  55. package/build/index.js +2 -2
  56. package/build/index.js.map +1 -1
  57. package/build/matches.js.map +1 -1
  58. package/build/pure.d.ts +1 -1
  59. package/build/pure.js.map +1 -1
  60. package/build/queries/a11yState.js.map +1 -1
  61. package/build/queries/a11yValue.js.map +1 -1
  62. package/build/queries/displayValue.js.map +1 -1
  63. package/build/queries/hintText.js.map +1 -1
  64. package/build/queries/labelText.js.map +1 -1
  65. package/build/queries/makeQueries.js.map +1 -1
  66. package/build/queries/placeholderText.js.map +1 -1
  67. package/build/queries/role.js.map +1 -1
  68. package/build/queries/testId.js.map +1 -1
  69. package/build/queries/text.js.map +1 -1
  70. package/build/queries/unsafeProps.js.map +1 -1
  71. package/build/render.d.ts +171 -12
  72. package/build/render.js +11 -4
  73. package/build/render.js.map +1 -1
  74. package/build/renderHook.d.ts +3 -6
  75. package/build/renderHook.js +4 -3
  76. package/build/renderHook.js.map +1 -1
  77. package/build/shallow.js.map +1 -1
  78. package/build/test-utils/events.d.ts +10 -0
  79. package/build/test-utils/events.js +27 -0
  80. package/build/test-utils/events.js.map +1 -0
  81. package/build/test-utils/index.d.ts +1 -0
  82. package/build/test-utils/index.js +17 -0
  83. package/build/test-utils/index.js.map +1 -0
  84. package/build/user-event/event-builder/common.d.ts +45 -0
  85. package/build/user-event/event-builder/common.js +58 -0
  86. package/build/user-event/event-builder/common.js.map +1 -0
  87. package/build/user-event/event-builder/index.d.ts +32 -0
  88. package/build/user-event/event-builder/index.js +12 -0
  89. package/build/user-event/event-builder/index.js.map +1 -0
  90. package/build/user-event/index.d.ts +9 -0
  91. package/build/user-event/index.js +16 -0
  92. package/build/user-event/index.js.map +1 -0
  93. package/build/user-event/press/constants.d.ts +2 -0
  94. package/build/user-event/press/constants.js +16 -0
  95. package/build/user-event/press/constants.js.map +1 -0
  96. package/build/user-event/press/index.d.ts +1 -0
  97. package/build/user-event/press/index.js +19 -0
  98. package/build/user-event/press/index.js.map +1 -0
  99. package/build/user-event/press/press.d.ts +7 -0
  100. package/build/user-event/press/press.js +106 -0
  101. package/build/user-event/press/press.js.map +1 -0
  102. package/build/user-event/press/utils/warnAboutRealTimers.d.ts +1 -0
  103. package/build/user-event/press/utils/warnAboutRealTimers.js +14 -0
  104. package/build/user-event/press/utils/warnAboutRealTimers.js.map +1 -0
  105. package/build/user-event/setup/index.d.ts +2 -0
  106. package/build/user-event/setup/index.js +13 -0
  107. package/build/user-event/setup/index.js.map +1 -0
  108. package/build/user-event/setup/setup.d.ts +39 -0
  109. package/build/user-event/setup/setup.js +56 -0
  110. package/build/user-event/setup/setup.js.map +1 -0
  111. package/build/user-event/type/index.d.ts +1 -0
  112. package/build/user-event/type/index.js +13 -0
  113. package/build/user-event/type/index.js.map +1 -0
  114. package/build/user-event/type/type.d.ts +3 -0
  115. package/build/user-event/type/type.js +18 -0
  116. package/build/user-event/type/type.js.map +1 -0
  117. package/build/user-event/utils/events.d.ts +9 -0
  118. package/build/user-event/utils/events.js +44 -0
  119. package/build/user-event/utils/events.js.map +1 -0
  120. package/build/user-event/utils/index.d.ts +2 -0
  121. package/build/user-event/utils/index.js +28 -0
  122. package/build/user-event/utils/index.js.map +1 -0
  123. package/build/user-event/utils/wait.d.ts +2 -0
  124. package/build/user-event/utils/wait.js +14 -0
  125. package/build/user-event/utils/wait.js.map +1 -0
  126. package/build/waitFor.js +3 -3
  127. package/build/waitFor.js.map +1 -1
  128. package/build/waitForElementToBeRemoved.js.map +1 -1
  129. package/examples/basic/.expo-shared/assets.json +4 -0
  130. package/examples/basic/.gitignore +14 -0
  131. package/examples/basic/App.tsx +20 -0
  132. package/examples/basic/README.md +11 -0
  133. package/examples/basic/__tests__/App.test.tsx +119 -0
  134. package/examples/basic/app.json +31 -0
  135. package/examples/basic/assets/adaptive-icon.png +0 -0
  136. package/examples/basic/assets/favicon.png +0 -0
  137. package/examples/basic/assets/icon.png +0 -0
  138. package/examples/basic/assets/splash.png +0 -0
  139. package/examples/basic/babel.config.js +6 -0
  140. package/examples/basic/components/Home.tsx +28 -0
  141. package/examples/basic/components/LoginForm.tsx +138 -0
  142. package/examples/basic/jest-setup.ts +7 -0
  143. package/examples/basic/jest.config.js +5 -0
  144. package/examples/basic/package.json +30 -0
  145. package/examples/basic/tsconfig.json +7 -0
  146. package/examples/react-navigation/README.md +14 -0
  147. package/examples/react-navigation/babel.config.js +4 -0
  148. package/examples/react-navigation/jest-setup.js +11 -0
  149. package/examples/react-navigation/jest.config.js +10 -0
  150. package/examples/react-navigation/package.json +31 -0
  151. package/examples/react-navigation/src/App.js +21 -0
  152. package/examples/react-navigation/src/DrawerNavigator.js +15 -0
  153. package/examples/react-navigation/src/DrawerNavigator.test.js +42 -0
  154. package/examples/react-navigation/src/NativeStackNavigator.js +15 -0
  155. package/examples/react-navigation/src/NativeStackNavigator.test.js +34 -0
  156. package/examples/react-navigation/src/StackNavigator.js +15 -0
  157. package/examples/react-navigation/src/StackNavigator.test.js +34 -0
  158. package/examples/react-navigation/src/TabNavigator.js +15 -0
  159. package/examples/react-navigation/src/TabNavigator.test.js +21 -0
  160. package/examples/react-navigation/src/screens/DetailsScreen.js +43 -0
  161. package/examples/react-navigation/src/screens/DetailsScreen.test.js +27 -0
  162. package/examples/react-navigation/src/screens/DrawerHomeScreen.js +26 -0
  163. package/examples/react-navigation/src/screens/HomeScreen.js +48 -0
  164. package/examples/react-navigation/src/screens/SettingsScreen.js +20 -0
  165. package/examples/react-navigation/src/test-utils.js +12 -0
  166. package/examples/redux/App.js +27 -0
  167. package/examples/redux/actions/todoActions.js +25 -0
  168. package/examples/redux/babel.config.js +6 -0
  169. package/examples/redux/components/AddTodo.js +73 -0
  170. package/examples/redux/components/AddTodo.test.js +27 -0
  171. package/examples/redux/components/TodoElem.js +25 -0
  172. package/examples/redux/components/TodoList.js +29 -0
  173. package/examples/redux/components/TodoList.test.js +34 -0
  174. package/examples/redux/index.js +8 -0
  175. package/examples/redux/jest-setup.js +2 -0
  176. package/examples/redux/jest.config.js +4 -0
  177. package/examples/redux/package.json +23 -0
  178. package/examples/redux/reducers/index.js +6 -0
  179. package/examples/redux/reducers/todoReducer.js +27 -0
  180. package/examples/redux/store.js +10 -0
  181. package/examples/redux/test-utils.js +11 -0
  182. package/experiments-app/.expo/README.md +15 -0
  183. package/experiments-app/.expo/devices.json +3 -0
  184. package/experiments-app/.expo/packager-info.json +9 -0
  185. package/experiments-app/.expo/settings.json +9 -0
  186. package/experiments-app/.gitignore +17 -0
  187. package/experiments-app/.prettierrc.js +5 -0
  188. package/experiments-app/app.json +30 -0
  189. package/experiments-app/assets/adaptive-icon.png +0 -0
  190. package/experiments-app/assets/favicon.png +0 -0
  191. package/experiments-app/assets/icon.png +0 -0
  192. package/experiments-app/assets/splash.png +0 -0
  193. package/experiments-app/babel.config.js +6 -0
  194. package/experiments-app/index.js +4 -0
  195. package/experiments-app/package.json +31 -0
  196. package/experiments-app/src/App.tsx +31 -0
  197. package/experiments-app/src/MainScreen.tsx +51 -0
  198. package/experiments-app/src/experiments.ts +17 -0
  199. package/experiments-app/src/screens/TextInputEventPropagation.tsx +54 -0
  200. package/experiments-app/src/screens/TextInputEvents.tsx +50 -0
  201. package/experiments-app/src/utils/helpers.ts +8 -0
  202. package/experiments-app/tsconfig.json +6 -0
  203. package/experiments-app/yarn.lock +6913 -0
  204. package/flow-typed/npm/jest_v26.x.x.js +1218 -0
  205. package/flow-typed/npm/react-test-renderer_v16.x.x.js +81 -0
  206. package/jest-setup.ts +10 -0
  207. package/package.json +6 -6
  208. package/renovate.json +19 -0
  209. package/scripts/test_react_17 +12 -0
  210. package/src/__tests__/__snapshots__/render-debug.test.tsx.snap +548 -0
  211. package/src/__tests__/__snapshots__/render.test.tsx.snap +39 -0
  212. package/src/__tests__/act.test.tsx +52 -0
  213. package/src/__tests__/auto-cleanup-skip.test.tsx +39 -0
  214. package/src/__tests__/auto-cleanup.test.tsx +50 -0
  215. package/src/__tests__/cleanup.test.tsx +26 -0
  216. package/src/__tests__/config.test.ts +55 -0
  217. package/src/__tests__/fireEvent-textInput.test.tsx +154 -0
  218. package/src/__tests__/fireEvent.test.tsx +485 -0
  219. package/src/__tests__/host-component-names.test.tsx +109 -0
  220. package/src/__tests__/host-text-nesting.test.tsx +90 -0
  221. package/src/__tests__/jest-native.test.tsx +84 -0
  222. package/src/__tests__/questionsBoard.test.tsx +62 -0
  223. package/src/__tests__/react-native-api.test.tsx +126 -0
  224. package/src/__tests__/render-debug.test.tsx +207 -0
  225. package/src/__tests__/render-stringValidation.test.tsx +157 -0
  226. package/src/__tests__/render.test.tsx +256 -0
  227. package/src/__tests__/renderHook.test.tsx +114 -0
  228. package/src/__tests__/screen.test.tsx +66 -0
  229. package/src/__tests__/timerUtils.ts +7 -0
  230. package/src/__tests__/timers.test.ts +27 -0
  231. package/src/__tests__/waitFor.test.tsx +327 -0
  232. package/src/__tests__/waitForElementToBeRemoved.test.tsx +151 -0
  233. package/src/__tests__/within.test.tsx +96 -0
  234. package/src/act.ts +86 -0
  235. package/src/cleanup.ts +15 -0
  236. package/src/config.ts +72 -0
  237. package/src/fireEvent.ts +163 -0
  238. package/src/flush-micro-tasks.ts +30 -0
  239. package/src/helpers/__tests__/accessiblity.test.tsx +373 -0
  240. package/src/helpers/__tests__/component-tree.test.tsx +226 -0
  241. package/src/helpers/__tests__/format-default.tsx +114 -0
  242. package/src/helpers/__tests__/getTextContent.test.tsx +49 -0
  243. package/src/helpers/__tests__/includeHiddenElements.test.tsx +39 -0
  244. package/src/helpers/__tests__/query-name.test.ts +10 -0
  245. package/src/helpers/__tests__/timers.test.ts +8 -0
  246. package/src/helpers/accessiblity.ts +108 -0
  247. package/src/helpers/component-tree.ts +89 -0
  248. package/src/helpers/debugDeep.ts +27 -0
  249. package/src/helpers/debugShallow.ts +22 -0
  250. package/src/helpers/deprecation.ts +53 -0
  251. package/src/helpers/errors.ts +66 -0
  252. package/src/helpers/filterNodeByType.ts +7 -0
  253. package/src/helpers/findAll.ts +68 -0
  254. package/src/helpers/format-default.ts +72 -0
  255. package/src/helpers/format.ts +47 -0
  256. package/src/helpers/getTextContent.ts +20 -0
  257. package/src/helpers/host-component-names.tsx +67 -0
  258. package/src/helpers/matchers/__tests__/matchArrayValue.test.ts +34 -0
  259. package/src/helpers/matchers/__tests__/matchObject.test.ts +37 -0
  260. package/src/helpers/matchers/__tests__/matchStringValue.test.ts +15 -0
  261. package/src/helpers/matchers/accessibilityState.ts +48 -0
  262. package/src/helpers/matchers/accessibilityValue.ts +24 -0
  263. package/src/helpers/matchers/matchArrayProp.ts +21 -0
  264. package/src/helpers/matchers/matchLabelText.ts +51 -0
  265. package/src/helpers/matchers/matchObjectProp.ts +25 -0
  266. package/src/helpers/matchers/matchStringProp.ts +23 -0
  267. package/src/helpers/matchers/matchTextContent.ts +20 -0
  268. package/src/helpers/pointer-events.ts +27 -0
  269. package/src/helpers/query-name.ts +4 -0
  270. package/src/helpers/stringValidation.ts +36 -0
  271. package/src/helpers/timers.ts +98 -0
  272. package/src/index.ts +33 -0
  273. package/src/matches.ts +49 -0
  274. package/src/pure.ts +25 -0
  275. package/src/queries/__tests__/a11yState.test.tsx +439 -0
  276. package/src/queries/__tests__/a11yValue.test.tsx +309 -0
  277. package/src/queries/__tests__/displayValue.test.tsx +221 -0
  278. package/src/queries/__tests__/hintText.test.tsx +177 -0
  279. package/src/queries/__tests__/labelText.test.tsx +242 -0
  280. package/src/queries/__tests__/makeQueries.test.tsx +235 -0
  281. package/src/queries/__tests__/placeholderText.test.tsx +136 -0
  282. package/src/queries/__tests__/role-value.test.tsx +176 -0
  283. package/src/queries/__tests__/role.test.tsx +824 -0
  284. package/src/queries/__tests__/testId.test.tsx +200 -0
  285. package/src/queries/__tests__/text.test.tsx +556 -0
  286. package/src/queries/a11yState.ts +131 -0
  287. package/src/queries/a11yValue.ts +131 -0
  288. package/src/queries/displayValue.ts +78 -0
  289. package/src/queries/hintText.ts +112 -0
  290. package/src/queries/labelText.ts +59 -0
  291. package/src/queries/makeQueries.ts +255 -0
  292. package/src/queries/options.ts +14 -0
  293. package/src/queries/placeholderText.ts +79 -0
  294. package/src/queries/role.ts +132 -0
  295. package/src/queries/testId.ts +71 -0
  296. package/src/queries/text.ts +66 -0
  297. package/src/queries/unsafeProps.ts +76 -0
  298. package/src/queries/unsafeType.ts +73 -0
  299. package/src/react-versions.ts +11 -0
  300. package/src/render-act.ts +19 -0
  301. package/src/render.tsx +183 -0
  302. package/src/renderHook.tsx +56 -0
  303. package/src/screen.ts +123 -0
  304. package/src/shallow.ts +18 -0
  305. package/src/test-utils/events.ts +24 -0
  306. package/src/test-utils/index.ts +1 -0
  307. package/src/user-event/event-builder/common.ts +50 -0
  308. package/src/user-event/event-builder/index.ts +5 -0
  309. package/src/user-event/index.ts +14 -0
  310. package/src/user-event/press/__tests__/longPress.real-timers.test.tsx +115 -0
  311. package/src/user-event/press/__tests__/longPress.test.tsx +157 -0
  312. package/src/user-event/press/__tests__/press.real-timers.test.tsx +318 -0
  313. package/src/user-event/press/__tests__/press.test.tsx +422 -0
  314. package/src/user-event/press/constants.ts +7 -0
  315. package/src/user-event/press/index.ts +1 -0
  316. package/src/user-event/press/press.ts +134 -0
  317. package/src/user-event/press/utils/warnAboutRealTimers.ts +6 -0
  318. package/src/user-event/setup/index.ts +2 -0
  319. package/src/user-event/setup/setup.ts +93 -0
  320. package/src/user-event/type/__tests__/__snapshots__/type.test.tsx.snap +26 -0
  321. package/src/user-event/type/__tests__/type.test.tsx +63 -0
  322. package/src/user-event/type/index.ts +1 -0
  323. package/src/user-event/type/type.ts +20 -0
  324. package/src/user-event/utils/__tests__/wait.test.ts +63 -0
  325. package/src/user-event/utils/events.ts +54 -0
  326. package/src/user-event/utils/index.ts +2 -0
  327. package/src/user-event/utils/wait.ts +15 -0
  328. package/src/waitFor.ts +228 -0
  329. package/src/waitForElementToBeRemoved.ts +42 -0
  330. package/src/within.ts +30 -0
  331. package/tsconfig.json +17 -0
  332. package/tsconfig.release.json +8 -0
  333. package/website/.gitignore +20 -0
  334. package/website/README.md +33 -0
  335. package/website/docker/.dockerignore +3 -0
  336. package/website/docker/Dockerfile +9 -0
  337. package/website/docker/docker-compose.yml +11 -0
  338. package/website/docs/API.md +946 -0
  339. package/website/docs/EslintPLluginTestingLibrary.md +28 -0
  340. package/website/docs/FAQ.md +44 -0
  341. package/website/docs/GettingStarted.md +100 -0
  342. package/website/docs/HowShouldIQuery.md +21 -0
  343. package/website/docs/MigrationV11.md +64 -0
  344. package/website/docs/MigrationV12.md +67 -0
  345. package/website/docs/MigrationV2.md +126 -0
  346. package/website/docs/MigrationV7.md +119 -0
  347. package/website/docs/MigrationV9.md +67 -0
  348. package/website/docs/Queries.md +567 -0
  349. package/website/docs/ReactNavigation.md +371 -0
  350. package/website/docs/ReduxIntegration.md +137 -0
  351. package/website/docs/TestingEnvironment.md +154 -0
  352. package/website/docs/Troubleshooting.md +44 -0
  353. package/website/docs/UnderstandingAct.md +227 -0
  354. package/website/docs/UserEvent.md +66 -0
  355. package/website/docusaurus.config.js +114 -0
  356. package/website/package.json +31 -0
  357. package/website/sidebars.js +20 -0
  358. package/website/src/components/Feature.js +31 -0
  359. package/website/src/css/custom.css +13 -0
  360. package/website/src/css/index.module.css +77 -0
  361. package/website/src/pages/index.js +82 -0
  362. package/website/static/.nojekyll +0 -0
  363. package/website/static/css/custom.css +28 -0
  364. package/website/static/img/hit.png +0 -0
  365. package/website/static/img/locomotive.png +0 -0
  366. package/website/static/img/owl.png +0 -0
  367. package/website/static/img/tools.png +0 -0
  368. package/website/yarn.lock +7669 -0
  369. package/yarn.lock +7765 -0
  370. package/build/flushMicroTasks.d.ts +0 -5
  371. package/build/flushMicroTasks.js +0 -17
  372. package/build/flushMicroTasks.js.map +0 -1
@@ -0,0 +1,28 @@
1
+ ---
2
+ id: eslint-plugin-testing-library
3
+ title: ESLint Plugin Testing Library Compatibility
4
+ ---
5
+
6
+ Most of the rules of the [eslint-plugin-testing-library](https://github.com/testing-library/eslint-plugin-testing-library) are compatible with this library except the following:
7
+
8
+ - [prefer-user-event](https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-user-event.md): `userEvent` requires a DOM environment so it is not compatible with this library
9
+
10
+ Also, some rules have become useless, unless maybe you're using an old version of the library:
11
+
12
+ - [prefer-wait-for](https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/prefer-wait-for.md): the wait utility is no longer available
13
+
14
+ - [no-wait-for-empty-callback](https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-wait-for-empty-callback.md): waitFor callback param is no longer optional
15
+
16
+ To get the rule [consistent-data-testid](https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/consistent-data-testid.md) to work, you need to configure it to check the testID attribute by adding the following in your eslint config file, the `testIdPattern` being whichever pattern you want to enforce:
17
+
18
+ ```javascript
19
+ {
20
+ "testing-library/consistent-data-testid": [
21
+ 2,
22
+ {
23
+ "testIdAttribute": ["testID"],
24
+ "testIdPattern": "^TestId(__[A-Z]*)?$"
25
+ }
26
+ ]
27
+ }
28
+ ```
@@ -0,0 +1,44 @@
1
+ ---
2
+ id: faq
3
+ title: FAQ
4
+ ---
5
+
6
+ <details>
7
+ <summary>Can I test native features of React Native apps?</summary>
8
+
9
+ <p>Short answer: no.</p>
10
+
11
+ React Native Testing Library does not provide a full React Native runtime since that would require running on physical device
12
+ or iOS simulator/Android emulator to provision the underlying OS and platform APIs.
13
+
14
+ Instead of using React Native renderer, it simulates only the JavaScript part of its runtime by
15
+ using [React Test Renderer](https://reactjs.org/docs/test-renderer.html) while providing queries
16
+ and `fireEvent` APIs that mimick certain behaviors from the real runtime.
17
+
18
+ You can learn more about our testing environment [here](./TestingEnvironment.md).
19
+
20
+ This approach has certain benefits and shortfalls. On the positive side:
21
+
22
+ - it allows testing most of the logic of regular React Native apps
23
+ - it allows running test on any OS supported by Jest, or other test runner, e.g. on CI
24
+ - it uses much less resources than full runtime simulation
25
+ - you can use Jest fake timers
26
+
27
+ The the negative side:
28
+
29
+ - you cannot test native features
30
+ - certain JavaScript features might not be perfectly simulated, but we are working on it
31
+
32
+ For instance, [react-native's ScrollView](https://reactnative.dev/docs/scrollview) has several props that depend on native calls. While you can trigger `onScroll` call with `fireEvent.scroll`, `onMomentumScrollBegin` is called from the native side and will therefore not be called.
33
+
34
+ </details>
35
+
36
+ <details>
37
+ <summary>Should I use/migrate to `screen` queries?</summary>
38
+
39
+ There is no need to migrate existing test code to use `screen`-bases queries. You can still use
40
+ queries and other functions returned by `render`. In fact `screen` hold just that value, the latest `render` result.
41
+
42
+ For newer code you can either use `screen` or `render` result destructuring. However, there are some good reasons to use `screen`, which are described in [this article](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen) by Kent C. Dodds.
43
+
44
+ </details>
@@ -0,0 +1,100 @@
1
+ ---
2
+ id: getting-started
3
+ title: Getting Started
4
+ ---
5
+
6
+ ## The problem
7
+
8
+ You want to write maintainable tests for your React Native components. As a part of this goal, you want your tests to avoid including implementation details of your components and rather focus on making your tests give you the confidence for which they are intended. As part of this, you want your testbase to be maintainable in the long run so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.
9
+
10
+ ## This solution
11
+
12
+ The React Native Testing Library (RNTL) is a lightweight solution for testing React Native components. It provides light utility functions on top of `react-test-renderer`, in a way that encourages better testing practices. Its primary guiding principle is:
13
+
14
+ > The more your tests resemble the way your software is used, the more confidence they can give you.
15
+
16
+ This project is inspired by [React Testing Library](https://github.com/testing-library/react-testing-library). Tested to work with Jest, but it should work with other test runners as well.
17
+
18
+ You can find the source of `QuestionsBoard` component and this example [here](https://github.com/callstack/react-native-testing-library/blob/main/src/__tests__/questionsBoard.test.tsx).
19
+
20
+ ## Installation
21
+
22
+ Open a Terminal in your project's folder and run:
23
+
24
+ #### Using `yarn`
25
+
26
+ ```sh
27
+ yarn add --dev @testing-library/react-native
28
+ ```
29
+
30
+ #### Using `npm`
31
+
32
+ ```sh
33
+ npm install --save-dev @testing-library/react-native
34
+ ```
35
+
36
+ This library has a `peerDependencies` listing for `react-test-renderer`. Make sure that your `react-test-renderer` version matches exactly your `react` version.
37
+
38
+ :::info
39
+ In order to properly use helpers for async tests (`findBy` queries and `waitFor`) you need at least React >=16.9.0 (featuring async `act`) or React Native >=0.61 (which comes with React >=16.9.0).
40
+ :::
41
+
42
+ ### Additional Jest matchers
43
+
44
+ In order to use addtional React Native-specific jest matchers from [@testing-library/jest-native](https://github.com/testing-library/jest-native) package add it to your project:
45
+
46
+ #### Using `yarn`
47
+
48
+ ```sh
49
+ yarn add --dev @testing-library/jest-native
50
+ ```
51
+
52
+ #### Using `npm`
53
+
54
+ ```sh
55
+ npm install --save-dev @testing-library/jest-native
56
+ ```
57
+
58
+ Then automatically add it to your jest tests by using `setupFilesAfterEnv` option in your Jest configuration (it's usually located either in `package.json` under `"jest"` key or in a `jest.config.js` file):
59
+
60
+ ```json
61
+ {
62
+ "preset": "react-native",
63
+ "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"]
64
+ }
65
+ ```
66
+
67
+ ### Flow
68
+
69
+ Note for [Flow](https://flow.org) users – you'll also need to install typings for `react-test-renderer`:
70
+
71
+ ```sh
72
+ flow-typed install react-test-renderer
73
+ ```
74
+
75
+ ## Example
76
+
77
+ ```jsx
78
+ import { render, screen, fireEvent } from '@testing-library/react-native';
79
+ import { QuestionsBoard } from '../QuestionsBoard';
80
+
81
+ test('form submits two answers', () => {
82
+ const allQuestions = ['q1', 'q2'];
83
+ const mockFn = jest.fn();
84
+
85
+ render(<QuestionsBoard questions={allQuestions} onSubmit={mockFn} />);
86
+
87
+ const answerInputs = screen.getAllByLabelText('answer input');
88
+
89
+ fireEvent.changeText(answerInputs[0], 'a1');
90
+ fireEvent.changeText(answerInputs[1], 'a2');
91
+ fireEvent.press(screen.getByText('Submit'));
92
+
93
+ expect(mockFn).toBeCalledWith({
94
+ 1: { q: 'q1', a: 'a1' },
95
+ 2: { q: 'q2', a: 'a2' },
96
+ });
97
+ });
98
+ ```
99
+
100
+ You can find the source of `QuestionsBoard` component and this example [here](https://github.com/callstack/react-native-testing-library/blob/main/src/__tests__/questionsBoard.test.tsx).
@@ -0,0 +1,21 @@
1
+ ---
2
+ id: how-should-i-query
3
+ title: How Should I Query?
4
+ ---
5
+
6
+ ## Priority
7
+
8
+ Based on the [Guiding Principles](https://testing-library.com/docs/guiding-principles), your test should resemble how users interact with your code (component, page, etc.) as much as possible. With this in mind, we recommend this order of priority:
9
+
10
+ 1. **Queries Accessible to Everyone** queries that reflect the experience of visual users as well as those that use assistive technology
11
+ - [`getByText`](https://callstack.github.io/react-native-testing-library/docs/api-queries#bytext): This is the number 1 method a user finds any visible text on interactive and non-interactive elements.
12
+ - [`getByDisplayValue`](https://callstack.github.io/react-native-testing-library/docs/api-queries#bydisplayvalue): Useful for the current value of a `TextInput`.
13
+ - [`getByPlaceholderText`](https://callstack.github.io/react-native-testing-library/docs/api-queries#byplaceholdertext): Only useful for targeting a placeholder of a `TextInput`.
14
+ - [`getByLabelText`](https://callstack.github.io/react-native-testing-library/docs/api-queries#bylabeltext): This can be used to query every element that is exposed in the accessibility tree as a label, usually when there's no visible text.
15
+ - [`getByHintText`](https://callstack.github.io/react-native-testing-library/docs/api-queries#bya11yhint-byaccessibilityhint-byhinttext): This can be used to query every element that is exposed in the accessibility tree as a hint. Make sure it also has a label set.
16
+ - [`getByAccessibilityState`](https://callstack.github.io/react-native-testing-library/docs/api-queries#bya11ystate-byaccessibilitystate): This can be used to query every element that is exposed in the accessibility tree as a state of an interactive element, like a checkbox.
17
+ - [`getByAccessibilityValue`](https://callstack.github.io/react-native-testing-library/docs/api-queries#bya11value-byaccessibilityvalue): This can be used to query every element that is exposed in the accessibility tree as a value on a range, like a slider.
18
+ 2. **Queries Users Can Infer**
19
+ - [`getByRole`](https://callstack.github.io/react-native-testing-library/docs/api-queries#byrole): This can be used to query every element that is exposed in the accessibility tree as a role, like buttons or images.
20
+ 3. **Test IDs**
21
+ - [`getByTestId`](https://callstack.github.io/react-native-testing-library/docs/api-queries#bytestid): The user cannot see (or hear) these, so this is only recommended for cases where you can't match by text or it doesn't make sense
@@ -0,0 +1,64 @@
1
+ ---
2
+ id: migration-v11
3
+ title: Migration to 11.0
4
+ ---
5
+
6
+ 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.
7
+
8
+ # Breaking changes
9
+
10
+ ## Update to Jest 28 if you use fake timers
11
+
12
+ If you use fake timers in any of your tests you should update your Jest dependencies to version 28. This is due to the fact that [`jest.useFakeTimers()` config structure](https://jestjs.io/docs/jest-object#jestusefaketimersfaketimersconfig) has changed.
13
+
14
+ ## Refactor legacy `waitForOptions` position
15
+
16
+ In version 9 we introducted query `options` parameters for each query type. This affected all `findBy` and `findAllBy` queries because their signatures changed e.g. from:
17
+
18
+ ```ts
19
+ function findByText(text: TextMatch, waitForOptions?: WaitForOptions)
20
+ function findAllByText(text: TextMatch, waitForOptions?: WaitForOptions)
21
+ ```
22
+
23
+ to
24
+
25
+ ```ts
26
+ function findByText(text: TextMatch, options?: TextMatchOptions, waitForOptions?: WaitForOptions)
27
+ function findAllByText(text: TextMatch, options?: TextMatchOptions, waitForOptions?: WaitForOptions)
28
+ ```
29
+
30
+ In order to facilitate transition, in version 9 and 10, we provided a temporary possibility to pass `WaitForOptions` like `timeout`, `interval`, etc inside `options` argument. From this release we require passing these as the proper third parameter.
31
+
32
+ This change is easy to implement:
33
+
34
+ ```ts
35
+ findByText(/Text/, { timeout: 1000 })
36
+ ```
37
+
38
+ should become
39
+
40
+ ```ts
41
+ findByText(/Text/, {}, { timeout: 1000 })
42
+ ```
43
+
44
+ ## Triggering non-touch events on targets with `pointerEvents="box-none"` prop
45
+
46
+ Up to version 10, RNTL disables all events for a target with `pointerEvents="box-none"`. This behavior is counter to how React Native itself functions.
47
+
48
+ From version 11, RNTL continues to disable `press` event for these targets but allows triggering other events, e.g. `layout`.
49
+
50
+ # All changes
51
+
52
+ * chore(breaking): update Jest to 28 by @mdjastrzebski in https://github.com/callstack/react-native-testing-library/pull/1008
53
+ * refactor(breaking): remove legacy wait for options support by @mdjastrzebski in https://github.com/callstack/react-native-testing-library/pull/1018
54
+ * refactor(breaking): remove `byA11yStates` queries by @mdjastrzebski in https://github.com/callstack/react-native-testing-library/pull/1015
55
+ * chore: update react-native to 0.69.1 by @mdjastrzebski in https://github.com/callstack/react-native-testing-library/pull/1010
56
+ * chore: update deps @types for react/react-native by @mdjastrzebski in https://github.com/callstack/react-native-testing-library/pull/1013
57
+ * feat: Trigger non-touch events on box-none targets by @dcalhoun in https://github.com/callstack/react-native-testing-library/pull/906
58
+ * docs: create document describing act function and related errors by @mdjastrzebski in https://github.com/callstack/react-native-testing-library/pull/969
59
+ * chore: Organise a11y queries by predicate by @MattAgn in https://github.com/callstack/react-native-testing-library/pull/977
60
+ * chore: reenable skipped byText tests by @mdjastrzebski in https://github.com/callstack/react-native-testing-library/pull/1017
61
+
62
+ # Full Changelog
63
+ https://github.com/callstack/react-native-testing-library/compare/v10.1.1...v11.0.0
64
+
@@ -0,0 +1,67 @@
1
+ ---
2
+ id: migration-v12
3
+ title: Migration to 12.0
4
+ ---
5
+
6
+ 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](https://blog.codinghorror.com/falling-into-the-pit-of-success/) when writing meaningful tests. You will find migration instructions for each and every change described below.
7
+
8
+ :::note
9
+ If you use [Jest Native matchers](https://github.com/testing-library/jest-native), which we recommend, then you should upgrade it to version 5.4.2 or higher.
10
+ :::
11
+
12
+ # Breaking changes
13
+
14
+ ## 1. All queries exclude elements hidden from accessibility by default
15
+ Elements that are hidden from accessiblity, e.g. elements on non-active screen when using React Navigation, now will not be matched by default by all queries. This is the effect of switching the default value for global config option `defaultIncludeHiddenElements`(api#defaultincludehiddenelements-option) to `false`.
16
+
17
+ Previous behaviour of matching hidden elements can be enabled on query level using [includeHiddenElements](api-queries#includehiddenelements-option) query options or globally using `defaultIncludeHiddenElements`(api#defaultincludehiddenelements-option) configuration option.
18
+
19
+ ## 2. `*ByRole` queries now return only accessibility elements
20
+ `*ByRole` queries now return only accessibility elements, either explicitly marked with `accessible` prop or implicit ones where this status is derived from component type itself (e.g `Text`, `TextInput`, `Switch`, but not `View`).
21
+
22
+ You may need to adjust relevant components under test to make sure they pass `isAccessibilityElement` check.
23
+
24
+ ### Examples
25
+ Let's assume we are using `getByRole("button")` query.
26
+
27
+ Following elements will match:
28
+
29
+ ```ts
30
+ // Explicit "accessible" prop for View
31
+ <View accessible accessibilityRole="button" />
32
+
33
+ // No need to "accessible" prop for Text, as it is implicitly accessible element.
34
+ <Text accessibilityRole="button">Button</Text>
35
+ ```
36
+
37
+ While following elements will not match:
38
+
39
+ ```ts
40
+ // Missing "accessible" prop for View
41
+ <View accessibilityRole="button" />
42
+
43
+ // Explicit "accessible={false}" prop for View
44
+ <View accessible={false} accessibilityRole="button" />
45
+
46
+ // Explicit "accessible={false}" for Text, which is implicitly accessible element
47
+ <Text accessible={false} accessibilityRole="button">Button</Text>
48
+ ```
49
+
50
+ ## 3. `*ByText`, `*ByDisplayValue`, `*ByPlaceholderText` queries now return host elements
51
+ `*ByText`, `*ByDisplayValue`, `*ByPlaceholderText` queries now return [host elements](testing-env#host-and-composite-components), which is consistent with other queries.
52
+
53
+ While potentially breaking, this should not cause issues in tests if you are using recommended queries and Jest Matchers from Jest Native package.
54
+
55
+ Problematic cases may include: directly checking some prop values (without using Jest Native matchers), referencing other nodes using `parent` or `children` props, examining `type` property of `ReactTestInstance`, etc.
56
+
57
+ ## 4. `container` API has been renamed to `UNSAFE_root`.
58
+
59
+ Historically `container` was supposed to mimic the [RTL's container](https://testing-library.com/docs/react-testing-library/api/#container). However it turned out not so relevant in RNTL's environment, where we actually used it to return React Test Renderer's root instance.
60
+
61
+ RNTL v12 introduces `root` API as an alternative that returns a root **host** element. The difference between `root` and `UNSAFE_root` properties is that that `root` will always represents a host element, while `UNSAFE_root` will typically represent a composite element.
62
+
63
+ If you use `toBeOnTheScreen` matcher from [@testing-library/jest-native](https://github.com/testing-library/jest-native) your tests will fail because it uses the `container` api. To fix this, update `@testing-library/jest-native` to version 5.4.2.
64
+
65
+ # Full Changelog
66
+ https://github.com/callstack/react-native-testing-library/compare/v11.5.2...v11.5.2...v12.0.0-rc.0
67
+
@@ -0,0 +1,126 @@
1
+ ---
2
+ id: migration-v2
3
+ title: Migration to 2.0
4
+ ---
5
+
6
+ This guide describes steps necessary to migrate from React Native Testing Library `v1.x` to `v2.0`.
7
+
8
+ ## Dropping Node 8
9
+
10
+ Node 8 reached its EOL more than 5 months ago, so it's about time to target the library to Node 10. If you used lower version, you'll have to upgrade to v10, but we recommend using the latest LTS version.
11
+
12
+ ## Auto Cleanup
13
+
14
+ `cleanup()` function is now called automatically after every test if your testing framework supports `afterEach` hook (like Jest, Mocha, and Jasmine).
15
+
16
+ You should be able to remove all `afterEach(cleanup)` calls in your code.
17
+
18
+ This change might break your code, if you tests are not isolated, i.e. you call `render` outside `test` block. Generally, you should [keep your tests isolated](https://kentcdodds.com/blog/test-isolation-with-react). But if you can't or don't want to do this right away you can prevent this behavior using any of the following ways:
19
+
20
+ - by importing `'react-native-testing-library/pure'` instead of `'react-native-testing-library'`
21
+ - by importing `'react-native-testing-library/dont-cleanup-after-each'` before importing `'react-native-testing-library'`. You can do it in a global way by using Jest's `setupFiles` like this:
22
+
23
+ ```json
24
+ {
25
+ "setupFiles": ["react-native-testing-library/dont-cleanup-after-each"];
26
+ }
27
+ ```
28
+
29
+ - by setting `RNTL_SKIP_AUTO_CLEANUP` env variable to `true`. You can do this with `cross-evn` like this:
30
+
31
+ ```sh
32
+ cross-env RNTL_SKIP_AUTO_CLEANUP=true jest
33
+ ```
34
+
35
+ ## WaitFor API changes
36
+
37
+ We renamed `waitForElement` function to `waitFor` for consistency with React Testing Library. Additionally, the signature has slightly changed from:
38
+
39
+ ```jsx
40
+ export default function waitForElement<T>(
41
+ expectation: () => T,
42
+ timeout?: number,
43
+ interval?: number
44
+ ): Promise<T> {}
45
+ ```
46
+
47
+ to:
48
+
49
+ ```jsx
50
+ export default function waitFor<T>(
51
+ expectation: () => T,
52
+ options: {
53
+ timeout?: number,
54
+ interval?: number,
55
+ }
56
+ ): Promise<T> {}
57
+ ```
58
+
59
+ Both changes should improve code readibility.
60
+
61
+ `waitFor` calls (and hence also `findBy` queries) are now wrapped in `act` by default, so that you should no longer need to use `act` directly in your tests.
62
+
63
+ :::tip
64
+ You can usually avoid `waitFor` by a proper use of `findBy` asynchronous queries. It will result in more streamlined testing experience.
65
+ :::
66
+
67
+ ## Removed global `debug` function
68
+
69
+ The `debug()` method returned from `render()` function is all you need. We removed the global export to avoid confusion.
70
+
71
+ ## Removed global `shallow` function
72
+
73
+ Shallow rendering React component is usually not a good idea, so we decided to remove the API. But, if you find it useful or need to support legacy tests, feel free to use this implementation:
74
+
75
+ ```js
76
+ import ShallowRenderer from 'react-test-renderer/shallow';
77
+
78
+ export function shallow(instance: ReactTestInstance | React.Element<any>) {
79
+ const renderer = new ShallowRenderer();
80
+ renderer.render(React.createElement(instance.type, instance.props));
81
+
82
+ return { output: renderer.getRenderOutput() };
83
+ }
84
+ ```
85
+
86
+ ## Removed functions
87
+
88
+ Following query functions have been removed after being deprecated for more than a year now:
89
+
90
+ - `getByName`
91
+ - `getAllByName`
92
+ - `queryByName`
93
+ - `queryAllByName`
94
+
95
+ The `*ByType` and `*ByProps` queries has been prefixed with `UNSAFE_`. These `UNSAFE_` functions are not planned for removal in future versions but their usage is discouraged. You can rename them using global search/replace in your project:
96
+
97
+ - `getByType` -> `UNSAFE_getByType`
98
+ - `getAllByType` -> `UNSAFE_getAllByType`
99
+ - `queryByType` -> `UNSAFE_queryByType`
100
+ - `queryAllByType` -> `UNSAFE_queryAllByType`
101
+ - `getByProps` -> `UNSAFE_getByProps`
102
+ - `getAllByProps` -> `UNSAFE_getAllByProps`
103
+ - `queryByProps` -> `UNSAFE_queryByProps`
104
+ - `queryAllByProps` -> `UNSAFE_queryAllByProps`
105
+
106
+ ## Some `ByTestId` queries behavior changes
107
+
108
+ In version `1.x` the `getByTestId` and `queryByTestId` queries could return non-native instances. This was a serious bug. Other query functions like `getAllByTestId`, `queryAllByTestId`, `findByTestId` and `findAllByTestId` didn't have this issue. These correctly returned only native components instances (e.g. `View`, `Text`, etc) that got the `testID`.
109
+
110
+ In v2 we fixed this inconsistency, which may result in failing tests, if you relied on this behavior. There are few ways to handle these failures:
111
+
112
+ - pass the `testID` prop down so it can reach a native component, like `View` or `Text`
113
+ - replace `testID` with proper `accessibilityHint` or `accessibilityLabel` if it benefits the user
114
+ - use safe queries like `*ByText` or `*ByA11yHint`
115
+
116
+ ## Deprecated `flushMicrotasksQueue`
117
+
118
+ We have deprecated `flushMicrotasksQueue` and plan to remove it in the next major. We have better alternatives available for helping you write async tests – `findBy` async queries and `waitFor` helper.
119
+
120
+ If you can't or don't want to migrate your tests, don't worry. You can use the same implementation we have today:
121
+
122
+ ```js
123
+ function flushMicrotasksQueue() {
124
+ return new Promise((resolve) => setImmediate(resolve));
125
+ }
126
+ ```
@@ -0,0 +1,119 @@
1
+ ---
2
+ id: migration-v7
3
+ title: Migration to 7.0
4
+ ---
5
+
6
+ :::caution
7
+ We renamed the `react-native-testing-library` npm package to `@testing-library/react-native`, officially joining the "Testing Library" family 🎉.
8
+ :::
9
+
10
+ As the version 7.0 involves merging two libraries together, there are two variants for migration guide, dependent on library you used previously:
11
+
12
+ - [Guide for `react-native-testing-library` users](#guide-for-react-native-testing-library-users)
13
+ - [Guide for `@testing-library/react-native` users](#guide-for-testing-libraryreact-native-users)
14
+
15
+ # Guide for `react-native-testing-library` users
16
+
17
+ This guide describes steps necessary to migrate from React Native Testing Library `v2.x` or `v6.0` to `v7.0`.
18
+
19
+ ## Renaming the library
20
+
21
+ 1. Install `@testing-library/react-native`.
22
+ 1. Uninstall `react-native-testing-library`.
23
+ 1. Rename all references of `react-native-testing-library` to `@testing-library/react-native`.
24
+
25
+ You may have noticed a strange v2 to v7 upgrade, skipping versions 3, 4, 5 and 6. This is because we renamed the `react-native-testing-library` npm package to `@testing-library/react-native`, officially joining the "Testing Library" family 🎉. We're merging existing two libraries into a single one. The [native-testing-library](https://github.com/testing-library/native-testing-library) repository, which had v6, will soon be archived and using `@testing-library/react-native` below v7, sourced from mentioned repository, is deprecated.
26
+
27
+ For branding purposes we keep the "React Native Testing Library" name, similar to "React Testing Library". Only the npm published package is changing. The code repository also stays the same under Callstack governance.
28
+
29
+ ## New aliases
30
+
31
+ To improve compatibility with React Testing Library, and ease the migration for `@testing-library/react-native` users using version below v7, we've introduced new aliases to our accessibility queries:
32
+
33
+ - `ByLabelText` aliasing `ByA11yLabel` queries
34
+ - `ByHintText` aliasing `ByA11yHint` queries
35
+ - `ByRole` aliasing `ByA11yRole` queries
36
+
37
+ We like the new names and consider removing the aliases in future releases.
38
+
39
+ ## Renaming `ByPlaceholder` queries
40
+
41
+ To improve compatibility with React Testing Library, and to ease the migration for `@testing-library/react-native` users using version below v7, we've renamed following queries:
42
+
43
+ - `ByPlaceholder` -> `ByPlaceholderText`
44
+
45
+ Please replace all occurrences of these queries in your codebase.
46
+
47
+ ## `fireEvent` support for disabled components
48
+
49
+ To improve compatibility with the real React Native environment `fireEvent` now performs checks whether the component is "disabled" before firing an event on it. It uses the Responder system to establish should the event fire, which resembles the actual React Native runtime closer than we used to.
50
+
51
+ If your code contained any workarounds for preventing events firing on disabled events, you should now be able to remove them.
52
+
53
+ # Guide for `@testing-library/react-native` users
54
+
55
+ This guide describes steps necessary to migrate from `@testing-library/react-native` from `v6.0` to `v7.0`. Although the name stays the same, this is a different library, sourced at [Callstack GitHub repository](https://github.com/callstack/react-native-testing-library). We made sure the upgrade path is as easy for you as possible.
56
+
57
+ ## Renaming "wait" helpers
58
+
59
+ The `wait` and `waitForElement` helpers are replaced by `waitFor`. Please rename all occurrences of these in your codebase.
60
+
61
+ ## Changes to `ByTestId` queries
62
+
63
+ The `ByTestId` queries don't accept RegExps. Please use strings instead. We're happy to accept PRs adding this functionality :).
64
+
65
+ ## No `ByTitle` queries
66
+
67
+ Our library doesn't implement `ByTitle` queries, which are targetting components with `title` prop, specifically `Button` and `RefreshControl`. If your tests only use `ByTitle` to target `Button` components, you can replace them with `ByText` queries, since React Native renders `Text` under the hood.
68
+
69
+ If you need to query `RefreshControl` component and can't figure out other way around it, you can use e.g. `UNSAFE_getByProps({title})` query.
70
+
71
+ ## No custom Jest configuration
72
+
73
+ Use the official React Native preset for Jest:
74
+
75
+ ```diff
76
+ {
77
+ "jest": {
78
+ - "preset": "@testing-library/react-native"
79
+ + "preset": "react-native"
80
+ }
81
+ }
82
+ ```
83
+
84
+ We're told this also speeds up your tests startup on cold cache. Using official preset has another benefit – the library is compatible with any version of React Native without introducing breaking changes.
85
+
86
+ ## Cleanup is included by default
87
+
88
+ Cleaning up (unmounting) components after each test is included by default in the same manner as in React Testing Library. Please remove this setup file from Jest config:
89
+
90
+ ```diff
91
+ {
92
+ "jest": {
93
+ - "setupFilesAfterEnv": ["@testing-library/react-native/cleanup-after-each"]
94
+ }
95
+ }
96
+ ```
97
+
98
+ You can opt-out of this behavior by running tests with `RNTL_SKIP_AUTO_CLEANUP=true` flag or importing from `@testing-library/react-native/pure`. We encourage you to keep the default though.
99
+
100
+ ## No [NativeTestInstance](https://www.native-testing-library.com/docs/api-test-instance) abstraction
101
+
102
+ We don't provide any abstraction over `ReactTestInstance` returned by queries, but allow to use it directly to access queried component's `props` or `type` for that example.
103
+
104
+ ## No `container` nor `baseElement` returned from `render`
105
+
106
+ There's no `container` returned from the `render` function. If you must, use `react-test-renderer` directly, although we advise against doing so. We also don't implement `baseElement` because of that, since there's no `document.documentElement` nor `container`.
107
+
108
+ ## Firing events changes
109
+
110
+ There are slight differences in how `fireEvent` works in both libraries:
111
+
112
+ 1. Our library doesn't perform validation checks for events fired upon tested components.
113
+ 1. Signature is different:
114
+ ```diff
115
+ -fireEvent[eventName](node: FiberRoot, eventProperties: NativeTestEvent)
116
+ +fireEvent(element: ReactTestInstance, eventName: string, ...data: Array<any>)
117
+ ```
118
+ 1. There is no `NativeTestEvent` - second and rest arguments are used instead.
119
+ 1. There are only 3 short-hand events: [`fireEvent.press`](api/#fireeventpress-element-reacttestinstance--void), [`fireEvent.changeText`](api/#fireeventchangetext-element-reacttestinstance-data-arrayany--void) and [`fireEvent.scroll`](api/#fireeventscroll-element-reacttestinstance-data-arrayany--void). For all other or custom events you can use the base signature.
@@ -0,0 +1,67 @@
1
+ ---
2
+ id: migration-v9
3
+ title: Migration to 9.0
4
+ ---
5
+
6
+ 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.
7
+
8
+ ## Support for text match options a.k.a string precision API
9
+
10
+ This is a backward compatible change.
11
+
12
+ When querying text, it is now possible to pass a [`TextMatch`](https://callstack.github.io/react-native-testing-library/docs/api-queries/#textmatch) to most text based queries, which lets you configure how `@testing-library/react-native` should match your text. For instance, passing `exact: false` will allow matching substrings and will ignore case:
13
+
14
+ ```jsx
15
+ const { getByText } = render(<Text>Hello World</Text>);
16
+
17
+ getByText('Hello World'); // Matches
18
+ getByText('Hello'); // Doesn't match
19
+ getByText('hello', { exact: false }); // ignore case-sensitivity and does partial matching
20
+ ```
21
+
22
+ Please note that the `findBy*` queries used to take a `waitForOptions` parameter as a second argument, which has now been moved to the third argument:
23
+
24
+ ```diff
25
+ -findByText('Hello world', { timeout: 3000 }); // old findBy* API
26
+ +findByText('Hello world', {}, { timeout: 3000 }); // new findBy* API
27
+ ```
28
+
29
+ For backward compatibility RNTL v9 can still read `waitForOptions` from the second argument but will print a deprecation warning.
30
+
31
+ ## Reverted matching text across several nodes
32
+
33
+ :::caution
34
+ This is a breaking change.
35
+ :::
36
+
37
+ In v1.14 we've introduced a feature allowing to match text when it's spread across several nodes:
38
+
39
+ ```tsx
40
+ const { getByText } = render(
41
+ <Text>
42
+ Hello <Text>world</Text>
43
+ </Text>
44
+ );
45
+ getByText('Hello world'); // matches
46
+ ```
47
+
48
+ However this behavior was different than the web one, and wouldn't always be straightforward to reason about. For instance it could match text nodes far from each other on the screen. It also prevented us from implementing the string precision API. From v9, this type of match will not work.
49
+
50
+ A work around is to use `within`:
51
+
52
+ ```tsx
53
+ import {Text} from 'react-native'
54
+ import {render, within} from '@testing-library/react-native'
55
+
56
+ const {getByText} = render(<Text>Hello <Text>world</Text</Text>)
57
+
58
+ within(getByText('Hello', {exact: false})).getByText('world')
59
+ ```
60
+
61
+ ## Future plans
62
+
63
+ This release changes a lot of internal logic in the library, paving the way for more improvements to bring us closer to our web counterpart, with a possibly better story for accessibility queries.
64
+
65
+ We're also [migrating the codebase to TypeScript](https://github.com/callstack/react-native-testing-library/issues/877). Please let us know if you're interested in helping us with this effort.
66
+
67
+ Stay safe!