Testing loader of React component

[ThibaudF]

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 (
      <View
        style={[themeWrapperStyle.container, { backgroundColor: theme.backgroundColor }]}
      >
        <ActivityIndicator color={theme.loader} size="large" testID="themeLoader" />
      </View>
    );
  }
  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 />} />;
  });

  it(
    'should display the loader',
    () => {
      const { getByTestId } = render(sut);
      expect(getByTestId('themeLoader')).toBeDefined();
    },
  );
});

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…