diff --git a/README.md b/README.md index 2bf662c11..72655a7a7 100644 --- a/README.md +++ b/README.md @@ -122,7 +122,9 @@ The [public API](https://callstack.github.io/react-native-testing-library/docs/a - [`within`](https://callstack.github.io/react-native-testing-library/docs/api#within) - creates a queries object scoped for given element. - [`flushMicrotasksQueue`](https://callstack.github.io/react-native-testing-library/docs/api#flushmicrotasksqueue) - waits for microtasks queue to flush. -**Note to users who are more familiar with `react-testing-library`:** This API does not expose `cleanup` because it doesn't interact with the DOM. There's nothing to clean up. +## Migration Guides + +- [Migration to 2.0](https://callstack.github.io/react-native-testing-library/docs/migration20) ## Made with ❤️ at Callstack diff --git a/src/__tests__/findByApi.test.js b/src/__tests__/findByApi.test.js index 3f15c7840..191003010 100644 --- a/src/__tests__/findByApi.test.js +++ b/src/__tests__/findByApi.test.js @@ -55,4 +55,4 @@ test('findBy queries work asynchronously', async () => { ); await expect(findByDisplayValue('Display Value')).resolves.toBeTruthy(); await expect(findAllByDisplayValue('Display Value')).resolves.toHaveLength(1); -}, 10000); +}, 20000); diff --git a/website/docs/Migration20.md b/website/docs/Migration20.md new file mode 100644 index 000000000..6bd994919 --- /dev/null +++ b/website/docs/Migration20.md @@ -0,0 +1,16 @@ +--- +id: migration20 +title: Migration to 2.0 +--- + +This guides describes major steps involved in migrating your testing code from using React Native Testing Library version `1.x` to version `2.0`. + +## Some `byTestId` queries behavior changes + +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). + +If you relied on setting `testID` for your custom components, you should probably set them on the root element of the returned JSX. + +:::caution +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). +::: diff --git a/website/sidebars.js b/website/sidebars.js index 67b9b5d86..d3c764e26 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -2,6 +2,7 @@ module.exports = { docs: { Introduction: ['getting-started'], 'API Reference': ['api', 'api-queries'], + Guides: ['migration20'], Examples: ['react-navigation', 'redux-integration'], }, };