https://github.com/bbb/testing-a11y
A library for testing and accessibility with react/ react-native
https://github.com/bbb/testing-a11y
a11y accessibility react react-native testing
Last synced: 9 months ago
JSON representation
A library for testing and accessibility with react/ react-native
- Host: GitHub
- URL: https://github.com/bbb/testing-a11y
- Owner: BBB
- Created: 2020-07-05T15:31:15.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T23:00:22.000Z (over 3 years ago)
- Last Synced: 2025-09-04T13:50:40.214Z (10 months ago)
- Topics: a11y, accessibility, react, react-native, testing
- Language: TypeScript
- Homepage:
- Size: 698 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
testing-a11y
Some tools to make testing and accessibilty play a bit nicer with react/ react-native
### Example
You have a component that you'd like to write integration tests for in the simulator using something like appium or detox.
You've added accessibility, and platform specific code. It's alot to remember for each place you'd like an ID, or just some a11y text.
```typescript
import * as React from "react";
import { Text } from "react-native";
export const testID = "amount";
const isTesting = () => global.TEST_MODE === true;
export default () => (
<>
Label
£50.00
>
);
```
That's a load of juggling for every component
Enter `testing-a11y`!
```typescript
import * as React from "react";
import { Text } from "react-native";
import { a11yLabel, a11yOf, a11yProps } from "./lib/testID";
export const amountID = a11yOf("amount", "The price of the item");
export default () => (
<>
Label
£50.00
>
);
```
Much simpler! The library takes care of the platform/ a11y switching for you, and allows you to store one reference for testID and a11yLabels in a single place.
Want a unique id for an item in a list? `testing-a11y` can do that too, simply call `amountID(ix)` instead of passing it:
```typescript
import * as React from "react";
import { Text } from "react-native";
import { a11yLabel, a11yOf } from "./lib/testID";
export const amountID = a11yOf("amount", "The price of the item");
export default (props) => (
<>
{props.items.map((item, ix) => {
return (
{item.name}
{item.amount}
)
})}
>
);
```
Imagine you have a common component used all over your app. Each time you use it, because you want it to be easily selectable, you end up passing a differentiating string through to the component to add to the test.
`testing-a11y` simplifies this by allowing you to wrap components. Everything inside the wrapper will have the prefix added to it's testID!
```typescript
import * as React from "react";
import { Text, Button } from "react-native";
import { a11yLabel, a11yOf } from "./lib/testID";
export const submitButtonID = a11yOf("SubmitButton");
export const SubmitButton: React.SFC<{}> = (props) => {
return (
void 0}
{...submitButtonID().asProps()}
/>
);
};
export default (props) => (
<>
>
);
```
You can now select the two different buttons with:
```typescript
import { a11yProps } from "testing-a11y";
const firstButton = submitButtonID("Form.InnerForm").asTestID();
const otherButton = submitButtonID("DifferentForm").asTestID();
```
Much cleaner!