Skip to content

Commit 47f570b

Browse files
committed
docs: small amendments to the migration guide
1 parent dc8d759 commit 47f570b

File tree

2 files changed

+17
-11
lines changed

2 files changed

+17
-11
lines changed

README.md

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
[![Chat][chat-badge]][chat]
1515
[![Sponsored by Callstack][callstack-badge]][callstack]
1616

17+
> We renamed the `react-native-testing-library` npm package to `@testing-library/react-native`, officially joining the "Testing Library" family 🎉. Read the [migration guide](https://callstack.github.io/react-native-testing-library/docs/migration-v7).
18+
1719
## The problem
1820

1921
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.

website/docs/MigrationV7.md

+15-11
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@ title: Migration to 7.0
44
---
55

66
:::caution
7-
We renamed the `react-native-testing-library` npm package to `@testing-library/react-native`, joining the Testing Library family.
7+
We renamed the `react-native-testing-library` npm package to `@testing-library/react-native`, officially joining the "Testing Library" family 🎉.
88
:::
99

1010
As the version 7.0 involves merging two libraries together, there are two variants for migration guide, dependent on library you used previously:
1111

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)
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)
1414

1515
# Guide for `react-native-testing-library` users
1616

17-
This guide describes steps necessary to migrate from React Native Testing Library `v2.x` to `v7.0`.
17+
This guide describes steps necessary to migrate from React Native Testing Library `v2.x` or `v6.0` to `v7.0`.
1818

1919
## Renaming the library
2020

@@ -46,21 +46,25 @@ Please replace all occurrences of these queries in your codebase.
4646

4747
## `fireEvent` support for disabled components
4848

49-
To improve compatibility with real React Native environment `fireEvent` now performs checks whether the component is disabled before firing an event on it. The checks internally uses `onStartShouldSetResponder` prop to establish should event fire, which should resemble the actual React Native runtime.
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.
5050

5151
If your code contained any workarounds for preventing events firing on disabled events, you should now be able to remove them.
5252

5353
# Guide for `@testing-library/react-native` users
5454

5555
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.
5656

57-
## Changed helpers
57+
## Renaming "wait" helpers
5858

59-
- `wait` and `waitForElement` are removed, rename these to `waitFor`
59+
The `wait` and `waitForElement` helpers are replaced by `waitFor`. Please rename all occurrences of these in your codebase.
6060

61-
## Missing queries
61+
## Changes to `ByTestId` queries
6262

63-
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 normal `Text` component under the hood.
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.
6468

6569
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.
6670

@@ -77,7 +81,7 @@ Use the official React Native preset for Jest:
7781
}
7882
```
7983

80-
We're told this should also speed 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.
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.
8185

8286
## Cleanup is included by default
8387

@@ -112,4 +116,4 @@ There are slight differences in how `fireEvent` works in both libraries:
112116
+fireEvent(element: ReactTestInstance, eventName: string, ...data: Array<any>)
113117
```
114118
1. There is no `NativeTestEvent` - second and rest arguments are used instead.
115-
1. There are only 3 short-hand events: [`fireEvent.press`](`/docs/api/#fireeventpress-element-reacttestinstance--void`), [`fireEvent.changeText`](https://callstack.github.io/react-native-testing-library/docs/api/#fireeventchangetext-element-reacttestinstance-data-arrayany--void), [`fireEvent.scroll`](https://callstack.github.io/react-native-testing-library/docs/api/#fireeventchangetext-element-reacttestinstance-data-arrayany--void). For all other or custom events you can use the base signature.
119+
1. There are only 3 short-hand events: [`fireEvent.press`](`/docs/api/#fireeventpress-element-reacttestinstance--void`), [`fireEvent.changeText`](https://callstack.github.io/react-native-testing-library/docs/api/#fireeventchangetext-element-reacttestinstance-data-arrayany--void) and [`fireEvent.scroll`](https://callstack.github.io/react-native-testing-library/docs/api/#fireeventchangetext-element-reacttestinstance-data-arrayany--void). For all other or custom events you can use the base signature.

0 commit comments

Comments
 (0)