|
| 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! |
0 commit comments