How to test if ActivityIndicator is shown in react native component unit test?

user_4458003 0
Viewed 648

I am learning testing react native apps with jest and react testing library. I could not find how to check if ActivityIndicator is being shown. How do I query for that? Is there an accessibility role? I managed to query by accessibilityHint which I gave like this:

const { queryByAccessibilityHint } = render(
    <View>
        <ActivityIndicator accessibilityHint='loading' />
    </View>
)

await waitFor( () => {
    expect(queryByAccessibilityHint('loading')).not.toBeNull()
})

But is it OK? And how about showing an ActivityIndicator in a FlatList when using a RefreshControl? I could not manage to set the accessibility role.

activity-indicator react-native react-testing-library jestjs testing
1 Answers

The library @testing-library/react-native would fit the query for accessibility that you're looking for.

If you were to use the library I linked you could do something like this:

const { getByAccessibilityHint } = render(
    <View>
        <ActivityIndicator accessibilityHint='loading' />
    </View>
)
getByAccessibilityHint('loading') // If it finds it, it passes. If not, throws err
user_113809250
Related