Can't test Apollo GraphQL query's loading state - react-native

Question

guys. I have a query that gets data from backend, while query didn't get data I'm showing '...Loading' text. Now I want to test it, but I can't. Test's logic is: if loading state is true, check if we have '...Loading' text.
Here is my query:
const [getCards, { data: cardsData, error: cardsError, loading: cardsLoading }] = useLazyQuery(
GET_LIST,
{
fetchPolicy: 'no-cache',
}
);
Here is my check of loading state:
if (cardsLoading) {
return (
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text>...Loading</Text>
</View>
);
}
And finally here is my test:
const getCardsMock = [
{
request: {
query: GET_LIST,
},
result: {
cards: {
id: 0,
name: 'card',
},
}
},
];
it('Loading state test', async () => {
const component = renderer.create(
<MockedProvider mocks={getCardsMock} addTypename={false}>
<HomeViewApollo />
</MockedProvider>
);
const tree = component.toJSON();
expect(tree.children).toContain('...Loading');
});
After running test I got an error telling me that expected value isn't equal to received value. Received value is array with component, that I render, if loading is done.
I'm not sure but looks like that component's loading state never changes during the test. Do you have an idea how to fix it?

Answer 1

I rewrote test like that
it('Loading state test', async () => {
let wrapper = render(
<MockedProvider mocks={[getCardsMock]} addTypename={false}>
<HomeViewApollo />
</MockedProvider>
);
await waitFor(() => [
expect(wrapper.queryByTestId('loadingIndicator')).toBeTruthy()
]);
});
Now it works.