skills/callstack__react-native-testing-library
1
0
Fork 0
mirror of https://github.com/callstack/react-native-testing-library.git synced 2026-09-18 23:09:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: adjust ByTestId misleading warnings; add guidelines about accessibilityHint (#542)

Browse Source 
* docs: remove byTestId misleading warnings

* change caution to warning, mention principles and accessibility guideline

* promote new aliases in docs example

* rephrase
This commit is contained in:
Michał Pierzchała
2020-09-11 13:18:52 +02:00
committed by GitHub
parent 7ba31524c5
commit a0faf69bea
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/docs/MigrationV2.md
-4
View File
@@ -113,10 +113,6 @@ In v2 we fixed this inconsistency, which may result in failing tests, if you rel
- replace `testID` with proper `accessibilityHint` or `accessibilityLabel` if it benefits the user
- use safe queries like `*ByText` or `*ByA11yHint`
:::caution
In general, you should avoid `*byTestId` queries when possible. Use queries that check things that the user can interact with. Like `*ByText` or `*ByPlaceholderText` or accessibility queries (e.g. `*ByA11yHint`, `*ByA11yLabel`).
:::
## Deprecated `flushMicrotasksQueue`
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.
website/docs/Queries.md
+10 -6
View File
@@ -107,8 +107,8 @@ const { getByTestId } = render(<MyComponent />);
const element = getByTestId('unique-id');
```
:::caution
Please be mindful when using these API and **treat it as an escape hatch**. Your users can't interact with `testID` anyhow, so you may end up writing tests that provide false sense of security. Favor text and accessibility queries instead.
:::info
In the spirit of [the guiding principles](https://testing-library.com/docs/guiding-principles), it is recommended to use this only after the other queries don't work for your use case. Using `testID` attributes do not resemble how your software is used and should be avoided if possible. However, they are particularly useful for end-to-end testing on real devices, e.g. using Detox and it's an encouraged technique to use there. Learn more from the blog post ["Making your UI tests resilient to change"](https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change).
:::
### `ByA11yLabel`, `ByAccessibilityLabel`, `ByLabelText`
@@ -122,8 +122,8 @@ Returns a `ReactTestInstance` with matching `accessibilityLabel` prop.
```jsx
import { render } from '@testing-library/react-native';
const { getByA11yLabel } = render(<MyComponent />);
const element = getByA11yLabel('my-label');
const { getByLabelText } = render(<MyComponent />);
const element = getByLabelText('my-label');
```
### `ByA11yHint`, `ByAccessibilityHint`, `ByHintText`
@@ -137,10 +137,14 @@ Returns a `ReactTestInstance` with matching `accessibilityHint` prop.
```jsx
import { render } from '@testing-library/react-native';
const { getByA11yHint } = render(<MyComponent />);
const element = getByA11yHint('my-hint');
const { getByHintText } = render(<MyComponent />);
const element = getByHintText('Plays a song');
```
:::info
Please consult [Apple guidelines on how `accessibilityHint` should be used](https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint).
:::
### `ByA11yStates`, `ByAccessibilityStates`
> getByA11yStates, getAllByA11yStates, queryByA11yStates, queryAllByA11yStates