reactjsvitevitest

How to have access to globals injected with rollup in Vitest

I'm currently working on an existing React app and have to add Vitest to it.

The problem I'm facing is that globals are injected using the inject function from @rollup/plugin-inject in my vite.config.js.

  plugins: [
    viteReact(),
    inject({
      _: 'lodash',
      __: [path.join(path.resolve(), 'src/app/core'), 'evemit'],
      moment: 'moment',
      .....
    }),
    viteCommonjs(),
  ],
}),

I understand why it is not working, inject only runs on build not in the test env But I really need to have access to those globals. Is there a way to access them, or is the only way to mock all of them one by one ?

For exemple :

__ contains a lots of helpers, like classNames (under __.cn())

So i have tried to mock a global __ like :

globalThis.__ = {
  cn: (...classes) => classes.filter(Boolean).join(' '),
  i18n: {t: (s) => s},
};

But running my tests results in a TypeError: cn is not a function

Solution

  • Mock __ as a function that returns our helper object:

    globalThis.__ = () => ({
  cn: (...classes) => classes.filter(Boolean).join(' '),
  i18n: { t: (s) => s },
});

    Now __.cn() works because __() returns an object with cn.