Skip to content

Commit 0253d4a

Browse files
authored
docs: cleanup migration doc (#342)
1 parent c3074b6 commit 0253d4a

File tree

1 file changed

+36
-35
lines changed

1 file changed

+36
-35
lines changed

website/docs/MigrationV2.md

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,75 +3,72 @@ id: migration-v2
33
title: Migration to 2.0
44
---
55

6-
This guides describes major steps involved in migrating your testing code from using React Native Testing Library version `1.x` to version `2.0`.
6+
This guide describes steps necessary to migrate from React Native Testing Library `v1.x` to `v2.0`.
77

88
## Dropping Node 8
99

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 suggest using the latest LTS version.
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.
1111

1212
## Auto Cleanup
1313

14-
`cleanup()` function is now called automatically after every test, if your testing framework supports `afterEach` hook (like Jest, mocha, and Jasmine).
14+
`cleanup()` function is now called automatically after every test if your testing framework supports `afterEach` hook (like Jest, Mocha, and Jasmine).
1515

16-
You should be able to safely remove all `afterEach(cleanup)` calls in your code.
16+
You should be able to remove all `afterEach(cleanup)` calls in your code.
1717

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:
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:
1919

20-
1. by importing `'react-native-testing-library/pure'` instead of `'react-native-testing-library'`
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:
2122

22-
2. 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:
23-
24-
```js
25-
{
26-
setupFiles: ['react-native-testing-library/dont-cleanup-after-each'];
27-
}
28-
```
23+
```json
24+
{
25+
"setupFiles": ["react-native-testing-library/dont-cleanup-after-each"];
26+
}
27+
```
2928

30-
3. by setting `RTNL_SKIP_AUTO_CLEANUP` env variable to `true`. You can do this with `cross-evn` like this:
29+
- by setting `RTNL_SKIP_AUTO_CLEANUP` env variable to `true`. You can do this with `cross-evn` like this:
3130

32-
```sh
33-
cross-env RNTL_SKIP_AUTO_CLEANUP=true jest
34-
```
31+
```sh
32+
cross-env RNTL_SKIP_AUTO_CLEANUP=true jest
33+
```
3534

3635
## WaitFor API changes
3736

38-
`waitForElement` function has been renamed to `waitFor` for consistency with React Testing Library. Additionally the signature has slightly changed from:
37+
We renamed `waitForElement` function to `waitFor` for consistency with React Testing Library. Additionally, the signature has slightly changed from:
3938

4039
```jsx
4140
export default function waitForElement<T>(
4241
expectation: () => T,
4342
timeout?: number,
4443
interval?: number
45-
: Promise<T> {
44+
): Promise<T> {}
4645
```
4746

4847
to:
4948

5049
```jsx
5150
export default function waitFor<T>(
5251
expectation: () => T,
53-
{
52+
options: {
5453
timeout?: number,
55-
interval?: number
54+
interval?: number,
5655
}
57-
): Promise<T> {
56+
): Promise<T> {}
5857
```
5958

6059
Both changes should improve code readibility.
6160

62-
:::note
63-
Please note that in many cases `waitFor` call can be replaced by proper use of `findBy` asynchonous queries resulting in more streamlined test code.
61+
:::tip
62+
You can usually avoid `waitFor` by a proper use of `findBy` asynchronous queries. It will result in more streamlined testing experience.
6463
:::
6564

6665
## Removed global `debug` function
6766

68-
Global `debug()` function has been removed in favor of `debug()` method returned from `render()` function.
67+
The `debug()` method returned from `render()` function is all you need. We removed the global export to avoid confusion.
6968

7069
## Removed global `shallow` function
7170

72-
Global `shallow()` functions which has been previously deprecated has been removed.
73-
74-
Shallow rendering React component is usually not a good idea, so we decided to remove the API. However, if you find it useful or need to support legacy tests, feel free to implement it yourself. Here's a sample implementation:
71+
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:
7572

7673
```js
7774
import ShallowRenderer from 'react-test-renderer/shallow';
@@ -93,7 +90,7 @@ Following query functions have been removed after being deprecated for more than
9390
- `queryByName`
9491
- `queryAllByName`
9592

96-
The `*ByType` and `*ByProps` queries has been prefixed with `UNSAFE_`. You can safely rename them using global search/replace in your project:
93+
The `*ByType` and `*ByProps` queries has been prefixed with `UNSAFE_`. You can rename them using global search/replace in your project:
9794

9895
- `getByType` -> `UNSAFE_getByType`
9996
- `getAllByType` -> `UNSAFE_getAllByType`
@@ -104,21 +101,25 @@ The `*ByType` and `*ByProps` queries has been prefixed with `UNSAFE_`. You can s
104101
- `queryByProps` -> `UNSAFE_queryByProps`
105102
- `queryAllByProps` -> `UNSAFE_queryAllByProps`
106103

107-
## Some `byTestId` queries behavior changes
104+
## Some `ByTestId` queries behavior changes
105+
106+
In version `1.x` the `getByTestId` and `queryByTestId` queries could return non-native tinstances. 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`.
108107

109-
In version `1.x` `getByTestId` and `queryByTestId` could return non-native elements in tests. This was in contrast with other query functions: `getAllByTestId`, `queryAllByTestId`, `findByTestId` and `findAllByTestId` which returned only elements that would be rendered to native components (e.g. `View`, `Text`, etc).
108+
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:
110109

111-
If you relied on setting `testID` for your custom components, you should probably set them on the root element of the returned JSX.
110+
- pass the `testID` prop down so it can reach a native component, like `View` or `Text`
111+
- replace `testID` with proper `accessibilityHint` or `accessibilityLabel` if it benefits the user
112+
- use safe queries like `*ByText` or `*ByA11yHint`
112113

113114
:::caution
114-
In general, you should avoid `byTestId` queries when possible and rather use queries that check things that can been seen by the user (e.g. `byText`, `byPlaceholder`, etc) or accessability queries (e.g. `byA11yHint`, `byA11yLabel`, etc).
115+
In general, you should avoid `*byTestId` queries when possible. Use queries that check things that the user can interact with. Like `*ByText` or `*ByPlaceholder` or accessibility queries (e.g. `*ByA11yHint`, `*ByA11yLabel`).
115116
:::
116117

117118
## Deprecated `flushMicrotasksQueue`
118119

119-
We have deprecated `flushMicrotasksQueue` and plan to remove it in the next major version, as currently there are better alternatives available for helping you write async tests: `findBy` async queries and `waitFor` helper.
120+
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.
120121

121-
If you can't or don't want to migrate your tests, you can get rid of the deprecation warning by copy-pasting function's implementation into your project:
122+
If you can't or don't want to migrate your tests, don't worry. You can use the same implementation we have today:
122123

123124
```js
124125
function flushMicrotasksQueue() {

0 commit comments

Comments
 (0)