@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.
- package/.DS_Store +0 -0
- package/.codecov.yml +9 -0
- package/.eslintcache +1 -0
- package/.eslintignore +2 -0
- package/.eslintrc +19 -0
- package/.flowconfig +63 -0
- package/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
- package/.github/ISSUE_TEMPLATE/feature_request.md +14 -0
- package/.github/ISSUE_TEMPLATE/question.md +9 -0
- package/.github/PULL_REQUEST_TEMPLATE.md +10 -0
- package/.github/actions/setup-deps/action.yml +22 -0
- package/.github/actions/setup-website-deps/action.yml +22 -0
- package/.github/dependabot.yml +10 -0
- package/.github/workflows/deploy-website.yml +36 -0
- package/.github/workflows/example-apps.yml +25 -0
- package/.github/workflows/main.yml +103 -0
- package/.gitignore +11 -0
- package/.prettierrc.js +5 -0
- package/CODE_OF_CONDUCT.md +73 -0
- package/CONTRIBUTING.md +64 -0
- package/README.md +8 -7
- package/babel.config.js +22 -0
- package/build/act.js.map +1 -1
- package/build/cleanup.js.map +1 -1
- package/build/config.d.ts +1 -0
- package/build/config.js.map +1 -1
- package/build/fireEvent.d.ts +13 -5
- package/build/fireEvent.js +57 -48
- package/build/fireEvent.js.map +1 -1
- package/build/flush-micro-tasks.d.ts +19 -0
- package/build/flush-micro-tasks.js +36 -0
- package/build/flush-micro-tasks.js.map +1 -0
- package/build/helpers/accessiblity.js +3 -1
- package/build/helpers/accessiblity.js.map +1 -1
- package/build/helpers/component-tree.d.ts +0 -15
- package/build/helpers/component-tree.js +0 -45
- package/build/helpers/component-tree.js.map +1 -1
- package/build/helpers/deprecation.d.ts +1 -0
- package/build/helpers/deprecation.js +16 -0
- package/build/helpers/deprecation.js.map +1 -1
- package/build/helpers/errors.d.ts +0 -4
- package/build/helpers/errors.js +1 -25
- package/build/helpers/errors.js.map +1 -1
- package/build/helpers/findAll.js.map +1 -1
- package/build/helpers/format-default.js.map +1 -1
- package/build/helpers/format.js.map +1 -1
- package/build/helpers/host-component-names.js +4 -1
- package/build/helpers/host-component-names.js.map +1 -1
- package/build/helpers/matchers/matchLabelText.js.map +1 -1
- package/build/helpers/pointer-events.d.ts +9 -0
- package/build/helpers/pointer-events.js +25 -0
- package/build/helpers/pointer-events.js.map +1 -0
- package/build/helpers/stringValidation.js.map +1 -1
- package/build/helpers/timers.js.map +1 -1
- package/build/index.js +2 -2
- package/build/index.js.map +1 -1
- package/build/matches.js.map +1 -1
- package/build/pure.d.ts +1 -1
- package/build/pure.js.map +1 -1
- package/build/queries/a11yState.js.map +1 -1
- package/build/queries/a11yValue.js.map +1 -1
- package/build/queries/displayValue.js.map +1 -1
- package/build/queries/hintText.js.map +1 -1
- package/build/queries/labelText.js.map +1 -1
- package/build/queries/makeQueries.js.map +1 -1
- package/build/queries/placeholderText.js.map +1 -1
- package/build/queries/role.js.map +1 -1
- package/build/queries/testId.js.map +1 -1
- package/build/queries/text.js.map +1 -1
- package/build/queries/unsafeProps.js.map +1 -1
- package/build/render.d.ts +171 -12
- package/build/render.js +11 -4
- package/build/render.js.map +1 -1
- package/build/renderHook.d.ts +3 -6
- package/build/renderHook.js +4 -3
- package/build/renderHook.js.map +1 -1
- package/build/shallow.js.map +1 -1
- package/build/test-utils/events.d.ts +10 -0
- package/build/test-utils/events.js +27 -0
- package/build/test-utils/events.js.map +1 -0
- package/build/test-utils/index.d.ts +1 -0
- package/build/test-utils/index.js +17 -0
- package/build/test-utils/index.js.map +1 -0
- package/build/user-event/event-builder/common.d.ts +45 -0
- package/build/user-event/event-builder/common.js +58 -0
- package/build/user-event/event-builder/common.js.map +1 -0
- package/build/user-event/event-builder/index.d.ts +32 -0
- package/build/user-event/event-builder/index.js +12 -0
- package/build/user-event/event-builder/index.js.map +1 -0
- package/build/user-event/index.d.ts +9 -0
- package/build/user-event/index.js +16 -0
- package/build/user-event/index.js.map +1 -0
- package/build/user-event/press/constants.d.ts +2 -0
- package/build/user-event/press/constants.js +16 -0
- package/build/user-event/press/constants.js.map +1 -0
- package/build/user-event/press/index.d.ts +1 -0
- package/build/user-event/press/index.js +19 -0
- package/build/user-event/press/index.js.map +1 -0
- package/build/user-event/press/press.d.ts +7 -0
- package/build/user-event/press/press.js +106 -0
- package/build/user-event/press/press.js.map +1 -0
- package/build/user-event/press/utils/warnAboutRealTimers.d.ts +1 -0
- package/build/user-event/press/utils/warnAboutRealTimers.js +14 -0
- package/build/user-event/press/utils/warnAboutRealTimers.js.map +1 -0
- package/build/user-event/setup/index.d.ts +2 -0
- package/build/user-event/setup/index.js +13 -0
- package/build/user-event/setup/index.js.map +1 -0
- package/build/user-event/setup/setup.d.ts +39 -0
- package/build/user-event/setup/setup.js +56 -0
- package/build/user-event/setup/setup.js.map +1 -0
- package/build/user-event/type/index.d.ts +1 -0
- package/build/user-event/type/index.js +13 -0
- package/build/user-event/type/index.js.map +1 -0
- package/build/user-event/type/type.d.ts +3 -0
- package/build/user-event/type/type.js +18 -0
- package/build/user-event/type/type.js.map +1 -0
- package/build/user-event/utils/events.d.ts +9 -0
- package/build/user-event/utils/events.js +44 -0
- package/build/user-event/utils/events.js.map +1 -0
- package/build/user-event/utils/index.d.ts +2 -0
- package/build/user-event/utils/index.js +28 -0
- package/build/user-event/utils/index.js.map +1 -0
- package/build/user-event/utils/wait.d.ts +2 -0
- package/build/user-event/utils/wait.js +14 -0
- package/build/user-event/utils/wait.js.map +1 -0
- package/build/waitFor.js +3 -3
- package/build/waitFor.js.map +1 -1
- package/build/waitForElementToBeRemoved.js.map +1 -1
- package/examples/basic/.expo-shared/assets.json +4 -0
- package/examples/basic/.gitignore +14 -0
- package/examples/basic/App.tsx +20 -0
- package/examples/basic/README.md +11 -0
- package/examples/basic/__tests__/App.test.tsx +119 -0
- package/examples/basic/app.json +31 -0
- package/examples/basic/assets/adaptive-icon.png +0 -0
- package/examples/basic/assets/favicon.png +0 -0
- package/examples/basic/assets/icon.png +0 -0
- package/examples/basic/assets/splash.png +0 -0
- package/examples/basic/babel.config.js +6 -0
- package/examples/basic/components/Home.tsx +28 -0
- package/examples/basic/components/LoginForm.tsx +138 -0
- package/examples/basic/jest-setup.ts +7 -0
- package/examples/basic/jest.config.js +5 -0
- package/examples/basic/package.json +30 -0
- package/examples/basic/tsconfig.json +7 -0
- package/examples/react-navigation/README.md +14 -0
- package/examples/react-navigation/babel.config.js +4 -0
- package/examples/react-navigation/jest-setup.js +11 -0
- package/examples/react-navigation/jest.config.js +10 -0
- package/examples/react-navigation/package.json +31 -0
- package/examples/react-navigation/src/App.js +21 -0
- package/examples/react-navigation/src/DrawerNavigator.js +15 -0
- package/examples/react-navigation/src/DrawerNavigator.test.js +42 -0
- package/examples/react-navigation/src/NativeStackNavigator.js +15 -0
- package/examples/react-navigation/src/NativeStackNavigator.test.js +34 -0
- package/examples/react-navigation/src/StackNavigator.js +15 -0
- package/examples/react-navigation/src/StackNavigator.test.js +34 -0
- package/examples/react-navigation/src/TabNavigator.js +15 -0
- package/examples/react-navigation/src/TabNavigator.test.js +21 -0
- package/examples/react-navigation/src/screens/DetailsScreen.js +43 -0
- package/examples/react-navigation/src/screens/DetailsScreen.test.js +27 -0
- package/examples/react-navigation/src/screens/DrawerHomeScreen.js +26 -0
- package/examples/react-navigation/src/screens/HomeScreen.js +48 -0
- package/examples/react-navigation/src/screens/SettingsScreen.js +20 -0
- package/examples/react-navigation/src/test-utils.js +12 -0
- package/examples/redux/App.js +27 -0
- package/examples/redux/actions/todoActions.js +25 -0
- package/examples/redux/babel.config.js +6 -0
- package/examples/redux/components/AddTodo.js +73 -0
- package/examples/redux/components/AddTodo.test.js +27 -0
- package/examples/redux/components/TodoElem.js +25 -0
- package/examples/redux/components/TodoList.js +29 -0
- package/examples/redux/components/TodoList.test.js +34 -0
- package/examples/redux/index.js +8 -0
- package/examples/redux/jest-setup.js +2 -0
- package/examples/redux/jest.config.js +4 -0
- package/examples/redux/package.json +23 -0
- package/examples/redux/reducers/index.js +6 -0
- package/examples/redux/reducers/todoReducer.js +27 -0
- package/examples/redux/store.js +10 -0
- package/examples/redux/test-utils.js +11 -0
- package/experiments-app/.expo/README.md +15 -0
- package/experiments-app/.expo/devices.json +3 -0
- package/experiments-app/.expo/packager-info.json +9 -0
- package/experiments-app/.expo/settings.json +9 -0
- package/experiments-app/.gitignore +17 -0
- package/experiments-app/.prettierrc.js +5 -0
- package/experiments-app/app.json +30 -0
- package/experiments-app/assets/adaptive-icon.png +0 -0
- package/experiments-app/assets/favicon.png +0 -0
- package/experiments-app/assets/icon.png +0 -0
- package/experiments-app/assets/splash.png +0 -0
- package/experiments-app/babel.config.js +6 -0
- package/experiments-app/index.js +4 -0
- package/experiments-app/package.json +31 -0
- package/experiments-app/src/App.tsx +31 -0
- package/experiments-app/src/MainScreen.tsx +51 -0
- package/experiments-app/src/experiments.ts +17 -0
- package/experiments-app/src/screens/TextInputEventPropagation.tsx +54 -0
- package/experiments-app/src/screens/TextInputEvents.tsx +50 -0
- package/experiments-app/src/utils/helpers.ts +8 -0
- package/experiments-app/tsconfig.json +6 -0
- package/experiments-app/yarn.lock +6913 -0
- package/flow-typed/npm/jest_v26.x.x.js +1218 -0
- package/flow-typed/npm/react-test-renderer_v16.x.x.js +81 -0
- package/jest-setup.ts +10 -0
- package/package.json +6 -6
- package/renovate.json +19 -0
- package/scripts/test_react_17 +12 -0
- package/src/__tests__/__snapshots__/render-debug.test.tsx.snap +548 -0
- package/src/__tests__/__snapshots__/render.test.tsx.snap +39 -0
- package/src/__tests__/act.test.tsx +52 -0
- package/src/__tests__/auto-cleanup-skip.test.tsx +39 -0
- package/src/__tests__/auto-cleanup.test.tsx +50 -0
- package/src/__tests__/cleanup.test.tsx +26 -0
- package/src/__tests__/config.test.ts +55 -0
- package/src/__tests__/fireEvent-textInput.test.tsx +154 -0
- package/src/__tests__/fireEvent.test.tsx +485 -0
- package/src/__tests__/host-component-names.test.tsx +109 -0
- package/src/__tests__/host-text-nesting.test.tsx +90 -0
- package/src/__tests__/jest-native.test.tsx +84 -0
- package/src/__tests__/questionsBoard.test.tsx +62 -0
- package/src/__tests__/react-native-api.test.tsx +126 -0
- package/src/__tests__/render-debug.test.tsx +207 -0
- package/src/__tests__/render-stringValidation.test.tsx +157 -0
- package/src/__tests__/render.test.tsx +256 -0
- package/src/__tests__/renderHook.test.tsx +114 -0
- package/src/__tests__/screen.test.tsx +66 -0
- package/src/__tests__/timerUtils.ts +7 -0
- package/src/__tests__/timers.test.ts +27 -0
- package/src/__tests__/waitFor.test.tsx +327 -0
- package/src/__tests__/waitForElementToBeRemoved.test.tsx +151 -0
- package/src/__tests__/within.test.tsx +96 -0
- package/src/act.ts +86 -0
- package/src/cleanup.ts +15 -0
- package/src/config.ts +72 -0
- package/src/fireEvent.ts +163 -0
- package/src/flush-micro-tasks.ts +30 -0
- package/src/helpers/__tests__/accessiblity.test.tsx +373 -0
- package/src/helpers/__tests__/component-tree.test.tsx +226 -0
- package/src/helpers/__tests__/format-default.tsx +114 -0
- package/src/helpers/__tests__/getTextContent.test.tsx +49 -0
- package/src/helpers/__tests__/includeHiddenElements.test.tsx +39 -0
- package/src/helpers/__tests__/query-name.test.ts +10 -0
- package/src/helpers/__tests__/timers.test.ts +8 -0
- package/src/helpers/accessiblity.ts +108 -0
- package/src/helpers/component-tree.ts +89 -0
- package/src/helpers/debugDeep.ts +27 -0
- package/src/helpers/debugShallow.ts +22 -0
- package/src/helpers/deprecation.ts +53 -0
- package/src/helpers/errors.ts +66 -0
- package/src/helpers/filterNodeByType.ts +7 -0
- package/src/helpers/findAll.ts +68 -0
- package/src/helpers/format-default.ts +72 -0
- package/src/helpers/format.ts +47 -0
- package/src/helpers/getTextContent.ts +20 -0
- package/src/helpers/host-component-names.tsx +67 -0
- package/src/helpers/matchers/__tests__/matchArrayValue.test.ts +34 -0
- package/src/helpers/matchers/__tests__/matchObject.test.ts +37 -0
- package/src/helpers/matchers/__tests__/matchStringValue.test.ts +15 -0
- package/src/helpers/matchers/accessibilityState.ts +48 -0
- package/src/helpers/matchers/accessibilityValue.ts +24 -0
- package/src/helpers/matchers/matchArrayProp.ts +21 -0
- package/src/helpers/matchers/matchLabelText.ts +51 -0
- package/src/helpers/matchers/matchObjectProp.ts +25 -0
- package/src/helpers/matchers/matchStringProp.ts +23 -0
- package/src/helpers/matchers/matchTextContent.ts +20 -0
- package/src/helpers/pointer-events.ts +27 -0
- package/src/helpers/query-name.ts +4 -0
- package/src/helpers/stringValidation.ts +36 -0
- package/src/helpers/timers.ts +98 -0
- package/src/index.ts +33 -0
- package/src/matches.ts +49 -0
- package/src/pure.ts +25 -0
- package/src/queries/__tests__/a11yState.test.tsx +439 -0
- package/src/queries/__tests__/a11yValue.test.tsx +309 -0
- package/src/queries/__tests__/displayValue.test.tsx +221 -0
- package/src/queries/__tests__/hintText.test.tsx +177 -0
- package/src/queries/__tests__/labelText.test.tsx +242 -0
- package/src/queries/__tests__/makeQueries.test.tsx +235 -0
- package/src/queries/__tests__/placeholderText.test.tsx +136 -0
- package/src/queries/__tests__/role-value.test.tsx +176 -0
- package/src/queries/__tests__/role.test.tsx +824 -0
- package/src/queries/__tests__/testId.test.tsx +200 -0
- package/src/queries/__tests__/text.test.tsx +556 -0
- package/src/queries/a11yState.ts +131 -0
- package/src/queries/a11yValue.ts +131 -0
- package/src/queries/displayValue.ts +78 -0
- package/src/queries/hintText.ts +112 -0
- package/src/queries/labelText.ts +59 -0
- package/src/queries/makeQueries.ts +255 -0
- package/src/queries/options.ts +14 -0
- package/src/queries/placeholderText.ts +79 -0
- package/src/queries/role.ts +132 -0
- package/src/queries/testId.ts +71 -0
- package/src/queries/text.ts +66 -0
- package/src/queries/unsafeProps.ts +76 -0
- package/src/queries/unsafeType.ts +73 -0
- package/src/react-versions.ts +11 -0
- package/src/render-act.ts +19 -0
- package/src/render.tsx +183 -0
- package/src/renderHook.tsx +56 -0
- package/src/screen.ts +123 -0
- package/src/shallow.ts +18 -0
- package/src/test-utils/events.ts +24 -0
- package/src/test-utils/index.ts +1 -0
- package/src/user-event/event-builder/common.ts +50 -0
- package/src/user-event/event-builder/index.ts +5 -0
- package/src/user-event/index.ts +14 -0
- package/src/user-event/press/__tests__/longPress.real-timers.test.tsx +115 -0
- package/src/user-event/press/__tests__/longPress.test.tsx +157 -0
- package/src/user-event/press/__tests__/press.real-timers.test.tsx +318 -0
- package/src/user-event/press/__tests__/press.test.tsx +422 -0
- package/src/user-event/press/constants.ts +7 -0
- package/src/user-event/press/index.ts +1 -0
- package/src/user-event/press/press.ts +134 -0
- package/src/user-event/press/utils/warnAboutRealTimers.ts +6 -0
- package/src/user-event/setup/index.ts +2 -0
- package/src/user-event/setup/setup.ts +93 -0
- package/src/user-event/type/__tests__/__snapshots__/type.test.tsx.snap +26 -0
- package/src/user-event/type/__tests__/type.test.tsx +63 -0
- package/src/user-event/type/index.ts +1 -0
- package/src/user-event/type/type.ts +20 -0
- package/src/user-event/utils/__tests__/wait.test.ts +63 -0
- package/src/user-event/utils/events.ts +54 -0
- package/src/user-event/utils/index.ts +2 -0
- package/src/user-event/utils/wait.ts +15 -0
- package/src/waitFor.ts +228 -0
- package/src/waitForElementToBeRemoved.ts +42 -0
- package/src/within.ts +30 -0
- package/tsconfig.json +17 -0
- package/tsconfig.release.json +8 -0
- package/website/.gitignore +20 -0
- package/website/README.md +33 -0
- package/website/docker/.dockerignore +3 -0
- package/website/docker/Dockerfile +9 -0
- package/website/docker/docker-compose.yml +11 -0
- package/website/docs/API.md +946 -0
- package/website/docs/EslintPLluginTestingLibrary.md +28 -0
- package/website/docs/FAQ.md +44 -0
- package/website/docs/GettingStarted.md +100 -0
- package/website/docs/HowShouldIQuery.md +21 -0
- package/website/docs/MigrationV11.md +64 -0
- package/website/docs/MigrationV12.md +67 -0
- package/website/docs/MigrationV2.md +126 -0
- package/website/docs/MigrationV7.md +119 -0
- package/website/docs/MigrationV9.md +67 -0
- package/website/docs/Queries.md +567 -0
- package/website/docs/ReactNavigation.md +371 -0
- package/website/docs/ReduxIntegration.md +137 -0
- package/website/docs/TestingEnvironment.md +154 -0
- package/website/docs/Troubleshooting.md +44 -0
- package/website/docs/UnderstandingAct.md +227 -0
- package/website/docs/UserEvent.md +66 -0
- package/website/docusaurus.config.js +114 -0
- package/website/package.json +31 -0
- package/website/sidebars.js +20 -0
- package/website/src/components/Feature.js +31 -0
- package/website/src/css/custom.css +13 -0
- package/website/src/css/index.module.css +77 -0
- package/website/src/pages/index.js +82 -0
- package/website/static/.nojekyll +0 -0
- package/website/static/css/custom.css +28 -0
- package/website/static/img/hit.png +0 -0
- package/website/static/img/locomotive.png +0 -0
- package/website/static/img/owl.png +0 -0
- package/website/static/img/tools.png +0 -0
- package/website/yarn.lock +7669 -0
- package/yarn.lock +7765 -0
- package/build/flushMicroTasks.d.ts +0 -5
- package/build/flushMicroTasks.js +0 -17
- 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!
|