Not able to get working with Vite

[doutatsu]

I am having trouble getting the tests to work with Vite, specifically due to the import object that is provided. One example is loading in global components using Vue Test Utils config:

hitting an issue with globEager when trying to provide plugins to config

Here my plugin:

export default {
  install: (app, _options) => {
    const components = import.meta.globEager('../components/base_components/*.vue');

    Object.entries(components).forEach(([path, definition]) => {
      const componentName = path.split('/').pop().replace(/\.\w+$/, '');
      app.component(componentName, definition.default);
    });
  },
};

I am trying to pass this plugin in my setup script for Jest using Vue Test Utils:

import { config } from '@vue/test-utils';
import globalComponents from '@/plugins/globalComponents';

config.global.plugins = [globalComponents];

But I get an error process.globEager is not a function

[lmiller1990]

I'm not fully clear on what exactly you are trying to do. What do you mean by "working with Vite"?

If you want to run your tests in a browser with Vite, you will likely need to use something like Mocha, that is environment agnostic. I'm not clear on how Jest + Vite fit together here.

Test Utils itself works fine in a browser. I might need more information on your setup, expected result, etc.

[doutatsu]

Basically, Vite specific methods (globEager, etc) and functionality, doesn't work with Jest.
There is some work going on from what I've seen:
https://github.com/sodatea/vite-jest
vitejs/vite#1955

After a lot of trial and error, I have managed to get Vite + Jest + Vue Test Utils to work together, albeit a lot of hacks has been used. I understand it's not quite the issue of Vue Test Utils, so I'll close this issue.

For anyone searching this issue, the way I solved the Base Components issue (due to globEager not working), is to just manually import them all and then pass to components property of Vue Test Utils config. It's not great on a large project, but I am still unable to figure out how to recursively import components. Hopefully can be done better, when there is Vite has proper Jest integration.

Here how my setup.js Vue Test Utils configuration part looks like

// ===
// Configure Vue instance in Vue Test Utils
// ===
import { config } from '@vue/test-utils';
import { i18n } from '@/plugins/i18n';
import icons from '@/plugins/heroicons';

// Need to manually import all the components, due to inability to use `plugins` API, due to `import.meta.globEager` not working 
import BaseBadge from '@/components/base_components/BaseBadge';
import BaseLoader from '@/components/base_components/BaseLoader';
...

config.renderStubDefaultSlot = true;
config.global = {
  directives: {
    ScrollTo: true,
    Tippy: true,
    Touch: true,
    TouchOptions: true,
    TouchClass: true,
    RouterView: true,
  },
  plugins: [icons, i18n],
  mocks: {
    $toasts: { error: jest.fn(), base: jest.fn(), success: jest.fn() },
  },
  components: {
    BaseBadge,
    BaseLoader,
    ...
  },
};

[lmiller1990]

Good to see you found a solution. Out of curiosity, why do you need globEager to work in Jest? Is this for bundle splitting or something? A similar problem existed with Jest + webpack with regards to loading chunks.

[doutatsu]

@lmiller1990 I just want to be able to pass my custom plugin to the Vue app, instead of having to manually import components. I am looking to see if I can preload all base components without using globEager, but that was the method suggested for Vite projects