apollographql / apollo-client

:rocket:  A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://apollographql.com/client
MIT License
19.38k stars 2.66k forks source link

Using MockedProvider with useQuery client set #9049

Open DanielHuntleySBG opened 3 years ago

DanielHuntleySBG commented 3 years ago

Intended outcome:

Testing code using MockedProvider with a useQuery hook that has a client set

useQuery Hook

const { loading, error, data, fetchMore } = useQuery<Playlists>(PLAYLISTS, {
    client // Cause of the issue
});

Test with Mock

const playlistsMock = [
    {
        request: {
            query: PLAYLISTS,
            }
        },
        result: {
            data: playlists
        }
    }
];

export { playlistsMock };

it("renders", async () => {
        const { queryByTestId, debug } = render(
            <MockedProvider mocks={playlistsMock} addTypename={false} cache={cache}>
                <Playlists />
            </MockedProvider>
        );

        await new Promise((resolve) => setTimeout(resolve, 0));

        debug(undefined, 30000);
    });

Actual outcome:

Client defined

const { loading, error, data, fetchMore } = useQuery<Playlists>(PLAYLISTS, {
    client // Cause of the issue
});

{loading: true, data: undefined}

Client Commented out:

const { loading, error, data, fetchMore } = useQuery<Playlists>(PLAYLISTS, {
    // client
});

{loading: false, data: playlists}

How to reproduce the issue:

Using mocked provider in conjunction with setting a client causes the test to stay in a loading state with data undefined.

Versions

    OS: Windows 10 10.0.19042
  Binaries:
    Node: 16.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - ~\Documents\Projects\hub2\WebPortal\node_modules\.bin\yarn.CMD
    npm: 7.23.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.44)

  Apollo Client version:
    3.4.16

Thanks in advance for the help and any suggestions or workarounds would be greatly appreciated

stumpykilo commented 2 years ago

Was there a resolution or better way to accomplish this? I am experiencing same issue.