Vue Test Utils Mock

[T0miii]

Hello,

is there an example how to mock the Urql client for jest with the Vue Implementation?

ty

[kitten]

Hiya 👋

All of these suggestions from the Testing guide apply to any framework, since the Client is framework-agnostic and part of @urql/core: https://formidable.com/open-source/urql/docs/advanced/testing/
The only thing you'd have to change is that Provider becomes provideClient or a similar installation for Vue.

[T0miii]

Ty for some reason provideClient didnt work for me, so i did it like this in case some one else faces the same issue:

            global: {
                plugins: [[urql, {
                    url: "fakeUrl",
                }]],

[bernardo-zuchowski]

Hi guys, I've been trying to mock the client and I haven't had any success. I couldn't understand how to replace Provider with provideClient. Any example for Vue 3 besides the one already in the documentation?

[lucastraba]

Hey guys! I'd like to also bump this, because I've spent the last couple of hours and I cannot make it work.

If you do exactly as shown in the docs and pointed out above, it looks something like this:

const mockClient = {
    executeQuery: vi.fn(() => never),
    executeMutation: vi.fn(() => never),
    executeSubscription: vi.fn(() => never),
  };

provideClient(mockClient);

This causes this error:
Error: You are creating an urql-client without a url.

Adding the url, thus:

const mockClient = {
    url: 'foo',
    executeQuery: vi.fn(() => never),
    executeMutation: vi.fn(() => never),
    executeSubscription: vi.fn(() => never),
  };

provideClient(mockClient);

Causes the error:
TypeError: Cannot read properties of undefined (reading 'reduceRight')

Is there anything we're missing?

Also, @T0miii's solution didn't work for me, provided that where it says urql it is the mock object that needs to feed the provider. What is urql in your example?

Thanks a bunch

[dani-sc]

Hi guys,
did any of you (@bernardo-zuchowski , @lucastraba, @kitten ) ever figure out how to mock the urql client in Vue?

[lucastraba]

Nope, unfortunately... Hope the guys get back to us on this one soon!

[bernardo-zuchowski]

Sorry, I didn't know how to figure it out.

[SeJunB]

I was able to mock the urql client by:

1. Create the mock client

import { never } from "wonka";
// Must be a ref.
export const mockUrqlClient = ref({
  executeQuery: vi.fn(() => never),
  executeMutation: vi.fn(() => never),
});

2. Provide the mock client by config.global.provide = { "$urql": mockUrqlClient};. The key must be "$urql" since useClient, the method that useQuery/useMutation use to get the client, uses inject('$urql') to get the client.

Please see https://github.com/SeJunB/urql-client-unit-test for an example for a complete example.

FYI, if you want your mock to return a response, ensure that the object that you pass into the fromValue function is in the following format:

{
  data: {/* your data */}
}

[lucastraba]

You, sir or madam, are a savior of the broken, the beaten and the damned 🔥