Can't test Apollo GraphQL query's loading state-CodePudding

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?

CodePudding user response：

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.