[Vue warn]: A plugin must either be a function or an object with an "install" function. Vue test utils

Versions

-2.0.5-rc

Describe the bug

Testing components using vueTestUtills on Vite, errors out on not being able to resolve the plugin.

Expected behavior

import VueToastificationPlugin from 'vue-toastification';

const wrapper = mount(InvoiceView, {
      props: { invoiceId: '2B8B364A-A45E-4922-85CF-0334EC5D4354' },
      global: {
        plugins: [store, VueToastificationPlugin],
      },
    });

should work just fine, instead vue displays warning: [Vue warn]: A plugin must either be a function or an object with an "install" function. Vue test utils and the test errors out on TypeError: __vite_ssr_import_16__.useToast is not a function

Steps to reproduce

create vite component that uses toastification
write a test using vue test utils
observe error

Issue Analytics

State:
Created a year ago
Reactions:11
Comments:14

Top GitHub Comments

10reactions

jmaltiscommented, Jul 24, 2022

Same issue here

5reactions

arjenprogramiccommented, Sep 20, 2022

I got the same error, also using vite and vitest. In the normal aplication it works, but during tests it failed. Mocking with vi.mock('vue-toastification', ...); unfortunately didn’t seem to do anything either.

What I did to solve the problem for now was writing a custom (wrapped) useToast function in a separate file:

src/plugins/toasts/index.ts:

import { useToast as useToastOriginal, ...} from 'vue-toastification';
//...
export const useToast = (): ReturnType<typeof useToastOriginal> => {
  return useToastOriginal();
};
//...

And in the file that you want to use it replace import { useToast } from 'vue-toastification'; with import { useToast } from '@/plugins/toasts'; Or something similar.

In case you wanted to test for a toast notification to be triggered you can place a spy:

const wrapperVm = wrapper.vm as unknown as typeof RootComponent;
const toastSuccessSpy = vi.spyOn(wrapperVm.toast, 'success');

expect(toastSuccessSpy).not.toHaveBeenCalled();

await new Promise(resolve => setTimeout(resolve, 500)); // Just for testing purposes :P

expect(toastSuccessSpy).toHaveBeenCalled();

I hope this helps anyone running into this problem.