Skip to main content

Component Testing

testID​

To facilitate the usage of component testing libraries such as React Native Testing Library you have the option of adding a testID attribute to a component's corresponding elements. By passing testID in as a prop with a value of the desired string id this attribute will be appended to all component elements that include a unique Abyss class name. Please see the Integration tab and the Classes sub-heading for each component to determine which elements will receive this test id. The resulting testID value will be a concatenated string that combines the value passed in with the prop and the element's unique class name.

For example, the following code:

will render the following structure:

<View
  accessibilityRole="button"
  accessible={true}
  testID="my-test-ID-abyss-notification-root"
>
  <View testID="my-test-ID-abyss-notification-dot" />
  <View>
    <Text testID="my-test-ID-abyss-notification-text">
      Add your dependents to your account to view their claims and coverage.
    </Text>
    <Text testID="my-test-ID-abyss-notification-date">May 13, 2025</Text>
  </View>
</View>

Change testing strategy​

By default, the testID will have an abyss class name appended to it. If you do not want this, you can use the TestProvider component to change the testing strategy.

The TestProvider component has two strategies: "class" and "root".

Root strategy​

The "root" strategy applies the testID only to the root element of the component. This means you won't be able to target nested elements within the Abyss component for testing.

For example, let's say the testID of ProgressBar is set to "your-test-ID".

<TestProvider strategy="root">
  <ProgressBar testID="your-test-ID" />
</TestProvider>

You can use the following code to find and test the element:

import { render } from '@testing-library/react-native';


const screen = render(
  <TestProvider strategy="root">
    <ProgressBar testID="your-test-ID" />
  </TestProvider>
);
const element = screen.getByTestId('your-test-ID');

Class strategy​

The "class" strategy (similar to default) allows testing of nested components by appending the Abyss class name to your testID. This creates unique identifiers for each element within the component.

For example, let's say the testID of ProgressBar is set to "your-test-ID".

<TestProvider strategy="class">
  <ProgressBar testID="your-test-ID" />
</TestProvider>

You will have to look at the classes for the ProgressBar component to determine which elements will receive this test ID and have its class name appended to it.

The resulting test IDs will be "your-test-ID-abyss-progress-bar-root" & "your-test-ID-abyss-progress-bar-slide".

You can then use the following code to find and test an element's subcomponents:

import { render } from '@testing-library/react-native';


const screen = render(
  <TestProvider strategy="class">
    <ProgressBar testID="your-test-ID" />
  </TestProvider>
);
const element = screen.getByTestId('your-test-ID-abyss-progress-bar-slide');
Table of Contents