Testing loader of React component

Hi everyone,

I am facing an issue with my tests in React Native. I am using react native testing library and jest and here is the component I want to test :

function ThemeWrapper({ children }: Props) {
  const { isThemeLoading, theme } = useTheme();

  if (isThemeLoading) {
    return (
        style={[themeWrapperStyle.container, { backgroundColor: theme.backgroundColor }]}
        <ActivityIndicator color={theme.loader} size="large" testID="themeLoader" />
  return children;

useTheme is a custom hook to access the theme context. In the provider, I fetch data from AsyncStorage which is an async process. So I need to show a loader until it ends and then display the children components.

I want to test three things :

1/ The loader is displayed correctly
2/ The loader is replaced the children component after few time
3/ The loader has the expected style

In my test, I try to do this :

describe('Testing ThemeWrapper', () => {
  let sut: JSX.Element;

  beforeAll(() => {
    sut = <ThemeWrapper children={<View />} />;

    'should display the loader',
    () => {
      const { getByTestId } = render(sut);

But it says “Unable to find an element with testID: themeLoader”.

How can I test the loader before it disappears ? How can I test that the children are showed after the loader ? Actually I may not need to test this as the tests concerning these components are OK…

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.