How to test when using custom plugins with inject (vue composition)

[MaelAbgrall]

Hello,

tldr: how to use 'inject' in test and mock a method from a class

I wrote a custom plugin for my app to handle SSO with multiple providers, everything was working fine for the option API, and I'm slowly moving the project to the composition API.

The plugin is simply a class that is made available everywhere.
(auth.js)

export const auth = {
  install: (app, manager) => {
    // vue options
    app.config.globalProperties.$auth = manager;

    // vue composition
    app.provide("auth", manager);
  }
};

export class AuthManager {
  async getToken() {...}
  async redirectToLogin() {...}
  ...
};

and here is an example of a component (to mark a notification as seen) that use the plugin

// inside <scrip setup>
const props = defineProps(["notification"]);
const store = useStore();
const router = useRouter();

async function markAsSeen() {
  const auth = inject("auth");
  const token = await auth.getToken();
  await store.dispatch("notifications/markNotificationAsSeen", {
    notification_id: props.notification.id,
    token,
  });
}

My first issue is that test are telling me auth is not defined (see below), and I'm getting a vue warning "[Vue warn]: inject() can only be used inside setup() or functional components."

    ReferenceError: auth is not defined

      107 |  */
      108 | async function markAsSeen() {
    > 109 |   const token = await auth.getToken();
          |                 ^
      110 |   await store.dispatch("notifications/markNotificationAsSeen", {
      111 |     notification_id: props.notification.id,
      112 |     token,

The second issue is that I need to mock this getToken method to return an empty string, and I can't figure how to do that

I'm missing something, but I can't get what it is, can anyone explain this?

[cexbrayat]

Hi @MaelAbgrall

If you want to test something that relies on provide/inject, then you must test it in the context of a component. So for example you can create a test component that you then mount in your test.

I hope that helps. If that's not the case, then try to make a reproduction so we can take a look, with a simplified version of what you want, and a unit test that is falling.

You can use create-vue or make a repro online using vitest

[MaelAbgrall]

Thank @cexbrayat

My test actually look like this (sorry for not putting it in the question)

describe("Notifications tests", () => {
  let store;
  let mockedRouter;

  beforeEach(() => {
    store = createStore({...});
    mockedRouter = {
      push: jest.fn(),
    };
  });

  test("the notification page shows notifications", async () => {
    axios.mockImplementation(() => Promise.resolve(twoNotifications));

    const wrapper = mount(Notifications, {
      global: {
        plugins: [store, router],
        provide: { auth: auth },
      },
    });

    await flushPromises();

    const notifications = wrapper.findAll("#notification");
    expect(notifications.length).toBe(2);
  });
}

Is this what you said by context of a component?

I forgot to mention, I actually don't need the plugin at all.
All I need is auth.getToken() to give an empty string so the tests can carry on.
I already removed the inject function from the component, and I can use a useAuth() that is similar to vuex/pinia/vue router

// auth.js
export function useAuth() {
  return inject("auth");
}

[cexbrayat]

Yes that's what I was referring to, I was not sure you were using a component in your test.

It's hard to say what you're missing, I don't see anything obvious (but I don't see how you defined auth in your test?). If you can make an (as minimal as possible) repro, maybe we'll be able to help you.

I'll move this to discussions, as it doesn't look like this is an issue with VTU

[MaelAbgrall]

@cexbrayat Thanks!
So here https://github.com/MaelAbgrall/reproducible-example I tried to reproduce what my code does

I'm struggling to understand how the inject/provide works in the tests, and I'm almost sure this is the root of the issue

[cexbrayat]

I think there are several things to fix in your test.

    const wrapper = mount(HelloWorldv3, {
      provide: {
        auth() {
          {
            getToken: () => "";
          }
        },
      },
    });

provide is a property of global (see https://test-utils.vuejs.org/api/#global).
My 2 cts: TypeScript really helps with that kind of error.

Then auth should be a property not a function I think. And your function does not return anything.

So the test should be something like:

    const wrapper = mount(HelloWorldv3, {
      global: {
        provide: {
          auth: {
            getToken: () => ""
          }
        }
      }
    });

Give it a try and let me know

[MaelAbgrall]

This worked thank you!
and yes, TS is in the plan when the project will be a bit less busy, and only new code is getting the vue composition treatment for now :)