question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:open
  • Created a year ago
  • Reactions:11
  • Comments:14

github_iconTop 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Vue warn]:A plugin must either be a function or an object ...
I use click-outside-vue3' as directive with Nuxt3. Had the same issue. The reason was that I had: import ClickOutside from ...
Read more >
[Vue warn]: A plugin must either be a function or an object ...
[Vue warn]: A plugin must either be a function or an object with an "install" function. Vue test utils. vue-toastification.
Read more >
Plugins | Vue.js
A plugin is defined as either an object that exposes an install() method, or simply a function that acts as the install function...
Read more >
Upgrade Guide
You will also need to make a few changes to your main.js (and also upgrade your Vue CLI project to support Vue 3)...
Read more >
The Complete Guide to Vue 3 Plug-ins: Part 2
For instance, you use a Log Component in every Vue app you work on. In addition, you might expose a few global functions...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found