apollo-client: Mocking UseLazyQuery does not return data

MockedProvider is a real joke really, can’t count the time I lost debugging this crap

I am seeing the same problem with @apollo/client v3.3.20 when using useLazyQuery. Why this issue has come back given that it was already fixed?

If you wanna mock using jest, you use the following approach

jest.mock("apollo-client", () => ({
  __esModule: true,
  useQuery: (query: any) => {
    //other mocks if needed
  },
  useLazyQuery: jest.fn().mockReturnValue([
    jest.fn(),
    {
      data: {
        yourProperties: "Add Here",
      },
      loading: false,
    },
  ]),
}));

As you see, this approach even returns the mock function that is called in the code to be tested.

Your mocking seems to be incorrect, the above test succeeds for me after changing the result mock to

result: { data: { investment: { id: 'HOHO' } } }

See this comment

Here is an example of a component that uses useLazyQuery and a test that tests this component:

import React, { useEffect, useState } from 'react';
import { render, wait, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { gql } from 'apollo-boost';
import { useLazyQuery } from '@apollo/react-hooks';

export const GET_CAR_QUERY = gql`
  query GetCar {
    car {
      make
    }
  }
`;

export function CarLazy() {
  const [fetchCar, { data }] = useLazyQuery(GET_CAR_QUERY);
  const [hasBeenCalled, setHasBeenCalled] = useState(false);

  useEffect(() => {
    if (!hasBeenCalled) {
      setHasBeenCalled(true);
      fetchCar();
    }
  }, [hasBeenCalled, fetchCar]);

  return <p>{data?.car.make || null}</p>;
}

const mocks = [
  {
    request: {
      query: GET_CAR_QUERY,
    },
    result: {
      data: {
        car: { make: 'BMW' },
      },
    },
  },
];

describe('Lazy', () => {
  test('Component test', async () => {
    const { queryByText } = render(
      <MockedProvider mocks={mocks} addTypename={false}>
        <CarLazy />
      </MockedProvider>
    );

    await wait(() => {
      screen.debug();
      expect(queryByText('BMW')).toBeInTheDocument();
    });
  });
});

Hey Guys! It solved when using useLazyQuery in MockedProvider!

I’m using @apollo/client ‘3.5.5’.

And the reason MockedProvider did not work on useLazyQuery was mismatching: ‘variables’, ‘data’. (+ When I used @apollo/client ‘3.3.21’, It does not work.)

In other words, (variables & data) of mocks should be same with (variables & data) of useLazyQuery in real component that you want to test.

For example,

// In real Component,

const [myLazyQuery, myLazyQueryOptions] = useLazyQuery<QueryDataType, QueryVariablesType>(MY_QUERY, {
   variables: {
      ....
   },
    onCompleted: () => { ... }
    ...
})

&

// In test,

const mocks = [
  {
    request: {
       query: MY_QUERY
       variables:  QueryVariablesType   // It should be same!!!
    },
     result: {
        data: QueryDataType  // It should be same!!!
    }
  }
]

...

// You also should set 'false' addTypeName.
// If set 'true', you should declare '__typename' in each mocks data.
<MockedProvider mocks={mocks} addTypeName={false}>
   <YourComponent../>
</MockedProvider>

So I recommend that using with type that declare Mock’s type. (To catch some mistake).

Like this,

export type MockType<TData, TVariables> = {
  request: {
    query: DocumentNode
    variables: TVariables
  },
  result: {
    data: TData
  }
}

...

const myMocks: MockType<QueryDataType, QueryVariablesType>[] = [{ ... }, { ... }]

I hope this would help.

I’m also having this problem. I cannot get respond data from ‘onCompleted’ in useLazyQuery(By MockedProvider). But I found a way mocking useLazyQuery of Apollo package.

import { DocumentNode } from 'graphql'
import * as Apollo from '@apollo/client'
import { LazyQueryHookOptions, NetworkStatus, QueryLazyOptions, QueryTuple, TypedDocumentNode } from '@apollo/client'

export const makeMockedUseLazyQuery = () => Record<string, unknown>) => {
  const mockedUseLazyQuery = jest.spyOn(Apollo, 'useLazyQuery')

  mockedUseLazyQuery.mockImplementation((query: DocumentNode | TypedDocumentNode<unknown, unknown>, 
    options?: LazyQueryHookOptions<unknown, unknown>): QueryTuple<unknown, unknown> => {

    return [
      jest.fn().mockImplementation((_?: QueryLazyOptions<any>) => {
        options?.onCompleted?.({
            users: {
                id: 1,
                name: "mocked!",
                ...
            }
        })
      }),
      {
        loading: false,
        networkStatus: NetworkStatus.ready,
        called: false,
        data: undefined,
      },
    ]
  })

  return mockedUseLazyQuery
}

You can make conditional return data(by switch or if statement) in function’s body. If you want to use respond data by ‘{ data }’(returned by useLazyQuery function), just use return value in second.

Looks like you are right! I see now, will have to take another look at my original implementation.

(Was expecting it to return what ever I set data to)

Thanks!