Bug: is config.global.components ignored by testing-lib?

[jonsalvas]

Describe the bug A clear and concise description of what the bug is.
According to the vue-test-utils documentation it is possible to register global stuff using config.global.*, so for instance with config.global.components = { HelloWorldComponent } you can make that component globally available. This works fine when using mount() from test-utils but fails when using render() from vue-testing-library (that is why I posted the bug here). Error message is such as:

[Vue warn]: Failed to resolve component: HelloWorldComponent
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <ParentComponent ref="VTU_COMPONENT" > 
  at <VTUROOT>

When adding the component directly to the global in the render() function it works, but not when setting it globally via config.global.

If this is intended that testing-library can only add the globals to the render function, it would mean I have to add the same global for every test (we have 300 tests right now). Then consider this as a feature request :-)

To Reproduce Steps to reproduce the behavior:
Here is a small reproduction project:
https://github.com/jonsalvas/testinglib-reproduce-config-global-issue

Expected behavior

All stuff registered using config.global is globally available in all components.

Screenshots

Related information:

• @testing-library/vue version: 6.5.1
• Vue version: 3.2.25
• node version: 17.8.0
• npm (or yarn) version: 8.5.5

Relevant code or config (if any)

see reproduction project

Additional context

Initially I encountered the issue when upgrading @vue/test-utils from 2.0.0-rc.17 to 2.0.0-rc.21 so I was sure it was related to that. However when downgrading I was unable to make it work again. I assume my project was broken somehow.

[drewlyton]

Thanks for posting! I'm having the same issue - would love to see a fix to this. It seems that @testing-library/vue just ignores the following setupFile for Vitest:

import { config } from '@vue/test-utils';
import { Quasar } from 'quasar';
import { afterAll, beforeAll } from 'vitest';

const globalConfigBackup = config.global;

beforeAll(() => {
  config.global.plugins.unshift([Quasar, {}]);
});

afterAll(() => {
  config.global = globalConfigBackup;
});

Same setup works fine when using mount and @vue/test-utils.

[purepear]

It looks like the problem is that when working with vitest, the project files and @testing-library/vue are importing different builds of @vue/test-utils:

• node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.mjs ESM imported in project files
• node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js CJS imported by@testing-library/vue

As a workaround I've created an alias in vite.config.ts that forces the CJS import:

// vite.config.ts
{
  ...
  resolve: {
    alias: [
      {
          find: '@vue/test-utils',
          replacement: '/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js',
        },
    ]
  }
}

There're probably better ways to to do this but ideally @testing-library/vue adds ESM support.
(please let us know if you know of a better way to deal with this)

[AnnaYuS]

It would be really nice to fix this one. None of the setup files for vitest work without the workaround suggested by @purepear (using @testing-library/vue@7.0.0)

[distor-sil3nt]

I'm having the same issue. Both config.global.plugins and config.global.mocks don't seem to work due to a lack of ESM support by Testing Library mentioned above by @purepear. This should be resolved as soon as possible.

[tomschulze]

i am facing the same issue with "@testing-library/vue": "^7.0.0" @purepear thank you for sharing your workaround!

[dspinov]

I'm having the same issue. config.global.plugins option doesn't work even with @purepear solution.

vue-test-utils: 2.4.1
vue-testing-library: 7.0.0
vitest: 0.33
node: 20.5

[pavitra-infocusp]

Global settings for Vue can be setup using @vue/test-utils.

// vitest.setup.ts
import Antd from 'ant-design-vue';
import { config } from '@vue/test-utils';
import '@testing-library/jest-dom';

config.global.plugins = [
    Antd
]

[rijenkii]

I just use this instead of render from @testing-library/vue:

import type { VueWrapper } from "@vue/test-utils";
import { mount } from "@vue/test-utils";
import type { Component } from "vue";

const mountedWrappers = new Set<VueWrapper>();

export function render(Component: Component) {
  const wrapper = mount(Component, { attachTo: document.body });
  mountedWrappers.add(wrapper);
}

function cleanup() {
  mountedWrappers.forEach((wrapper) => {
    document.body.removeChild(wrapper.element.parentNode);
    wrapper.unmount();
    mountedWrappers.delete(wrapper);
  });
}

afterEach(cleanup);

It's a minimalistic copy of https://github.com/testing-library/vue-testing-library/blob/d46ed8f757e77fe85b369847c21d394bb9706066/src/render.js.

ESM support is seemingly not a priority for testing-library, since this issue and #292 have been ignored for almost 3 years.