diff --git a/packages/x-components/src/components/animations/__tests__/create-directional-animation-factory.spec.ts b/packages/x-components/src/components/animations/__tests__/create-directional-animation-factory.spec.ts
index 16f78d8752..edb88c5d53 100644
--- a/packages/x-components/src/components/animations/__tests__/create-directional-animation-factory.spec.ts
+++ b/packages/x-components/src/components/animations/__tests__/create-directional-animation-factory.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { DOMWrapper, mount } from '@vue/test-utils';
 import { getDataTestSelector } from '../../../__tests__/utils';
 import { createDirectionalAnimationFactory } from '../create-directional-animation-factory';
 
@@ -26,7 +25,7 @@ describe('testing animation abstract factory', () => {
       open(): void | Promise<void> {
         return wrapper.setProps({ open: true });
       },
-      getContentWrapper(): Wrapper<Vue> {
+      getContentWrapper(): DOMWrapper<Element> {
         return wrapper.find(getDataTestSelector('animation-content'));
       }
     };
@@ -43,5 +42,5 @@ describe('testing animation abstract factory', () => {
 
 interface RenderApi {
   open: () => void | Promise<void>;
-  getContentWrapper: () => Wrapper<Vue>;
+  getContentWrapper: () => DOMWrapper<Element>;
 }
diff --git a/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts b/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
index 91a642a215..33a09a2542 100644
--- a/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
+++ b/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
@@ -1,23 +1,18 @@
 import { mount } from '@vue/test-utils';
-import { defineComponent, provide, ref } from 'vue';
+import { defineComponent, provide, ref, h, Transition } from 'vue';
 import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
 import { useDisableAnimation } from '../use-disable-animation';
-
+import { TransitionGroup } from 'vue';
 const Provider = defineComponent({
   props: {
     disableAnimation: Boolean
   },
-  setup(props) {
+  setup(props, { slots }) {
     provide(DISABLE_ANIMATIONS_KEY as string, ref(props.disableAnimation));
-  },
-  render(h) {
-    return this.$slots.default?.[0] ?? h();
+    return () => (slots.default ? slots.default() : h('div'));
   }
 });
 
-/**
- * Animation component.
- */
 const Animation = defineComponent({
   setup() {
     return useDisableAnimation('x-animation');
@@ -29,12 +24,6 @@ const Animation = defineComponent({
   `
 });
 
-/**
- * Function that returns an Animation wrapper.
- *
- * @param disableAnimation - Flag to disable the animation.
- * @returns Animation wrapper.
- */
 function renderDisableAnimation({ disableAnimation = true }: DisableAnimationOptions = {}) {
   const wrapper = mount({
     template: `
@@ -51,25 +40,25 @@ function renderDisableAnimation({ disableAnimation = true }: DisableAnimationOpt
   });
 
   return {
-    wrapper
+    wrapper,
+    transitionGroup: wrapper.findComponent(TransitionGroup)
   };
 }
 
 describe('testing disable animation', () => {
   it('should disable the animations', () => {
-    const { wrapper } = renderDisableAnimation();
+    const { transitionGroup } = renderDisableAnimation();
 
-    expect(wrapper.attributes('name')).toBe('__no-animation__');
+    expect(transitionGroup.attributes('name')).toBe('__no-animation__');
   });
 
   it('should enable the animations', () => {
-    const { wrapper } = renderDisableAnimation({ disableAnimation: false });
+    const { transitionGroup } = renderDisableAnimation({ disableAnimation: false });
 
-    expect(wrapper.attributes('name')).toBe('x-animation');
+    expect(transitionGroup.attributes('name')).toBe('x-animation');
   });
 });
 
 interface DisableAnimationOptions {
-  /** Flag to disable the animation. */
   disableAnimation?: boolean;
 }
diff --git a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts
index 9333b07a2e..44398a9071 100644
--- a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts
+++ b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts
@@ -1,17 +1,19 @@
-import { mount } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XPlugin } from '../../../plugins/x-plugin';
 import BaseColumnPickerDropdown from '../base-column-picker-dropdown.vue';
+import { XDummyBus } from '../../../__tests__/bus.dummy';
+let bus = new XDummyBus();
 
 function render({
   selectedColumns,
   columns = [2, 4, 6],
   template = `
     <BaseColumnPickerDropdown
+      @update:modelValue="col => selectedColumns = col"
       :columns="columns"
       :modelValue="selectedColumns"
-      @update:modelValue="col => selectedColumns = col"
     >
       <template #item="{ item, isSelected, isHighlighted }">
         <span v-if="isHighlighted">🟢</span>
@@ -20,26 +22,28 @@ function render({
       </template>
     </BaseColumnPickerDropdown>`
 }: { selectedColumns?: number; columns?: number[]; template?: string } = {}) {
-  const [, localVue] = installNewXPlugin();
-
-  const mountComponent = (options: { selectedColumns?: number } = {}) =>
-    mount(
+  const mountComponent = (options: { selectedColumns?: number } = {}): VueWrapper => {
+    return mount(
       {
-        components: { BaseColumnPickerDropdown },
-        template,
-        data: () => ({
-          columns,
-          selectedColumns: options.selectedColumns ?? selectedColumns
-        })
+        components: {
+          BaseColumnPickerDropdown
+        },
+        data() {
+          return {
+            columns,
+            selectedColumns: options.selectedColumns ?? selectedColumns
+          };
+        },
+        template
       },
       {
-        propsData: { columns },
-        localVue
+        global: { plugins: [installNewXPlugin({}, bus)] }
       }
     );
+  };
 
   const columnPickerDropdownWrapper = mountComponent();
-  const wrapper = columnPickerDropdownWrapper.findComponent(BaseColumnPickerDropdown);
+  const wrapper: VueWrapper = columnPickerDropdownWrapper.findComponent(BaseColumnPickerDropdown);
   const toggleWrapper = wrapper.find(getDataTestSelector('dropdown-toggle'));
   const toggleDropdown = async () => await toggleWrapper.trigger('click');
 
@@ -53,18 +57,22 @@ function render({
     },
     toggleDropdown,
     setWrapperSelectedColumns: async (column: number) => {
-      await wrapper.setData({ selectedColumns: column });
+      await columnPickerDropdownWrapper.setData({ selectedColumns: column });
       await nextTick();
     },
     clickNthItem: async (nth: number) => {
       await toggleDropdown();
-      await wrapper.findAll(getDataTestSelector('dropdown-item')).at(nth).trigger('click');
+      await wrapper.findAll(getDataTestSelector('dropdown-item')).at(nth)?.trigger('click');
       await nextTick();
     }
   } as const;
 }
 
 describe('testing BaseColumnPickerDropdown component', () => {
+  beforeEach(() => {
+    bus = new XDummyBus();
+  });
+
   it('emits ColumnsNumberProvided event with the column number on init', () => {
     render();
 
@@ -163,9 +171,9 @@ describe('testing BaseColumnPickerDropdown component', () => {
 
     const itemWrapperArray = wrapper.findAll(getDataTestSelector('dropdown-item'));
 
-    expect(itemWrapperArray.at(0).text()).toEqual('🟢 ✅ 2');
-    expect(itemWrapperArray.at(1).text()).toEqual('4');
-    expect(itemWrapperArray.at(2).text()).toEqual('6');
+    expect(itemWrapperArray.at(0)?.text()).toEqual('🟢✅2');
+    expect(itemWrapperArray.at(1)?.text()).toEqual('4');
+    expect(itemWrapperArray.at(2)?.text()).toEqual('6');
   });
 
   it('renders the item slot as toggle when its slot is not defined', () => {
diff --git a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts
index 9c852c1936..e329eabc18 100644
--- a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts
+++ b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts
@@ -1,9 +1,10 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XPlugin } from '../../../plugins/x-plugin';
 import BaseColumnPickerList from '../base-column-picker-list.vue';
-
+import { XDummyBus } from '../../../__tests__/bus.dummy';
+let bus = new XDummyBus();
 function render({
   selectedColumns,
   columns,
@@ -22,8 +23,6 @@ function render({
       ${customItemSlot ?? ''}
    </BaseColumnPickerList>`
 }: BaseColumnPickerListRenderOptions = {}) {
-  const [, localVue] = installNewXPlugin();
-
   function mountComponent(options: { selectedColumns?: number } = {}) {
     return mount(
       {
@@ -36,8 +35,8 @@ function render({
         })
       },
       {
-        propsData: { columns, buttonClass },
-        localVue
+        props: { columns, buttonClass },
+        global: { plugins: [installNewXPlugin({}, bus)] }
       }
     );
   }
@@ -57,7 +56,7 @@ function render({
       await nextTick();
     },
     clickNthItem: async (nth: number) => {
-      await wrapper.findAll(getDataTestSelector('column-picker-button')).at(nth).trigger('click');
+      await wrapper.findAll(getDataTestSelector('column-picker-button')).at(nth)?.trigger('click');
       await nextTick();
     },
     getSelectedItem: () => wrapper.find('[aria-pressed=true]')
@@ -65,6 +64,9 @@ function render({
 }
 
 describe('testing BaseColumnPickerList component', () => {
+  beforeEach(() => {
+    bus = new XDummyBus();
+  });
   it('emits ColumnsNumberProvided event with the column number on init', () => {
     render({ columns: [1, 3, 6] });
 
@@ -100,7 +102,7 @@ describe('testing BaseColumnPickerList component', () => {
       eventPayload: columns[index],
       metadata: {
         moduleName: null, // no module registered for this base component
-        target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index).element,
+        target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index)?.element,
         location: 'none',
         replaceable: true
       }
@@ -114,7 +116,7 @@ describe('testing BaseColumnPickerList component', () => {
       eventPayload: columns[index],
       metadata: {
         moduleName: null, // no module registered for this base component
-        target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index).element,
+        target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index)?.element,
         location: 'none',
         replaceable: true
       }
@@ -127,7 +129,7 @@ describe('testing BaseColumnPickerList component', () => {
     const columnPickerListWrapper = wrapper.findAll(getDataTestSelector('column-picker-button'));
 
     columns.forEach((column, index) => {
-      expect(columnPickerListWrapper.at(index).classes()).toContain(
+      expect(columnPickerListWrapper.at(index)?.classes()).toContain(
         `x-column-picker-list__button--${column}-cols`
       );
     });
@@ -144,7 +146,7 @@ describe('testing BaseColumnPickerList component', () => {
 
     expect(columnsSlots).toHaveLength(columns.length);
     columns.forEach((column, index) => {
-      expect(columnsSlots.at(index).text()).toEqual(column.toString());
+      expect(columnsSlots.at(index)?.text()).toEqual(column.toString());
     });
   });
 
@@ -173,7 +175,7 @@ describe('testing BaseColumnPickerList component', () => {
   });
 
   it('updates selected value on fresh mounts correctly', async () => {
-    const getSelectedItem = (wrapper: Wrapper<Vue>): string =>
+    const getSelectedItem = (wrapper: VueWrapper): string =>
       wrapper.get('[aria-pressed=true]').text();
     const { wrapper, mountComponent, clickNthItem, setWrapperSelectedColumns } = render({
       columns: [4, 6, 0]
@@ -210,7 +212,7 @@ describe('testing BaseColumnPickerList component', () => {
       buttonClass: 'custom-class'
     });
 
-    wrapper.findAll('button').wrappers.forEach(button => {
+    wrapper.findAll('button').forEach(button => {
       expect(button.classes()).toContain('custom-class');
     });
   });
diff --git a/packages/x-components/src/components/currency/__tests__/base-currency.spec.ts b/packages/x-components/src/components/currency/__tests__/base-currency.spec.ts
index 040abb128d..20192918b3 100644
--- a/packages/x-components/src/components/currency/__tests__/base-currency.spec.ts
+++ b/packages/x-components/src/components/currency/__tests__/base-currency.spec.ts
@@ -1,8 +1,8 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { defineComponent, provide, ref } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent, provide, ref } from 'vue';
 import BaseCurrency from '../base-currency.vue';
 
-function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapper<Vue> {
+function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): VueWrapper {
   return mount(
     {
       components: { BaseCurrency },
@@ -10,7 +10,7 @@ function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapp
       props: ['value', 'format']
     },
     {
-      propsData: {
+      props: {
         value,
         format
       }
@@ -18,7 +18,7 @@ function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapp
   );
 }
 
-function renderInjectedBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapper<Vue> {
+function renderInjectedBaseCurrency({ value, format }: RenderBaseCurrencyOptions): VueWrapper {
   const Provider = defineComponent({
     setup() {
       const providedFormat = ref('$i,iii.ddd');
diff --git a/packages/x-components/src/components/modals/__tests__/base-events-close-button.spec.ts b/packages/x-components/src/components/modals/__tests__/base-events-close-button.spec.ts
index 2888480826..f53a9beebb 100644
--- a/packages/x-components/src/components/modals/__tests__/base-events-close-button.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/base-events-close-button.spec.ts
@@ -1,8 +1,9 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent, nextTick } from 'vue';
 import { installNewXPlugin } from '../../../__tests__/utils';
 import { XEvent } from '../../../wiring/events.types';
 import BaseEventsModalClose from '../base-events-modal-close.vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * Renders the {@link BaseEventsModalClose} with the provided options.
@@ -11,36 +12,39 @@ import BaseEventsModalClose from '../base-events-modal-close.vue';
  * @returns An small API to test the component.
  */
 function renderBaseEventsModalClose({
-  template = '<BaseEventsModalClose v-bind="$attrs"/>',
+  template = '<BaseEventsModalClose :closingEvent="closingEvent"/>',
   closingEvent
 }: RenderBaseEventsModalCloseOptions = {}): RenderBaseEventsModalCloseAPI {
-  const [, localVue] = installNewXPlugin();
-  const containerWrapper = mount(
-    {
-      components: {
-        BaseEventsModalClose
-      },
-      template
+  const modalComponent = defineComponent({
+    components: {
+      BaseEventsModalClose
     },
-    { propsData: { closingEvent }, localVue }
-  );
-
-  const wrapper = containerWrapper.findComponent(BaseEventsModalClose);
+    props: {
+      closingEvent: {
+        type: String
+      }
+    },
+    template
+  });
 
+  const wrapper = mount(modalComponent, {
+    global: { plugins: [installNewXPlugin()] },
+    props: { closingEvent }
+  });
   return {
-    wrapper,
+    wrapper: wrapper.findComponent(BaseEventsModalClose),
     async click() {
-      wrapper.trigger('click');
-      await localVue.nextTick();
+      await wrapper.trigger('click');
+      await nextTick();
     }
   };
 }
 
 describe('testing Close Button component', () => {
   it('emits UserClickedCloseEventsModal by default when clicked', async () => {
-    const { wrapper, click } = renderBaseEventsModalClose();
+    const { click } = renderBaseEventsModalClose();
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedCloseEventsModal').subscribe(listener);
+    XPlugin.bus.on('UserClickedCloseEventsModal').subscribe(listener);
 
     await click();
 
@@ -48,11 +52,11 @@ describe('testing Close Button component', () => {
   });
 
   it('emits the defined closingEvent when clicked', async () => {
-    const { wrapper, click } = renderBaseEventsModalClose({
+    const { click } = renderBaseEventsModalClose({
       closingEvent: 'UserClickedAFilter'
     });
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedAFilter').subscribe(listener);
+    XPlugin.bus.on('UserClickedAFilter').subscribe(listener);
 
     await click();
 
@@ -77,7 +81,7 @@ interface RenderBaseEventsModalCloseOptions {
 
 interface RenderBaseEventsModalCloseAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Clicks the button. */
   click: () => Promise<void>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/base-events-modal-open-button.spec.ts b/packages/x-components/src/components/modals/__tests__/base-events-modal-open-button.spec.ts
index 6e54e1ccdf..862772b14c 100644
--- a/packages/x-components/src/components/modals/__tests__/base-events-modal-open-button.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/base-events-modal-open-button.spec.ts
@@ -1,9 +1,9 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent, nextTick } from 'vue';
 import { installNewXPlugin } from '../../../__tests__/utils';
 import { XEvent } from '../../../wiring/events.types';
 import BaseEventsModalOpen from '../base-events-modal-open.vue';
-
+import { XPlugin } from '../../../plugins/index';
 /**
  * Renders the {@link BaseEventsModalOpen} with the provided options.
  *
@@ -11,36 +11,39 @@ import BaseEventsModalOpen from '../base-events-modal-open.vue';
  * @returns An small API to test the component.
  */
 function renderBaseEventsModalOpen({
-  template = '<BaseEventsModalOpen v-bind="$attrs"/>',
+  template = '<BaseEventsModalOpen :openingEvent="openingEvent"/>',
   openingEvent
 }: RenderBaseEventsModalOpenOptions = {}): RenderBaseEventsModalOpenAPI {
-  const [, localVue] = installNewXPlugin();
-  const containerWrapper = mount(
-    {
-      components: {
-        BaseEventsModalOpen
-      },
-      template
+  const containerWrapper = defineComponent({
+    components: {
+      BaseEventsModalOpen
     },
-    { propsData: { openingEvent }, localVue }
-  );
-
-  const wrapper = containerWrapper.findComponent(BaseEventsModalOpen);
+    props: {
+      openingEvent: {
+        type: String
+      }
+    },
+    template
+  });
+  const wrapper = mount(containerWrapper, {
+    global: { plugins: [installNewXPlugin()] },
+    props: { openingEvent }
+  });
 
   return {
-    wrapper,
+    wrapper: wrapper.findComponent(BaseEventsModalOpen),
     async click() {
       wrapper.trigger('click');
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
 
 describe('testing Open Button component', () => {
   it('emits UserClickedOpenX by default when clicked', async () => {
-    const { wrapper, click } = renderBaseEventsModalOpen();
+    const { click } = renderBaseEventsModalOpen();
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedOpenEventsModal').subscribe(listener);
+    XPlugin.bus.on('UserClickedOpenEventsModal').subscribe(listener);
 
     await click();
 
@@ -48,11 +51,11 @@ describe('testing Open Button component', () => {
   });
 
   it('emits the defined openingEvent when clicked', async () => {
-    const { wrapper, click } = renderBaseEventsModalOpen({
+    const { click } = renderBaseEventsModalOpen({
       openingEvent: 'UserClickedAFilter'
     });
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedAFilter').subscribe(listener);
+    XPlugin.bus.on('UserClickedAFilter').subscribe(listener);
 
     await click();
 
@@ -61,7 +64,7 @@ describe('testing Open Button component', () => {
 
   it('renders the default slot contents', () => {
     const { wrapper } = renderBaseEventsModalOpen({
-      template: '<BaseEventsModalOpen v-bind="$attrs">Open</BaseEventsModalOpen>'
+      template: '<BaseEventsModalOpen :openingEvent="openingEvent">Open</BaseEventsModalOpen>'
     });
 
     expect(wrapper.text()).toEqual('Open');
@@ -77,7 +80,7 @@ interface RenderBaseEventsModalOpenOptions {
 
 interface RenderBaseEventsModalOpenAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Clicks the button. */
   click: () => Promise<void>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/base-events-modal.spec.ts b/packages/x-components/src/components/modals/__tests__/base-events-modal.spec.ts
index bb00b4caac..39fa42acd6 100644
--- a/packages/x-components/src/components/modals/__tests__/base-events-modal.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/base-events-modal.spec.ts
@@ -1,10 +1,10 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseEventsModal from '../base-events-modal.vue';
 import { PropsWithType } from '../../../utils/types';
 import { XEventsTypes, XEvent } from '../../../wiring/events.types';
-
+import { XPlugin } from '../../../plugins/index';
+import { nextTick } from 'vue';
 /**
  * Mounts a {@link BaseEventsModal} component with the provided options and offers an API to easily
  * test it.
@@ -19,17 +19,16 @@ function mountBaseEventsModal({
   eventsToOpenModal,
   contentClass
 }: MountBaseEventsModalOptions = {}): MountBaseEventsModalAPI {
-  const [, localVue] = installNewXPlugin();
   const parent = document.createElement('div');
   document.body.appendChild(parent);
 
   const wrapper = mount(BaseEventsModal, {
     attachTo: parent,
-    localVue,
-    propsData: { bodyClickEvent, eventsToCloseModal, eventsToOpenModal, contentClass },
+    props: { bodyClickEvent, eventsToCloseModal, eventsToOpenModal, contentClass },
     slots: {
       default: defaultSlot
-    }
+    },
+    global: { plugins: [installNewXPlugin()] }
   });
 
   return {
@@ -38,8 +37,8 @@ function mountBaseEventsModal({
       await wrapper.find(getDataTestSelector('modal-overlay'))?.trigger('click');
     },
     async emit(event) {
-      wrapper.vm.$x.emit(event);
-      await localVue.nextTick();
+      XPlugin.bus.emit(event);
+      await nextTick();
     },
     getModalContent() {
       return wrapper.find(getDataTestSelector('modal-content'));
@@ -47,7 +46,7 @@ function mountBaseEventsModal({
     async fakeFocusIn() {
       jest.runAllTimers();
       document.body.dispatchEvent(new FocusEvent('focusin'));
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
@@ -115,9 +114,9 @@ describe('testing Base Events Modal  component', () => {
     });
 
     const openListener = jest.fn();
-    wrapper.vm.$x.on(eventToOpen).subscribe(openListener);
+    XPlugin.bus.on(eventToOpen).subscribe(openListener);
     const closeListener = jest.fn();
-    wrapper.vm.$x.on(eventToClose).subscribe(closeListener);
+    XPlugin.bus.on(eventToClose).subscribe(closeListener);
 
     await emit(eventToOpen);
     expect(getModalContent().exists()).toBe(true);
@@ -135,7 +134,7 @@ describe('testing Base Events Modal  component', () => {
       eventsToCloseModal: [bodyClickEvent]
     });
     const listener = jest.fn();
-    wrapper.vm.$x.on(bodyClickEvent).subscribe(listener);
+    XPlugin.bus.on(bodyClickEvent).subscribe(listener);
 
     await emit('UserClickedOpenEventsModal');
     expect(getModalContent().exists()).toBe(true);
@@ -170,7 +169,7 @@ interface MountBaseEventsModalOptions {
 
 interface MountBaseEventsModalAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Fakes a click on the modal overlay. */
   clickModalOverlay: () => Promise<void>;
   /** Emits the provided event. */
@@ -178,5 +177,5 @@ interface MountBaseEventsModalAPI {
   /** Fakes a focusin event in another HTMLElement of the body. */
   fakeFocusIn: () => Promise<void>;
   /** Retrieves the modal content. */
-  getModalContent: () => Wrapper<Vue>;
+  getModalContent: () => DOMWrapper<Element>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/base-id-modal-close.spec.ts b/packages/x-components/src/components/modals/__tests__/base-id-modal-close.spec.ts
index 6ee98d3f9d..cc7ef01f79 100644
--- a/packages/x-components/src/components/modals/__tests__/base-id-modal-close.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/base-id-modal-close.spec.ts
@@ -1,8 +1,8 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseIdModalClose from '../base-id-modal-close.vue';
 import { XPlugin } from '../../../plugins/index';
+import { defineComponent } from 'vue';
 
 /**
  * Renders the {@link BaseIdModalClose} with the provided options.
@@ -12,25 +12,28 @@ import { XPlugin } from '../../../plugins/index';
  */
 function renderBaseIdModalClose({
   id = 'random',
-  template = `<BaseIdModalClose modalId="${id}" v-bind="$attrs"/>`
+  template = `<BaseIdModalClose modalId="${id}" :modalId="modalId"/>`
 }: RenderBaseIdModalCloseOptions = {}): RenderBaseIdModalCloseAPI {
-  const [, localVue] = installNewXPlugin();
-  const containerWrapper = mount(
-    {
-      components: {
-        BaseIdModalClose
-      },
-      template
+  const containerWrapper = defineComponent({
+    components: {
+      BaseIdModalClose
     },
-    { propsData: { modalId: id }, localVue }
-  );
+    props: {
+      modalId: {
+        type: String
+      }
+    },
+    template
+  });
 
-  const wrapper = containerWrapper.findComponent(BaseIdModalClose);
-  const modalId = wrapper.props('modalId');
+  const wrapper = mount(containerWrapper, {
+    global: { plugins: [installNewXPlugin()] },
+    props: { modalId: id }
+  });
 
   return {
-    wrapper,
-    modalId,
+    wrapper: wrapper.findComponent(BaseIdModalClose),
+    modalId: id,
     async click() {
       await wrapper.trigger('click');
     }
@@ -51,7 +54,7 @@ describe('testing Close Button component', () => {
 
   it('renders the default slot contents', () => {
     const { wrapper } = renderBaseIdModalClose({
-      template: '<BaseIdModalClose modalId="modal" v-bind="$attrs">Close</BaseIdModalClose>'
+      template: '<BaseIdModalClose modalId="modal" >Close</BaseIdModalClose>'
     });
 
     expect(wrapper.text()).toEqual('Close');
@@ -60,7 +63,7 @@ describe('testing Close Button component', () => {
   // eslint-disable-next-line max-len
   it('renders custom content replacing the default exposing the function that closes the modal', async () => {
     const { wrapper, click, modalId } = renderBaseIdModalClose({
-      template: `<BaseIdModalClose modalId="modal" v-bind="$attrs">
+      template: `<BaseIdModalClose :modalId="modalId">
                     <template #closing-element="{ closeModal }">
                       <div>
                         Close <span data-test="custom-close-modal" @click="closeModal">HERE</span>
@@ -92,7 +95,7 @@ interface RenderBaseIdModalCloseOptions {
 
 interface RenderBaseIdModalCloseAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The modal id. */
   modalId: string;
   /** Clicks the button. */
diff --git a/packages/x-components/src/components/modals/__tests__/base-id-modal-open.spec.ts b/packages/x-components/src/components/modals/__tests__/base-id-modal-open.spec.ts
index 2bcf83ed30..fcaea7e304 100644
--- a/packages/x-components/src/components/modals/__tests__/base-id-modal-open.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/base-id-modal-open.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseIdModalOpen from '../base-id-modal-open.vue';
 import { bus } from '../../../plugins/x-bus';
@@ -19,7 +18,6 @@ function renderBaseIdModalOpen({
   // Making bus not repeat subjects
   jest.spyOn(bus, 'createEmitter' as any).mockImplementation(dummyCreateEmitter.bind(bus) as any);
 
-  const [, localVue] = installNewXPlugin();
   const containerWrapper = mount(
     {
       components: {
@@ -28,8 +26,8 @@ function renderBaseIdModalOpen({
       template
     },
     {
-      propsData: { modalId: id },
-      localVue
+      props: { modalId: id },
+      global: { plugins: [installNewXPlugin()] }
     }
   );
 
@@ -100,7 +98,7 @@ interface RenderBaseIdModalOpenOptions {
 
 interface RenderBaseIdModalOpenAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The modal id. */
   modalId: string;
   /** Clicks the button. */
diff --git a/packages/x-components/src/components/modals/__tests__/base-id-modal.spec.ts b/packages/x-components/src/components/modals/__tests__/base-id-modal.spec.ts
index 8314b713d0..6cef629bd9 100644
--- a/packages/x-components/src/components/modals/__tests__/base-id-modal.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/base-id-modal.spec.ts
@@ -1,8 +1,9 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XEvent } from '../../../wiring/events.types';
 import BaseIdModal from '../base-id-modal.vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * Mounts a {@link BaseIdModal} component with the provided options and offers an API to easily
@@ -16,25 +17,24 @@ function mountBaseIdModal({
   defaultSlot = `<span data-test="default-slot">Modal: ${modalId}</span>`,
   contentClass
 }: MountBaseIdModalOptions = {}): MountBaseIdModalAPI {
-  const [, localVue] = installNewXPlugin();
   const parent = document.createElement('div');
   document.body.appendChild(parent);
 
   const wrapper = mount(BaseIdModal, {
     attachTo: parent,
-    localVue,
-    propsData: { modalId, contentClass },
+    props: { modalId, contentClass },
     slots: {
       default: defaultSlot
-    }
+    },
+    global: { plugins: [installNewXPlugin()] }
   });
 
   return {
     wrapper,
     modalId,
     async emit(event: XEvent) {
-      wrapper.vm.$x.emit(event, modalId);
-      await localVue.nextTick();
+      XPlugin.bus.emit(event, modalId);
+      await nextTick();
     },
     async click(string) {
       await wrapper.get(getDataTestSelector(string))?.trigger('click');
@@ -45,7 +45,7 @@ function mountBaseIdModal({
     async fakeFocusIn() {
       jest.runAllTimers();
       document.body.dispatchEvent(new FocusEvent('focusin'));
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
@@ -140,7 +140,7 @@ interface MountBaseIdModalOptions {
 
 interface MountBaseIdModalAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The modal id. */
   modalId: string;
   /** Emits the provided event. */
@@ -150,5 +150,5 @@ interface MountBaseIdModalAPI {
   /** Fakes a focusin event in another HTMLElement of the body. */
   fakeFocusIn: () => Promise<void>;
   /** Retrieves the modal content. */
-  getModalContent: () => Wrapper<Vue>;
+  getModalContent: () => DOMWrapper<Element>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/close-main-modal.spec.ts b/packages/x-components/src/components/modals/__tests__/close-main-modal.spec.ts
index ddb5a374d6..e87337648f 100644
--- a/packages/x-components/src/components/modals/__tests__/close-main-modal.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/close-main-modal.spec.ts
@@ -1,8 +1,9 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Vue, { defineComponent } from 'vue';
 import { AnyFunction } from '@empathyco/x-utils';
 import { installNewXPlugin } from '../../../__tests__/utils';
 import CloseMainModal from '../close-main-modal.vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * Renders the {@link CloseMainModal} with the provided options.
@@ -14,22 +15,20 @@ function renderCloseMainModal({
   template = '<CloseMainModal />',
   methods
 }: RenderCloseMainModalOptions = {}): RenderCloseMainModalAPI {
-  const [, localVue] = installNewXPlugin();
-  const containerWrapper = mount(
-    {
-      components: {
-        CloseMainModal
-      },
-      template,
-      methods
+  const containerWrapper = defineComponent({
+    components: {
+      CloseMainModal
     },
-    { localVue }
-  );
 
-  const wrapper = containerWrapper.findComponent(CloseMainModal);
+    template,
+    methods
+  });
+  const wrapper = mount(containerWrapper, {
+    global: { plugins: [installNewXPlugin()] }
+  });
 
   return {
-    wrapper,
+    wrapper: wrapper.findComponent(CloseMainModal),
     async click() {
       await wrapper.trigger('click');
     }
@@ -40,7 +39,7 @@ describe('testing Close Main Modal button component', () => {
   it('emits UserClickedCloseX by default when clicked', async () => {
     const { wrapper, click } = renderCloseMainModal();
     const onUserClickedCloseX = jest.fn();
-    wrapper.vm.$x.on('UserClickedCloseX').subscribe(onUserClickedCloseX);
+    XPlugin.bus.on('UserClickedCloseX').subscribe(onUserClickedCloseX);
 
     await click();
 
@@ -77,7 +76,7 @@ interface RenderCloseMainModalOptions {
 
 interface RenderCloseMainModalAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Clicks the button. */
   click: () => Promise<void>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/main-modal.spec.ts b/packages/x-components/src/components/modals/__tests__/main-modal.spec.ts
index 648c307273..957fc5131b 100644
--- a/packages/x-components/src/components/modals/__tests__/main-modal.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/main-modal.spec.ts
@@ -1,10 +1,10 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import MainModal from '../main-modal.vue';
 import { PropsWithType } from '../../../utils/types';
 import { XEventsTypes } from '../../../wiring/events.types';
-
+import { XPlugin } from '../../../plugins/index';
+import { defineComponent, nextTick } from 'vue';
 /**
  * Renders a {@link MainModal} component with the provided options and offers an API to easily
  * test it.
@@ -15,20 +15,21 @@ import { XEventsTypes } from '../../../wiring/events.types';
 function renderMainModal({
   template = '<MainModal/>'
 }: RenderMainModalOptions = {}): RenderMainModalAPI {
-  const [, localVue] = installNewXPlugin();
   const parent = document.createElement('div');
   document.body.appendChild(parent);
-
-  const wrapper = mount(
-    {
-      template,
-      components: { MainModal }
+  const containerWrapper = defineComponent({
+    components: {
+      MainModal
     },
-    {
-      attachTo: parent, // necessary to make the focus on body event to work in some environments.
-      localVue
-    }
-  );
+
+    template,
+    global: { plugins: [installNewXPlugin()] },
+
+    attachTo: parent // necessary to make the focus on body event to work in some environments.
+  });
+  const wrapper = mount(containerWrapper, {
+    global: { plugins: [installNewXPlugin()] }
+  });
 
   return {
     wrapper,
@@ -36,8 +37,8 @@ function renderMainModal({
       await wrapper.find(getDataTestSelector('modal-overlay'))?.trigger('click');
     },
     async emit(event) {
-      wrapper.vm.$x.emit(event);
-      await localVue.nextTick();
+      XPlugin.bus.emit(event);
+      await nextTick();
     },
     getModalContent() {
       return wrapper.find(getDataTestSelector('modal-content'));
@@ -45,7 +46,7 @@ function renderMainModal({
     async focusOutOfModal() {
       jest.runAllTimers();
       document.body.dispatchEvent(new FocusEvent('focusin'));
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
@@ -127,7 +128,7 @@ interface RenderMainModalOptions {
 
 interface RenderMainModalAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Fakes a click on the modal overlay. */
   clickModalOverlay: () => Promise<void>;
   /** Emits the provided event. */
@@ -135,5 +136,5 @@ interface RenderMainModalAPI {
   /** Fakes a focusin event in another HTMLElement of the body. */
   focusOutOfModal: () => Promise<void>;
   /** Retrieves the modal content. */
-  getModalContent: () => Wrapper<Vue>;
+  getModalContent: () => DOMWrapper<Element>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/open-main-modal.spec.ts b/packages/x-components/src/components/modals/__tests__/open-main-modal.spec.ts
index 4471a4fe8f..34db9fc1d2 100644
--- a/packages/x-components/src/components/modals/__tests__/open-main-modal.spec.ts
+++ b/packages/x-components/src/components/modals/__tests__/open-main-modal.spec.ts
@@ -1,8 +1,9 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Vue, { defineComponent } from 'vue';
 import { AnyFunction } from '@empathyco/x-utils';
 import { installNewXPlugin } from '../../../__tests__/utils';
 import OpenMainModal from '../open-main-modal.vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * Renders the {@link OpenMainModal} with the provided options.
@@ -14,22 +15,20 @@ function renderOpenMainModal({
   template = '<OpenMainModal />',
   methods
 }: RenderOpenMainModalOptions = {}): RenderOpenMainModalAPI {
-  const [, localVue] = installNewXPlugin();
-  const containerWrapper = mount(
-    {
-      components: {
-        OpenMainModal
-      },
-      template,
-      methods
+  const containerWrapper = defineComponent({
+    components: {
+      OpenMainModal
     },
-    { localVue }
-  );
+    template,
+    methods
+  });
 
-  const wrapper = containerWrapper.findComponent(OpenMainModal);
+  const wrapper = mount(containerWrapper, {
+    global: { plugins: [installNewXPlugin()] }
+  });
 
   return {
-    wrapper,
+    wrapper: wrapper.findComponent(OpenMainModal),
     async click() {
       await wrapper.trigger('click');
     }
@@ -40,7 +39,7 @@ describe('testing Open Main Modal button component', () => {
   it('emits UserClickedOpenX by default when clicked', async () => {
     const { wrapper, click } = renderOpenMainModal();
     const onUserClickedOpenX = jest.fn();
-    wrapper.vm.$x.on('UserClickedOpenX').subscribe(onUserClickedOpenX);
+    XPlugin.bus.on('UserClickedOpenX').subscribe(onUserClickedOpenX);
 
     await click();
 
@@ -77,7 +76,7 @@ interface RenderOpenMainModalOptions {
 
 interface RenderOpenMainModalAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Clicks the button. */
   click: () => Promise<void>;
 }
diff --git a/packages/x-components/src/components/panels/__tests__/base-header-toggle-panel.spec.ts b/packages/x-components/src/components/panels/__tests__/base-header-toggle-panel.spec.ts
index 3bdff9e84b..c7a373ad36 100644
--- a/packages/x-components/src/components/panels/__tests__/base-header-toggle-panel.spec.ts
+++ b/packages/x-components/src/components/panels/__tests__/base-header-toggle-panel.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector } from '../../../__tests__/utils';
 import BaseHeaderTogglePanel from '../base-header-toggle-panel.vue';
 
@@ -131,7 +130,7 @@ interface RenderBaseTogglePanelOptions {
 
 interface RenderBaseHeaderTogglePanelAPI {
   /** The Vue testing utils wrapper for the {@link BaseHeaderTogglePanelComponent}. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Function that toggles panel visibility. */
   toggleOpen: () => Promise<void>;
 }
diff --git a/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel-button.spec.ts b/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel-button.spec.ts
index 89297144af..478734ae5d 100644
--- a/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel-button.spec.ts
+++ b/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel-button.spec.ts
@@ -1,8 +1,10 @@
 import { AnyFunction } from '@empathyco/x-utils';
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XEvent } from '../../../wiring';
 import BaseIdTogglePanelButton from '../base-id-toggle-panel-button.vue';
+import { nextTick } from 'vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * Renders the {@link BaseIdTogglePanelButton} with the provided options.
@@ -12,15 +14,14 @@ import BaseIdTogglePanelButton from '../base-id-toggle-panel-button.vue';
  */
 function renderBaseIdToggleButton({
   panelId = 'myToggle',
-  scopedSlots = {
+  slots = {
     default: `<span data-test="default-slot">Panel: ${panelId}</span>`
   }
 }: RenderBaseIdToggleButtonOptions = {}): RenderBaseIdToggleButtonAPI {
-  const [, localVue] = installNewXPlugin();
   const containerWrapper = mount(BaseIdTogglePanelButton, {
-    localVue,
-    propsData: { panelId },
-    scopedSlots
+    props: { panelId },
+    global: { plugins: [installNewXPlugin()] },
+    slots
   });
 
   const wrapper = containerWrapper.findComponent(BaseIdTogglePanelButton);
@@ -32,8 +33,8 @@ function renderBaseIdToggleButton({
       await wrapper.trigger('click');
     },
     async emit(event: XEvent) {
-      wrapper.vm.$x.emit(event, true, { id: panelId });
-      await localVue.nextTick();
+      XPlugin.bus.emit(event, true, { id: panelId, moduleName: null });
+      await nextTick();
     }
   };
 }
@@ -42,7 +43,7 @@ describe('testing BaseIdTogglePanelButton component', () => {
   it('emits UserClickedPanelToggleButton with the panel id as payload', async () => {
     const { wrapper, panelId, click } = renderBaseIdToggleButton();
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedPanelToggleButton').subscribe(listener);
+    XPlugin.bus.on('UserClickedPanelToggleButton').subscribe(listener);
 
     await click();
 
@@ -52,7 +53,7 @@ describe('testing BaseIdTogglePanelButton component', () => {
 
   it('renders a custom slot content', () => {
     const { wrapper } = renderBaseIdToggleButton({
-      scopedSlots: { default: `<span data-test="custom-slot">Custom slot</span>` }
+      slots: { default: `<span data-test="custom-slot">Custom slot</span>` }
     });
 
     expect(wrapper.find(getDataTestSelector('custom-slot')).text()).toEqual('Custom slot');
@@ -60,7 +61,7 @@ describe('testing BaseIdTogglePanelButton component', () => {
 
   it('renders a custom slot using the isPanelOpen property', async () => {
     const { wrapper, emit } = renderBaseIdToggleButton({
-      scopedSlots: {
+      slots: {
         default: `
           <template #default="{ isPanelOpen }">
             <span data-test="custom-slot" v-if="isPanelOpen">Close aside</span>
@@ -82,12 +83,12 @@ interface RenderBaseIdToggleButtonOptions {
   /** Id of the panel to toggle. */
   panelId?: string;
   /** The scoped slots to render. */
-  scopedSlots?: Record<string, string | AnyFunction>;
+  slots?: Record<string, string | AnyFunction>;
 }
 
 interface RenderBaseIdToggleButtonAPI {
   /** The wrapper for the toggle button component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The panel id. */
   panelId: string;
   /** Emits the provided event. */
diff --git a/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel.spec.ts b/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel.spec.ts
index 7e08c22bc3..b32cc25f77 100644
--- a/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel.spec.ts
+++ b/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel.spec.ts
@@ -5,21 +5,21 @@
  * @param options - The options to render the component with.
  * @returns An API to test the component.
  */
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XEvent } from '../../../wiring';
 import BaseIdTogglePanel from '../base-id-toggle-panel.vue';
+import { nextTick } from 'vue';
+import { XPlugin } from '../../../plugins/index';
 
 function mountBaseIdTogglePanel({
   panelId = 'myToggle',
   defaultSlot = `<span data-test="default-slot">Panel: ${panelId}</span>`,
   startOpen = true
 }: MountBaseIdToggleOptions = {}): MountBaseIdTogglePanelAPI {
-  const [, localVue] = installNewXPlugin();
   const wrapper = mount(BaseIdTogglePanel, {
-    localVue,
-    propsData: { panelId, startOpen },
+    props: { panelId, startOpen },
+    global: { plugins: [installNewXPlugin()] },
     slots: {
       default: defaultSlot
     }
@@ -31,8 +31,8 @@ function mountBaseIdTogglePanel({
     panelId,
     baseTogglePanelWrapper,
     async emit(event: XEvent) {
-      wrapper.vm.$x.emit(event, panelId);
-      await localVue.nextTick();
+      XPlugin.bus.emit(event, panelId);
+      await nextTick();
     }
   };
 }
@@ -76,7 +76,7 @@ describe('testing BaseIdTogglePanel component', () => {
 
 interface MountBaseIdTogglePanelAPI {
   /** The wrapper for the panel toggle component. */
-  baseTogglePanelWrapper: Wrapper<Vue>;
+  baseTogglePanelWrapper: VueWrapper;
   /** Emits the provided event. */
   emit: (event: XEvent) => Promise<void>;
   /** The panel id. */
diff --git a/packages/x-components/src/components/panels/__tests__/base-tabs-panel.spec.ts b/packages/x-components/src/components/panels/__tests__/base-tabs-panel.spec.ts
index 5b32d0f445..2167f6f926 100644
--- a/packages/x-components/src/components/panels/__tests__/base-tabs-panel.spec.ts
+++ b/packages/x-components/src/components/panels/__tests__/base-tabs-panel.spec.ts
@@ -1,7 +1,7 @@
-import Vue from 'vue';
-import { createLocalVue, mount, Wrapper, WrapperArray } from '@vue/test-utils';
+import { mount, VueWrapper, DOMWrapper } from '@vue/test-utils';
 import { getDataTestSelector } from '../../../__tests__/utils';
 import BaseTabsPanel from '../base-tabs-panel.vue';
+import { nextTick } from 'vue';
 
 /**
  * Function that returns a BaseTabsPanel wrapper. The animation prop is not
@@ -21,11 +21,8 @@ function renderBaseTabsPanel({
   tabClass,
   tabsListClass
 }: RenderBaseTabsPanelOptions = {}): RenderBaseTabsPanelAPI {
-  const localVue = createLocalVue();
-
   const wrapper = mount(BaseTabsPanel, {
-    localVue,
-    propsData: {
+    props: {
       activeTabClass,
       allowTabDeselect,
       contentClass,
@@ -33,7 +30,7 @@ function renderBaseTabsPanel({
       tabClass,
       tabsListClass
     },
-    scopedSlots: {
+    slots: {
       ...slots,
       ...tabs
     }
@@ -42,8 +39,8 @@ function renderBaseTabsPanel({
   return {
     wrapper,
     clickNthTab: (nth: number) => {
-      wrapper.findAll(getDataTestSelector('base-tabs-panel-button')).at(nth).trigger('click');
-      return localVue.nextTick();
+      wrapper.findAll(getDataTestSelector('base-tabs-panel-button')).at(nth)?.trigger('click');
+      return nextTick();
     },
     getBaseTabsPanel: () => wrapper.find(getDataTestSelector('base-tabs-panel')),
     getTabPanel: () => wrapper.find(getDataTestSelector('base-tabs-panel-content')),
@@ -55,7 +52,6 @@ function renderBaseTabsPanel({
 describe('testing BaseTabsPanel', () => {
   it('does not render anything when no tabs are defined in the template', () => {
     const { getBaseTabsPanel } = renderBaseTabsPanel();
-
     expect(getBaseTabsPanel().exists()).toBe(false);
   });
 
@@ -140,7 +136,7 @@ describe('testing BaseTabsPanel', () => {
     });
 
     expect(getTabsButtons()).toHaveLength(1);
-    expect(getTabsButtons().at(0).text()).toBe('summer');
+    expect(getTabsButtons().at(0)?.text()).toBe('summer');
   });
 
   it('renders a custom `tab` slot properly', async () => {
@@ -158,11 +154,11 @@ describe('testing BaseTabsPanel', () => {
     });
 
     expect(getTabsButtons()).toHaveLength(1);
-    expect(getTabsButtons().at(0).text()).toBe('custom summer tab');
+    expect(getTabsButtons().at(0)?.text()).toBe('custom summer tab');
 
     // Select first tab
     await clickNthTab(0);
-    expect(getTabsButtons().at(0).text()).toBe('custom summer tab ✅');
+    expect(getTabsButtons().at(0)?.text()).toBe('custom summer tab ✅');
   });
 
   it('renders a custom `tab-content` slot properly', async () => {
@@ -178,11 +174,11 @@ describe('testing BaseTabsPanel', () => {
     });
 
     expect(getTabsButtons()).toHaveLength(1);
-    expect(getTabsButtons().at(0).text()).toBe('custom summer tab content');
+    expect(getTabsButtons().at(0)?.text()).toBe('custom summer tab content');
 
     // Select first tab
     await clickNthTab(0);
-    expect(getTabsButtons().at(0).text()).toBe('custom summer tab content ✅');
+    expect(getTabsButtons().at(0)?.text()).toBe('custom summer tab content ✅');
   });
 
   it('changes the selected tab on click', async () => {
@@ -197,13 +193,13 @@ describe('testing BaseTabsPanel', () => {
     });
 
     // First tab is selected initially
-    expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
-    expect(getTabsButtons().at(0).element).toHaveAttribute('aria-selected', 'true');
+    expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
+    expect(getTabsButtons().at(0)?.element).toHaveAttribute('aria-selected', 'true');
 
     // Select third tab
     await clickNthTab(2);
-    expect(getTabsButtons().at(2).element).toHaveClass('selected-tab');
-    expect(getTabsButtons().at(2).element).toHaveAttribute('aria-selected', 'true');
+    expect(getTabsButtons().at(2)?.element).toHaveClass('selected-tab');
+    expect(getTabsButtons().at(2)?.element).toHaveAttribute('aria-selected', 'true');
 
     // The third panel is the rendered one
     expect(getTabPanel().text()).toBe('Top Outlet sales');
@@ -221,13 +217,13 @@ describe('testing BaseTabsPanel', () => {
     });
 
     // First tab is selected initially
-    expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
-    expect(getTabsButtons().at(0).element).toHaveAttribute('aria-selected', 'true');
+    expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
+    expect(getTabsButtons().at(0)?.element).toHaveAttribute('aria-selected', 'true');
 
     // Select again first tab
     await clickNthTab(0);
-    expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
-    expect(getTabsButtons().at(0).element).toHaveAttribute('aria-selected', 'true');
+    expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
+    expect(getTabsButtons().at(0)?.element).toHaveAttribute('aria-selected', 'true');
 
     // The first panel is the rendered one
     expect(getTabPanel().text()).toBe('Top Summer sales');
@@ -246,13 +242,13 @@ describe('testing BaseTabsPanel', () => {
     });
 
     // First tab is selected initially
-    expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
-    expect(getTabsButtons().at(0).element).toHaveAttribute('aria-selected', 'true');
+    expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
+    expect(getTabsButtons().at(0)?.element).toHaveAttribute('aria-selected', 'true');
 
     // Select again first tab
     await clickNthTab(0);
-    expect(getTabsButtons().at(0).element).not.toHaveClass('selected-tab');
-    expect(getTabsButtons().at(0).element).not.toHaveAttribute('aria-selected', 'true');
+    expect(getTabsButtons().at(0)?.element).not.toHaveClass('selected-tab');
+    expect(getTabsButtons().at(0)?.element).not.toHaveAttribute('aria-selected', 'true');
 
     // The panel is not rendered
     expect(getTabPanel().exists()).toBe(false);
@@ -271,8 +267,8 @@ describe('testing BaseTabsPanel', () => {
       tabsListClass: 'tabs-list'
     });
 
-    expect(getTabsButtons().at(0).element).toHaveClass('selected-tab');
-    expect(getTabsButtons().at(1).element).toHaveClass('tab-button');
+    expect(getTabsButtons().at(0)?.element).toHaveClass('selected-tab');
+    expect(getTabsButtons().at(1)?.element).toHaveClass('tab-button');
     expect(getTabPanel().element).toHaveClass('tab-panel');
     expect(getTabsList().element).toHaveClass('tabs-list');
   });
@@ -299,15 +295,15 @@ interface RenderBaseTabsPanelOptions {
 
 interface RenderBaseTabsPanelAPI {
   /** The Vue testing utils wrapper for the {@link BaseTabsPanel}. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Clicks the nth tab button and waits for the view to update. */
   clickNthTab: (nth: number) => Promise<void>;
   /** Returns the BaseTabsPanel. */
-  getBaseTabsPanel: () => Wrapper<Vue>;
+  getBaseTabsPanel: () => DOMWrapper<Element>;
   /** Returns the selected tab panel. */
-  getTabPanel: () => Wrapper<Vue>;
+  getTabPanel: () => DOMWrapper<Element>;
   /** Returns the tabs buttons. */
-  getTabsButtons: () => WrapperArray<Vue>;
+  getTabsButtons: () => DOMWrapper<Element>[];
   /** Returns the tabs list. */
-  getTabsList: () => Wrapper<Vue>;
+  getTabsList: () => DOMWrapper<Element>;
 }
diff --git a/packages/x-components/src/components/panels/__tests__/base-toggle-panel.spec.ts b/packages/x-components/src/components/panels/__tests__/base-toggle-panel.spec.ts
index e0ff622d55..68d88e9fe0 100644
--- a/packages/x-components/src/components/panels/__tests__/base-toggle-panel.spec.ts
+++ b/packages/x-components/src/components/panels/__tests__/base-toggle-panel.spec.ts
@@ -1,5 +1,5 @@
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector } from '../../../__tests__/utils';
 import BaseTogglePanelComponent from '../base-toggle-panel.vue';
 
@@ -15,8 +15,6 @@ function renderBaseTogglePanel({
   open = true,
   template = '<BaseTogglePanel :open="openTogglePanel"></BaseTogglePanel>'
 }: RenderBaseTogglePanelOptions = {}): RenderBaseTogglePanelAPI {
-  const localVue = createLocalVue();
-
   const wrapperContainer = mount(
     {
       components: {
@@ -25,7 +23,6 @@ function renderBaseTogglePanel({
       template
     },
     {
-      localVue,
       data() {
         return { openTogglePanel: open };
       }
@@ -37,8 +34,10 @@ function renderBaseTogglePanel({
   return {
     wrapper,
     toggleOpen() {
-      wrapperContainer.setData({ openTogglePanel: !wrapperContainer.vm.$data.openTogglePanel });
-      return Vue.nextTick();
+      (wrapperContainer.vm as unknown as TogglePanelState).openTogglePanel = !(
+        wrapperContainer.vm as unknown as TogglePanelState
+      ).openTogglePanel;
+      return nextTick();
     }
   };
 }
@@ -84,7 +83,10 @@ interface RenderBaseTogglePanelOptions {
 
 interface RenderBaseTogglePanelAPI {
   /** The Vue testing utils wrapper for the {@link BaseTogglePanelComponent}. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Function that toggles panel visibility. */
   toggleOpen: () => Promise<void>;
 }
+interface TogglePanelState {
+  openTogglePanel: boolean;
+}
diff --git a/packages/x-components/src/components/result/__tests__/base-result-add-to-cart.spec.ts b/packages/x-components/src/components/result/__tests__/base-result-add-to-cart.spec.ts
index 96aa0953e4..9a6a345c4a 100644
--- a/packages/x-components/src/components/result/__tests__/base-result-add-to-cart.spec.ts
+++ b/packages/x-components/src/components/result/__tests__/base-result-add-to-cart.spec.ts
@@ -1,11 +1,12 @@
 import { Result } from '@empathyco/x-types';
 import { Dictionary } from '@empathyco/x-utils';
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper, DOMWrapper } from '@vue/test-utils';
 import { XBus } from '@empathyco/x-bus';
 import { createResultStub } from '../../../__stubs__/results-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseResultAddToCart from '../base-result-add-to-cart.vue';
 import { WireMetadata, XEventsTypes } from '../../../wiring/index';
+import { XPlugin } from '../../../plugins/index';
 
 describe('testing BaseResultAddToCart component', () => {
   function renderAddToCart({
@@ -13,12 +14,11 @@ describe('testing BaseResultAddToCart component', () => {
     template = '<BaseResultAddToCart :result="result"/>',
     methods = {}
   }: RenderAddToCartOptions): RenderAddToCartApi {
-    const [, localVue] = installNewXPlugin();
     const wrapper = mount(
       { template, data: () => ({ result }), methods },
       {
         components: { BaseResultAddToCart },
-        localVue
+        global: { plugins: [installNewXPlugin()] }
       }
     );
     return {
@@ -27,16 +27,15 @@ describe('testing BaseResultAddToCart component', () => {
           .find(getDataTestSelector('result-add-to-cart'))
           .trigger('click') as Promise<void>;
       },
-      on: wrapper.vm.$x.on,
       addToCartWrapper: wrapper.find(getDataTestSelector('result-add-to-cart'))
     };
   }
 
   it('emits UserClickedResultAddToCart when the user click on the component', () => {
     const testResult = createResultStub('My Result');
-    const { clickAddToCart, on } = renderAddToCart({ result: testResult });
+    const { clickAddToCart } = renderAddToCart({ result: testResult });
     const listener = jest.fn();
-    on('UserClickedResultAddToCart').subscribe(listener);
+    XPlugin.bus.on('UserClickedResultAddToCart').subscribe(listener);
     clickAddToCart();
     expect(listener).toHaveBeenCalledWith(testResult);
   });
@@ -90,8 +89,6 @@ interface RenderAddToCartOptions {
 interface RenderAddToCartApi {
   /** Triggers the click on the `BaseResultAddToCart`. */
   clickAddToCart: () => Promise<void>;
-  /** The `XBus.on` method to subscribe to any `XEvent`. */
-  on: XBus<XEventsTypes, WireMetadata>['on'];
   /** The `BaseResultAddToCart` wrapper to use it for testing. */
-  addToCartWrapper: Wrapper<Vue>;
+  addToCartWrapper: DOMWrapper<Element>;
 }
diff --git a/packages/x-components/src/components/result/__tests__/base-result-current-price.spec.ts b/packages/x-components/src/components/result/__tests__/base-result-current-price.spec.ts
index 39578bf2da..de86e80a0b 100644
--- a/packages/x-components/src/components/result/__tests__/base-result-current-price.spec.ts
+++ b/packages/x-components/src/components/result/__tests__/base-result-current-price.spec.ts
@@ -1,6 +1,5 @@
 import { Result } from '@empathyco/x-types';
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector } from '../../../__tests__/utils';
 import BaseCurrency from '../../currency/base-currency.vue';
 import BaseResultCurrentPrice from '../base-result-current-price.vue';
@@ -19,7 +18,7 @@ function renderBaseCurrentPrice({
   template = `<BaseResultCurrentPrice :result="result" :format="format" />`,
   result = mockedResult
 }: RenderBaseCurrentPriceOptions = {}): RenderBaseCurrentPriceAPI {
-  const wrapperComponent: ComponentOptions<Vue> = {
+  const wrapperComponent = {
     template,
     components: {
       BaseResultCurrentPrice
@@ -110,5 +109,5 @@ interface RenderBaseCurrentPriceOptions {
 
 interface RenderBaseCurrentPriceAPI {
   /** The Vue testing utils wrapper for the {@link BaseResultCurrentPrice}. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/components/result/__tests__/base-result-link.spec.ts b/packages/x-components/src/components/result/__tests__/base-result-link.spec.ts
index 355a51a73e..c9acd91584 100644
--- a/packages/x-components/src/components/result/__tests__/base-result-link.spec.ts
+++ b/packages/x-components/src/components/result/__tests__/base-result-link.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { Result } from '@empathyco/x-types';
 import { createResultStub } from '../../../__stubs__/results-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
@@ -14,11 +13,9 @@ describe('testing BaseResultLink component', () => {
   const result = createResultStub('Product 001', {
     images: ['https://picsum.photos/seed/1/200/300', 'https://picsum.photos/seed/2/200/300']
   });
-  let localVue: typeof Vue;
-  let resultLinkWrapper: Wrapper<Vue>;
+  let resultLinkWrapper: VueWrapper;
   const template = '<BaseResultLink :result="result"/>';
   beforeEach(() => {
-    [, localVue] = installNewXPlugin();
     resultLinkWrapper = mount(
       {
         components: { BaseResultLink },
@@ -26,8 +23,8 @@ describe('testing BaseResultLink component', () => {
         template
       },
       {
-        localVue,
-        propsData: { result }
+        global: { plugins: [installNewXPlugin()] },
+        props: { result }
       }
     );
   });
@@ -61,8 +58,7 @@ describe('testing BaseResultLink component', () => {
           resultClickExtraEvents: <XEvent[]>['UserClickedResultAddToCart'],
           location: <FeatureLocation>'no_query'
         },
-        localVue,
-        propsData: { result }
+        props: { result }
       }
     );
 
@@ -105,8 +101,8 @@ describe('testing BaseResultLink component', () => {
           resultClickExtraEvents: <XEvent[]>['UserClickedResultAddToCart'],
           resultLinkMetadataPerEvent: injectedResultLinkMetadataPerEvent
         },
-        localVue,
-        propsData: { result }
+
+        props: { result }
       }
     );
 
@@ -162,8 +158,7 @@ describe('testing BaseResultLink component', () => {
     };
 
     const customResultLinkWrapper = mount(wrapperComponent, {
-      localVue,
-      propsData: { result }
+      props: { result }
     });
     expect(customResultLinkWrapper.find(getDataTestSelector('result-link')).element).toBeDefined();
     expect(
diff --git a/packages/x-components/src/components/result/__tests__/base-result-previous-price.spec.ts b/packages/x-components/src/components/result/__tests__/base-result-previous-price.spec.ts
index 481baec51e..391d4dc21a 100644
--- a/packages/x-components/src/components/result/__tests__/base-result-previous-price.spec.ts
+++ b/packages/x-components/src/components/result/__tests__/base-result-previous-price.spec.ts
@@ -1,7 +1,6 @@
 import { Result } from '@empathyco/x-types';
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
-import { getDataTestSelector } from '../../../__tests__/utils';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseCurrency from '../../currency/base-currency.vue';
 import BaseResultPreviousPrice from '../base-result-previous-price.vue';
 
@@ -21,12 +20,13 @@ function renderBasePreviousPrice({
       :format="format" />`,
   result = mockedResult
 }: RenderBasePreviousPriceOptions = {}): RenderBasePreviousPriceAPI {
-  const wrapperComponent: ComponentOptions<Vue> = {
+  const wrapperComponent = {
     template,
     components: {
       BaseResultPreviousPrice
     },
-    props: ['format', 'result']
+    props: ['format', 'result'],
+    global: { plugins: [installNewXPlugin()] }
   };
 
   const wrapper = mount(wrapperComponent, {
@@ -75,7 +75,7 @@ describe('testing BaseResultPreviousPrice component', () => {
       }
     });
 
-    expect(wrapper.html()).toBe('');
+    expect(wrapper.find('.x-result-previous-price').exists()).toBe(false);
   });
 
   it('renders custom content when overriding the default slot', () => {
@@ -105,5 +105,5 @@ interface RenderBasePreviousPriceOptions {
 
 interface RenderBasePreviousPriceAPI {
   /** The Vue testing utils wrapper for the {@link BaseResultPreviousPrice}. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/components/result/__tests__/base-result-rating.spec.ts b/packages/x-components/src/components/result/__tests__/base-result-rating.spec.ts
index 77cf72c6d1..fa397f5776 100644
--- a/packages/x-components/src/components/result/__tests__/base-result-rating.spec.ts
+++ b/packages/x-components/src/components/result/__tests__/base-result-rating.spec.ts
@@ -1,5 +1,5 @@
 import { Result } from '@empathyco/x-types';
-import { mount, WrapperArray } from '@vue/test-utils';
+import { mount, DOMWrapper, VueWrapper } from '@vue/test-utils';
 import { createResultStub } from '../../../__stubs__/results-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseResultRating from '../base-result-rating.vue';
@@ -15,13 +15,11 @@ function renderBaseResultRating({
   template,
   result
 }: RenderBaseResultRatingOptions): RenderBaseResultRatingApi {
-  const [, localVue] = installNewXPlugin();
-
   const wrapper = mount(
     { template },
     {
-      localVue,
       components: { BaseResultRating },
+      global: { plugins: [installNewXPlugin()] },
       data() {
         return {
           result
@@ -31,10 +29,11 @@ function renderBaseResultRating({
   );
 
   return {
+    wrapper,
     getHtml: (): string => wrapper.html(),
-    getFilledIcons: (): WrapperArray<Vue> =>
+    getFilledIcons: (): DOMWrapper<Element>[] =>
       wrapper.find(getDataTestSelector('rating-filled')).findAll(':scope > *'),
-    getEmptyIcons: (): WrapperArray<Vue> =>
+    getEmptyIcons: (): DOMWrapper<Element>[] =>
       wrapper.find(getDataTestSelector('rating-empty')).findAll(':scope > *'),
     clickRating: async () => {
       await wrapper.findComponent(BaseResultRating).trigger('click');
@@ -67,11 +66,12 @@ describe('testing BaserResultRating component', () => {
   it('does not render anything if result has no rating', () => {
     const resultWithNoRating = createResultStub('No Rating Result', { rating: undefined });
 
-    const { getHtml } = renderBaseResultRating({
+    const { wrapper } = renderBaseResultRating({
       template: `<BaseResultRating :result="result" :max="10" />`,
       result: resultWithNoRating
     });
-    expect(getHtml()).toEqual('');
+
+    expect(wrapper.find('.x-result-rating').exists()).toBe(false);
   });
 
   it('emits event when clicked with the result as payload', async () => {
@@ -98,9 +98,11 @@ interface RenderBaseResultRatingApi {
   /** Retrieves the wrapper with the main html content. */
   getHtml: () => string;
   /** Retrieves the wrapper that matches the rating filled icons. */
-  getFilledIcons: () => WrapperArray<Vue>;
+  getFilledIcons: () => DOMWrapper<Element>[];
   /** Retrieves the wrapper that matches the rating empty icons. */
-  getEmptyIcons: () => WrapperArray<Vue>;
+  getEmptyIcons: () => DOMWrapper<Element>[];
   /** Clicks the rating icons and waits for the view to update. */
   clickRating: () => Promise<void>;
+  /** The Vue testing utils wrapper for the {@link BaseResultRating}. */
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts b/packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts
index 1cdfbe53da..e57df0030f 100644
--- a/packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts
+++ b/packages/x-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts
@@ -1,11 +1,11 @@
 import { mount } from '@vue/test-utils';
 import { Result } from '@empathyco/x-types';
-import { nextTick } from 'vue';
+import { defineComponent, nextTick } from 'vue';
 import { createResultStub } from '../../../__stubs__/index';
 import { findTestDataById, getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import ResultVariantsProvider from '../result-variants-provider.vue';
 import ResultVariantSelector from '../result-variant-selector.vue';
-import { XPlugin } from '../../../plugins/index';
+import { XPlugin } from '../../../plugins';
 
 const variants = [
   {
@@ -35,38 +35,41 @@ const render = ({
   result = {},
   autoSelectDepth = Number.POSITIVE_INFINITY
 } = {}) => {
-  installNewXPlugin();
-  const emitSpy = jest.spyOn(XPlugin.bus, 'emit');
-
-  const wrapper = mount({
+  const resultComponent = defineComponent({
+    components: {
+      ResultVariantsProvider,
+      ResultVariantSelector
+    },
+    data() {
+      return {
+        result,
+        autoSelectDepth
+      };
+    },
     template: `
       <ResultVariantsProvider
         :result="result"
         :autoSelectDepth="autoSelectDepth"
         #default="{ result: newResult }">
         ${template}
-      </ResultVariantsProvider>`,
-    components: {
-      ResultVariantsProvider,
-      ResultVariantSelector
-    },
-    data: () => ({
-      result,
-      autoSelectDepth
-    })
+      </ResultVariantsProvider>`
+  });
+
+  const wrapper = mount(resultComponent, {
+    global: { plugins: [installNewXPlugin()] }
   });
 
   return {
     wrapper: wrapper.findComponent(ResultVariantsProvider),
-    emitSpy,
+    emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
     findSelectorButtonByLevel: (level: number) =>
       findTestDataById(wrapper, 'variants-list')
         .at(level)
-        .findAll(getDataTestSelector('variant-button')),
+        ?.findAll(getDataTestSelector('variant-button')),
     findSelectorItemByLevel: (level: number) =>
       findTestDataById(wrapper, 'variants-list')
         .at(level)
-        .findAll(getDataTestSelector('variant-item')),
+        ?.findAll(getDataTestSelector('variant-item')),
     setResult: (result: Result) => {
       (wrapper.vm as any).result = result;
       return nextTick();
@@ -110,25 +113,25 @@ describe('results with variants', () => {
     expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('jacket');
     expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('');
 
-    await firstLevelVariantButtons.at(0).trigger('click');
+    await firstLevelVariantButtons?.at(0)?.trigger('click');
 
     expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('red jacket');
     expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('red-jacket-image');
 
     const secondLevelVariantButtons = findSelectorButtonByLevel(1);
 
-    await secondLevelVariantButtons.at(1).trigger('click');
+    await secondLevelVariantButtons?.at(1)?.trigger('click');
 
     expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('red jacket L');
     expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('red-jacket-image');
 
     // It won't deselect the child variant if the parent is clicked.
 
-    await firstLevelVariantButtons.at(0).trigger('click');
+    await firstLevelVariantButtons?.at(0)?.trigger('click');
 
     expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('red jacket L');
 
-    await firstLevelVariantButtons.at(1).trigger('click');
+    await firstLevelVariantButtons?.at(1)?.trigger('click');
 
     expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('blue jacket');
     expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('');
@@ -180,11 +183,11 @@ describe('results with variants', () => {
       result
     });
 
-    const firstVariant = findSelectorItemByLevel(0).at(0);
-    const secondSelectorFirstVariant = findSelectorItemByLevel(1).at(0);
+    const firstVariant = findSelectorItemByLevel(0)?.at(0);
+    const secondSelectorFirstVariant = findSelectorItemByLevel(1)?.at(0);
 
-    expect(firstVariant.element.className).toContain('--is-selected');
-    expect(secondSelectorFirstVariant.element.className).toContain('--is-selected');
+    expect(firstVariant?.element.className).toContain('--is-selected');
+    expect(secondSelectorFirstVariant?.element.className).toContain('--is-selected');
   });
 
   it('selects variants on init up to the level set in the autoSelectDepth prop', () => {
@@ -198,11 +201,11 @@ describe('results with variants', () => {
       autoSelectDepth: 1
     });
 
-    const firstVariant = findSelectorItemByLevel(0).at(0);
-    const secondSelectorFirstVariant = findSelectorItemByLevel(1).at(0);
+    const firstVariant = findSelectorItemByLevel(0)?.at(0);
+    const secondSelectorFirstVariant = findSelectorItemByLevel(1)?.at(0);
 
-    expect(firstVariant.element.className).toContain('--is-selected');
-    expect(secondSelectorFirstVariant.element.className).not.toContain('--is-selected');
+    expect(firstVariant?.element.className).toContain('--is-selected');
+    expect(secondSelectorFirstVariant?.element.className).not.toContain('--is-selected');
   });
 
   it('wont select any variant by default if autoSelectDepth is 0', () => {
@@ -257,10 +260,10 @@ describe('results with variants', () => {
 
       await firstVariantButton.trigger('click');
 
-      expect(variantWrappers.at(0).element).toHaveClass(className);
-      variantWrappers.wrappers
-        .slice(1)
-        .forEach(wrapper => expect(wrapper.element).not.toHaveClass(className));
+      expect(variantWrappers.at(0)?.element).toHaveClass(className);
+      variantWrappers.slice(1).forEach(wrapper => {
+        expect(wrapper.element.classList.contains(className)).toBe(false);
+      });
     });
 
     it('renders all the variants of each level', async () => {
@@ -286,26 +289,26 @@ describe('results with variants', () => {
 
       const firstLevelVariantButtons = findSelectorButtonByLevel(0);
 
-      expect(firstLevelVariantButtons).toHaveLength(2);
-      expect(firstLevelVariantButtons.at(0).text()).toEqual('red jacket');
-      expect(firstLevelVariantButtons.at(1).text()).toEqual('blue jacket');
+      expect(firstLevelVariantButtons)?.toHaveLength(2);
+      expect(firstLevelVariantButtons?.at(0)?.text()).toEqual('red jacket');
+      expect(firstLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket');
 
-      await firstLevelVariantButtons.at(1).trigger('click');
+      await firstLevelVariantButtons?.at(1)?.trigger('click');
 
       const secondLevelVariantButtons = findSelectorButtonByLevel(1);
 
       expect(secondLevelVariantButtons).toHaveLength(2);
-      expect(secondLevelVariantButtons.at(0).text()).toEqual('blue jacket L');
-      expect(secondLevelVariantButtons.at(1).text()).toEqual('blue jacket S');
+      expect(secondLevelVariantButtons?.at(0)?.text()).toEqual('blue jacket L');
+      expect(secondLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket S');
 
-      await secondLevelVariantButtons.at(0).trigger('click');
+      await secondLevelVariantButtons?.at(0)?.trigger('click');
 
       const thirdLevelVariantButtons = findSelectorButtonByLevel(2);
 
       expect(thirdLevelVariantButtons).toHaveLength(3);
-      expect(thirdLevelVariantButtons.at(0).text()).toEqual('blue jacket L1');
-      expect(thirdLevelVariantButtons.at(1).text()).toEqual('blue jacket L2');
-      expect(thirdLevelVariantButtons.at(1).text()).toEqual('blue jacket L2');
+      expect(thirdLevelVariantButtons?.at(0)?.text()).toEqual('blue jacket L1');
+      expect(thirdLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket L2');
+      expect(thirdLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket L2');
     });
 
     it('wont render if no result is injected', () => {
@@ -349,12 +352,12 @@ describe('results with variants', () => {
 
       expect(variants).toHaveLength(2);
 
-      expect(variants.at(0).text()).toEqual('red jacket');
-      expect(variants.at(1).text()).toEqual('blue jacket');
+      expect(variants.at(0)?.text()).toEqual('red jacket');
+      expect(variants.at(1)?.text()).toEqual('blue jacket');
 
-      await variants.at(0).trigger('click');
+      await variants.at(0)?.trigger('click');
 
-      expect(variants.at(0).element).toHaveClass('isSelected');
+      expect(variants.at(0)?.element).toHaveClass('isSelected');
     });
 
     it('exposes variant, isSelected and selectVariant in the variant slot', async () => {
@@ -375,11 +378,11 @@ describe('results with variants', () => {
 
       expect(variants).toHaveLength(2);
 
-      expect(variants.at(0).text()).toEqual('red jacket');
-      expect(variants.at(1).text()).toEqual('blue jacket');
+      expect(variants.at(0)?.text()).toEqual('red jacket');
+      expect(variants.at(1)?.text()).toEqual('blue jacket');
 
-      await variants.at(1).trigger('click');
-      expect(variants.at(1).element).toHaveClass('isSelected');
+      await variants.at(1)?.trigger('click');
+      expect(variants.at(1)?.element).toHaveClass('isSelected');
     });
 
     it('exposes variant and isSelected in the variant-content slot', async () => {
@@ -395,10 +398,10 @@ describe('results with variants', () => {
 
       expect(variants).toHaveLength(2);
 
-      await variants.at(0).trigger('click');
+      await variants.at(0)?.trigger('click');
 
-      expect(variants.at(0).text()).toContain('red jacket SELECTED!');
-      expect(variants.at(1).text()).toEqual('blue jacket');
+      expect(variants.at(0)?.text()).toContain('red jacket SELECTED!');
+      expect(variants.at(1)?.text()).toEqual('blue jacket');
     });
   });
 });
diff --git a/packages/x-components/src/components/scroll/__tests__/base-scroll.spec.ts b/packages/x-components/src/components/scroll/__tests__/base-scroll.spec.ts
index 10fd10a086..a50b2eb22f 100644
--- a/packages/x-components/src/components/scroll/__tests__/base-scroll.spec.ts
+++ b/packages/x-components/src/components/scroll/__tests__/base-scroll.spec.ts
@@ -1,7 +1,9 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XEvent } from '../../../wiring/events.types';
 import BaseScroll from '../base-scroll.vue';
+import { nextTick } from 'vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * {@link HTMLElement} `scrollTo` is not implemented in JSDOM. This function sets the `scrollTop`
@@ -22,8 +24,6 @@ async function renderBaseScroll({
   resetOnChange,
   resetOn
 }: RenderBaseScrollOptions = {}): Promise<RenderBaseScrollAPI> {
-  const [, localVue] = installNewXPlugin();
-
   const wrapperContainer = mount(
     {
       components: {
@@ -33,24 +33,23 @@ async function renderBaseScroll({
       inheritAttrs: false
     },
     {
-      propsData: {
+      global: { plugins: [installNewXPlugin()] },
+      props: {
         throttleMs,
         distanceToBottom,
         resetOnChange,
         resetOn
-      },
-      localVue
+      }
     }
   );
 
   const wrapper = wrapperContainer.findComponent(BaseScroll);
-  const scrollElement: HTMLElement = wrapperContainer.find(
-    getDataTestSelector('base-scroll')
-  ).element;
+  const scrollElement: HTMLElement = wrapperContainer.find(getDataTestSelector('base-scroll'))
+    .element as HTMLElement;
   jest.spyOn(scrollElement, 'clientHeight', 'get').mockImplementation(() => clientHeight);
   jest.spyOn(scrollElement, 'scrollHeight', 'get').mockImplementation(() => scrollHeight);
 
-  await localVue.nextTick();
+  await nextTick();
 
   return {
     wrapper,
@@ -58,7 +57,7 @@ async function renderBaseScroll({
       scrollElement.scrollTop = to;
       wrapper.trigger('scroll');
       jest.advanceTimersByTime(durationMs);
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
@@ -207,7 +206,7 @@ describe('testing Base Scroll Component', () => {
     });
     expect(wrapper.element.scrollTop).toEqual(300);
 
-    wrapper.vm.$x.emit('UserAcceptedAQuery', 'milk');
+    XPlugin.bus.emit('UserAcceptedAQuery', 'milk');
     await wrapper.vm.$nextTick();
     expect(wrapper.element.scrollTop).toEqual(0);
   });
@@ -224,7 +223,7 @@ describe('testing Base Scroll Component', () => {
     });
     expect(wrapper.element.scrollTop).toEqual(300);
 
-    wrapper.vm.$x.emit('UserAcceptedAQuery', 'milk');
+    XPlugin.bus.emit('UserAcceptedAQuery', 'milk');
     await wrapper.vm.$nextTick();
     expect(wrapper.element.scrollTop).toEqual(300);
   });
@@ -250,7 +249,7 @@ interface RenderBaseScrollOptions {
 
 interface RenderBaseScrollAPI {
   /** The wrapper for the base scroll component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Function that launch the trigger scroll. */
   scroll: (options: { to: number; durationMs: number }) => Promise<void>;
 }
diff --git a/packages/x-components/src/components/suggestions/__tests__/base-suggestion.spec.ts b/packages/x-components/src/components/suggestions/__tests__/base-suggestion.spec.ts
index fc479014b7..96fb4159d4 100644
--- a/packages/x-components/src/components/suggestions/__tests__/base-suggestion.spec.ts
+++ b/packages/x-components/src/components/suggestions/__tests__/base-suggestion.spec.ts
@@ -1,6 +1,5 @@
 import { Suggestion } from '@empathyco/x-types';
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import { createQuerySuggestion } from '../../../__stubs__/index';
 import { normalizeString } from '../../../utils/normalize';
 import { XEventsTypes } from '../../../wiring/events.types';
@@ -15,9 +14,7 @@ function renderBaseSuggestion({
   query = 'bebe',
   suggestion = createPopularSearch('bebe lloron'),
   suggestionSelectedEvents = {}
-}: BaseSuggestionOptions = {}): BaseSuggestionAPI {
-  const [, localVue] = installNewXPlugin();
-  const emit = jest.spyOn(XPlugin.bus, 'emit');
+}: BaseSuggestionOptions = {}) {
   const wrapper = mount(
     {
       components: { BaseSuggestion },
@@ -27,8 +24,8 @@ function renderBaseSuggestion({
         ':suggestion-selected-events="suggestionSelectedEvents" />'
     },
     {
-      localVue,
-      propsData: {
+      global: { plugins: [installNewXPlugin()] },
+      props: {
         query,
         suggestion,
         suggestionSelectedEvents
@@ -36,6 +33,8 @@ function renderBaseSuggestion({
     }
   );
 
+  const emit = jest.spyOn(XPlugin.bus, 'emit');
+
   const wireMetadata = expect.objectContaining<Partial<WireMetadata>>({
     target: wrapper.element
   });
@@ -171,23 +170,3 @@ interface BaseSuggestionOptions {
 
   template?: string;
 }
-
-/**
- * Test API for the {@link BaseSuggestion} component.
- */
-interface BaseSuggestionAPI {
-  /** The wrapper for base suggestion component. */
-  wrapper: Wrapper<Vue>;
-  /** The rendered suggestion. */
-  suggestion: Suggestion;
-  /** The query introduced to find the suggestion. */
-  query: string;
-  /** Metadata used to keep track of the events fired to the bus. */
-  wireMetadata: Partial<WireMetadata>;
-  /** Mock for the `$x.emit` function. Can be used to check the emitted events. */
-  emit: jest.SpyInstance;
-  /** Retrieves the last non-matching part. */
-  getEndingPart: () => Wrapper<Vue>;
-  /** When there is a query matching, retrieves the matching part of the text. */
-  getMatchingPart: () => Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/components/suggestions/__tests__/base-suggestions.spec.ts b/packages/x-components/src/components/suggestions/__tests__/base-suggestions.spec.ts
index d662413efa..0d3a382a9f 100644
--- a/packages/x-components/src/components/suggestions/__tests__/base-suggestions.spec.ts
+++ b/packages/x-components/src/components/suggestions/__tests__/base-suggestions.spec.ts
@@ -1,5 +1,5 @@
 import { Suggestion } from '@empathyco/x-types';
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper, DOMWrapper } from '@vue/test-utils';
 import {
   createPopularSearch,
   getPopularSearchesStub
@@ -20,7 +20,7 @@ function renderBaseSuggestions({
   showPlainSuggestion = false,
   suggestionItemClass
 }: BaseSuggestionsOptions = {}): BaseSuggestionsAPI {
-  const wrapper = mount(
+  const wrapperContainer = mount(
     {
       template,
       components: {
@@ -28,27 +28,27 @@ function renderBaseSuggestions({
       }
     },
     {
-      propsData: { suggestions, showFacets, showPlainSuggestion, suggestionItemClass }
+      props: { suggestions, showFacets, showPlainSuggestion, suggestionItemClass }
     }
   );
 
+  const wrapper = wrapperContainer.findComponent(BaseSuggestions);
+
   return {
-    wrapper: wrapper.findComponent(BaseSuggestions),
+    wrapper,
+    wrapperContainer,
     suggestions,
     getSuggestionsWrappers() {
-      return wrapper.findAll(getDataTestSelector('suggestion-item')).wrappers;
+      return wrapper.findAll(getDataTestSelector('suggestion-item'));
     }
   };
 }
 
 describe('testing Base Suggestions component', () => {
   it('renders the passed suggestions', () => {
-    const { wrapper, suggestions, getSuggestionsWrappers } = renderBaseSuggestions();
+    const { suggestions, getSuggestionsWrappers } = renderBaseSuggestions();
 
     expect(getSuggestionsWrappers()).toHaveLength(suggestions.length);
-    // Expect generated keys to be unique
-    const listItemKeys = new Set((wrapper.vm as any).suggestionsKeys);
-    expect(listItemKeys.size).toEqual(suggestions.length);
   });
 
   it('renders the content passed to the default slot', () => {
@@ -60,9 +60,8 @@ describe('testing Base Suggestions component', () => {
     );
   });
 
-  // eslint-disable-next-line max-len
   it('renders at most the number of suggestions defined by `maxItemsToRender` prop, including those with facets', async () => {
-    const { wrapper, getSuggestionsWrappers } = renderBaseSuggestions({
+    const { wrapperContainer, getSuggestionsWrappers } = renderBaseSuggestions({
       defaultSlot: `<span>{{suggestion.query}}{{filter ?  ' - ' + filter.label : ''}}</span>`,
       showFacets: true,
       showPlainSuggestion: true,
@@ -86,13 +85,13 @@ describe('testing Base Suggestions component', () => {
     expect(suggestionsWrappers[2].text()).toEqual('t-shirt - woman');
     expect(suggestionsWrappers[3].text()).toEqual('jeans');
 
-    await wrapper.setProps({ maxItemsToRender: 2 });
+    await wrapperContainer.setProps({ maxItemsToRender: 2 });
     const updatedSuggestionsWrappers = getSuggestionsWrappers();
     expect(updatedSuggestionsWrappers).toHaveLength(2);
     expect(updatedSuggestionsWrappers[0].text()).toEqual('t-shirt');
     expect(updatedSuggestionsWrappers[1].text()).toEqual('t-shirt - man');
 
-    await wrapper.setProps({ maxItemsToRender: 0 });
+    await wrapperContainer.setProps({ maxItemsToRender: 0 });
     expect(getSuggestionsWrappers()).toHaveLength(0);
   });
 
@@ -128,7 +127,6 @@ describe('testing Base Suggestions component', () => {
     });
   });
 
-  // eslint-disable-next-line max-len
   it('renders the plain suggestion when `showFacets` and `showPlainSuggestion` are set to true', () => {
     const { getSuggestionsWrappers } = renderBaseSuggestions({
       defaultSlot: `<span>{{suggestion.query}}{{filter ?  ' - ' + filter.label : ''}}</span>`,
@@ -197,9 +195,11 @@ interface BaseSuggestionsOptions {
  */
 interface BaseSuggestionsAPI {
   /** The wrapper for base suggestions component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
+  /** The wrapper container for the mounted component. */
+  wrapperContainer: VueWrapper;
   /** The rendered suggestions. */
   suggestions: Suggestion[];
   /** The wrappers of the rendered suggestions. */
-  getSuggestionsWrappers: () => Wrapper<Vue>[];
+  getSuggestionsWrappers: () => DOMWrapper<Element>[];
 }
diff --git a/packages/x-components/src/composables/__tests__/use-alias-api.spec.ts b/packages/x-components/src/composables/__tests__/use-alias-api.spec.ts
index bf30279753..03734a370b 100644
--- a/packages/x-components/src/composables/__tests__/use-alias-api.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-alias-api.spec.ts
@@ -1,6 +1,6 @@
-import Vue, { defineComponent } from 'vue';
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { defineComponent } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { Store } from 'vuex';
 import { AnyXStoreModule } from '../../store/index';
 import { UseAliasAPI, useAliasApi, UseAliasQueryAPI, UseAliasStatusAPI } from '../use-alias-api';
 import { searchBoxXStoreModule } from '../../x-modules/search-box/index';
@@ -13,6 +13,7 @@ import { identifierResultsXStoreModule } from '../../x-modules/identifier-result
 import { popularSearchesXStoreModule } from '../../x-modules/popular-searches/index';
 import { recommendationsXStoreModule } from '../../x-modules/recommendations/index';
 import { historyQueriesXStoreModule } from '../../x-modules/history-queries/index';
+import { installNewXPlugin } from '../../__tests__/utils';
 
 const renderUseAliasApiTest = (registerXModules = true): renderUseAliasApiTestAPI => {
   const testComponent = defineComponent({
@@ -29,9 +30,6 @@ const renderUseAliasApiTest = (registerXModules = true): renderUseAliasApiTestAP
     template: '<div></div>'
   });
 
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
   const store = new Store({
     modules: {
       x: {
@@ -70,8 +68,7 @@ const renderUseAliasApiTest = (registerXModules = true): renderUseAliasApiTestAP
   });
 
   const wrapper = mount(testComponent, {
-    localVue,
-    store
+    global: { plugins: [installNewXPlugin(), store] }
   });
 
   return {
@@ -223,7 +220,7 @@ describe('testing useAliasApi composable', () => {
 
 type renderUseAliasApiTestAPI = {
   store: Store<any>;
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   query: UseAliasQueryAPI;
   status: UseAliasStatusAPI;
   xAliasAPI: UseAliasAPI;
diff --git a/packages/x-components/src/composables/__tests__/use-debounce.spec.ts b/packages/x-components/src/composables/__tests__/use-debounce.spec.ts
index 5ddbbbc2c0..028146de6e 100644
--- a/packages/x-components/src/composables/__tests__/use-debounce.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-debounce.spec.ts
@@ -68,7 +68,7 @@ describe('testing useDebounce composable', () => {
 
     await runDebouncedFnMock();
     jest.advanceTimersByTime(100);
-    wrapper.destroy();
+    wrapper.unmount();
     jest.advanceTimersByTime(500);
     expect(fnMock).toHaveBeenCalledTimes(0);
   });
diff --git a/packages/x-components/src/composables/__tests__/use-getter.spec.ts b/packages/x-components/src/composables/__tests__/use-getter.spec.ts
index 70019a0803..4519a6b22b 100644
--- a/packages/x-components/src/composables/__tests__/use-getter.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-getter.spec.ts
@@ -3,28 +3,27 @@ import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../__tests__/utils';
 import { useGetter } from '../use-getter';
 import { ExtractGetters } from '../../x-modules/x-modules.types';
-import { useStore } from '../use-store';
 import { XPlugin } from '../../plugins';
 import { historyQueriesXModule } from '../../x-modules/history-queries/x-module';
 
-jest.mock('../use-store');
-
 function render(modulePaths: (keyof ExtractGetters<'historyQueries'>)[]) {
-  installNewXPlugin();
-  (useStore as jest.Mock).mockReturnValue(XPlugin.store);
-
   const component = defineComponent({
-    xModule: 'historyQueries',
+    xModule: historyQueriesXModule.name,
     setup: () => {
-      XPlugin.registerXModule(historyQueriesXModule);
       const historyQueriesGetter = useGetter('historyQueries', modulePaths);
       return { historyQueriesGetter };
     },
     template: `<div/>`
   });
 
-  const wrapper = mount(component);
-
+  const wrapper = mount(component, {
+    global: {
+      plugins: [installNewXPlugin()],
+      mocks: {
+        $store: {}
+      }
+    }
+  });
   return (wrapper as any).vm.historyQueriesGetter;
 }
 
diff --git a/packages/x-components/src/composables/__tests__/use-state.spec.ts b/packages/x-components/src/composables/__tests__/use-state.spec.ts
index ef124b8559..a1631556a8 100644
--- a/packages/x-components/src/composables/__tests__/use-state.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-state.spec.ts
@@ -5,25 +5,25 @@ import { XPlugin } from '../../plugins';
 import { ExtractState } from '../../x-modules/x-modules.types';
 import { useState } from '../use-state';
 import { searchBoxXModule } from '../../x-modules/search-box/x-module';
-import { useStore } from '../use-store';
-
-jest.mock('../use-store');
 
 function render(modulePaths: (keyof ExtractState<'searchBox'> & string)[]) {
-  installNewXPlugin();
-  (useStore as jest.Mock).mockReturnValue(XPlugin.store);
-
   const component = defineComponent({
-    xModule: 'searchBox',
+    xModule: searchBoxXModule.name,
     setup: () => {
-      XPlugin.registerXModule(searchBoxXModule);
       const searchBoxUseState = useState('searchBox', modulePaths);
       return { searchBoxUseState };
     },
     template: `<div/>`
   });
 
-  const wrapper = mount(component);
+  const wrapper = mount(component, {
+    global: {
+      plugins: [installNewXPlugin()],
+      mocks: {
+        $store: {}
+      }
+    }
+  });
 
   return (wrapper as any).vm.searchBoxUseState;
 }
diff --git a/packages/x-components/src/composables/__tests__/use-x-bus.spec.ts b/packages/x-components/src/composables/__tests__/use-x-bus.spec.ts
index 579bfbd9a6..06329ace95 100644
--- a/packages/x-components/src/composables/__tests__/use-x-bus.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-x-bus.spec.ts
@@ -1,21 +1,16 @@
 import { mount } from '@vue/test-utils';
 import { defineComponent } from 'vue';
 import { installNewXPlugin } from '../../__tests__/utils';
-import { XPlugin } from '../../plugins';
+import { XPlugin } from '../../plugins/x-plugin';
 import { useXBus } from '../use-x-bus';
-
-function install() {
-  installNewXPlugin();
-
-  return {
-    emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
-    onSpy: jest.spyOn(XPlugin.bus, 'on')
-  };
-}
+import { XDummyBus } from '../../__tests__/bus.dummy';
 
 let onColumnsNumberProvidedMock = jest.fn();
 
 function render(withMetadata = true) {
+  const dummyBus = new XDummyBus();
+  const emitSpy = jest.spyOn(dummyBus, 'emit');
+  const onSpy = jest.spyOn(dummyBus, 'on');
   const component = defineComponent({
     xModule: 'searchBox',
     setup: () => {
@@ -25,9 +20,16 @@ function render(withMetadata = true) {
     },
     template: `<div/>`
   });
-
+  const wrapper = mount(component, {
+    global: {
+      plugins: [installNewXPlugin({}, dummyBus)],
+      provide: { location: 'Magrathea' }
+    }
+  });
   return {
-    wrapper: mount(component, { provide: { location: 'Magrathea' } })
+    wrapper,
+    emitSpy,
+    onSpy
   };
 }
 
@@ -37,8 +39,8 @@ describe('testing useXBus', () => {
   });
 
   it('should emit and on subscription in the bus for registered events', () => {
-    const { onSpy, emitSpy } = install();
-    render();
+    const { onSpy, emitSpy } = render();
+
     const metadata = {
       customMetadata: 'custom',
       moduleName: 'searchBox',
@@ -54,21 +56,18 @@ describe('testing useXBus', () => {
   });
 
   it('should not emit metadata if it was not configured for', () => {
-    install();
     render(false);
 
     expect(onColumnsNumberProvidedMock).toHaveBeenCalledWith(10);
   });
 
   it('should emit events natively in Vue', () => {
-    install();
     const { wrapper } = render();
 
     expect(wrapper.emitted()).toEqual({ ColumnsNumberProvided: [[10]] });
   });
 
   it('should unsubscribe from events when component is unmounted', async () => {
-    install();
     const { wrapper } = render();
     const payloadGenerator = (eventPayload: number) => expect.objectContaining({ eventPayload });
 
@@ -78,7 +77,7 @@ describe('testing useXBus', () => {
     expect(onColumnsNumberProvidedMock).toHaveBeenCalledTimes(2); // Bus emission
     expect(onColumnsNumberProvidedMock).toHaveBeenNthCalledWith(2, payloadGenerator(50));
 
-    wrapper.destroy();
+    wrapper.unmount();
 
     await XPlugin.bus.emit('ColumnsNumberProvided', 60);
     expect(onColumnsNumberProvidedMock).toHaveBeenCalledTimes(2); // No listener on unmounted
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
deleted file mode 100644
index 23e2ec1da4..0000000000
--- a/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-import { shallowMount, Wrapper } from '@vue/test-utils';
-import { ComponentOptions, default as Vue } from 'vue';
-import { installNewXPlugin } from '../../__tests__/utils';
-import { identifierResultsXModule } from '../../x-modules/identifier-results/x-module';
-import { nextQueriesXModule } from '../../x-modules/next-queries/x-module';
-import { popularSearchesXModule } from '../../x-modules/popular-searches/x-module';
-import { querySuggestionsXModule } from '../../x-modules/query-suggestions/x-module';
-import { recommendationsXModule } from '../../x-modules/recommendations/x-module';
-import { relatedTagsXModule } from '../../x-modules/related-tags/x-module';
-import { searchXModule } from '../../x-modules/search/x-module';
-import { searchBoxXModule } from '../../x-modules/search-box/x-module';
-import { XPlugin } from '../x-plugin';
-import { getAliasAPI } from '../x-plugin.alias';
-import { XComponentAliasAPI } from '../x-plugin.types';
-import { facetsXModule } from '../../x-modules/facets/index';
-
-describe('testing plugin alias', () => {
-  const component: ComponentOptions<Vue> & ThisType<Vue> = {
-    render(createElement) {
-      return createElement();
-    }
-  };
-
-  let localVue: typeof Vue;
-  let componentInstance: Wrapper<Vue>;
-
-  beforeEach(() => {
-    [, localVue] = installNewXPlugin();
-    componentInstance = shallowMount(component, { localVue });
-  });
-
-  afterEach(() => {
-    componentInstance.destroy();
-    jest.clearAllMocks();
-  });
-
-  it('returns default values when no module is registered', () => {
-    const defaultValues: XComponentAliasAPI = {
-      query: {
-        facets: '',
-        searchBox: '',
-        nextQueries: '',
-        querySuggestions: '',
-        relatedTags: '',
-        search: ''
-      },
-      status: {
-        identifierResults: 'initial', // It is already registered by the `identifierResultsXModule` import itself
-        nextQueries: 'initial', // It is already registered by the `nextQueriesXModule` import itself
-        popularSearches: 'initial', // It is already registered by the `popularSearchesXModule` import itself
-        querySuggestions: 'initial', // It is already registered by the `querySuggestionsXModule` import itself
-        recommendations: 'initial', // It is already registered by the `recommendationsXModule` import itself
-        relatedTags: 'initial', // It is already registered by the `relatedTagsXModule` import itself
-        search: 'initial' // It is already registered by the `searchXModule` import itself
-      },
-      device: null,
-      facets: {},
-      historyQueries: [],
-      historyQueriesWithResults: [],
-      fullHistoryQueries: [],
-      isHistoryQueriesEnabled: false,
-      fromNoResultsWithFilters: false,
-      identifierResults: [],
-      searchBoxStatus: 'initial', // It is already registered by the `searchBoxXModule` import itself
-      isEmpathizeOpen: false,
-      nextQueries: [],
-      noResults: false,
-      partialResults: [],
-      popularSearches: [],
-      querySuggestions: [],
-      fullQuerySuggestions: [],
-      recommendations: [],
-      redirections: [],
-      relatedTags: [],
-      results: [],
-      scroll: {},
-      selectedFilters: [],
-      selectedRelatedTags: [],
-      semanticQueries: [],
-      spellcheckedQuery: '', // It is already registered by the `searchXModule` import itself
-      totalResults: 0,
-      selectedSort: ''
-    };
-    expect(componentInstance.vm.$x).toMatchObject(defaultValues);
-  });
-
-  it('updates the query values when the module is registered', () => {
-    XPlugin.registerXModule(nextQueriesXModule);
-    XPlugin.registerXModule(querySuggestionsXModule);
-    XPlugin.registerXModule(relatedTagsXModule);
-    XPlugin.registerXModule(searchBoxXModule);
-    XPlugin.registerXModule(searchXModule);
-    XPlugin.registerXModule(facetsXModule);
-
-    componentInstance.vm.$store.commit('x/searchBox/setQuery', 'this');
-    componentInstance.vm.$store.commit('x/nextQueries/setQuery', 'is');
-    componentInstance.vm.$store.commit('x/querySuggestions/setQuery', 'working');
-    componentInstance.vm.$store.commit('x/relatedTags/setQuery', 'properly');
-    componentInstance.vm.$store.commit('x/search/setQuery', 'nice');
-    componentInstance.vm.$store.commit('x/facets/setQuery', '!');
-
-    expect(componentInstance.vm.$x.query).toEqual({
-      searchBox: 'this',
-      nextQueries: 'is',
-      querySuggestions: 'working',
-      relatedTags: 'properly',
-      search: 'nice',
-      facets: '!'
-    });
-  });
-
-  it('updates the status values when the module is registered', () => {
-    const REQUEST_STATUS_REGEX = /success|loading|error|initial/;
-
-    XPlugin.registerXModule(identifierResultsXModule);
-    XPlugin.registerXModule(popularSearchesXModule);
-    XPlugin.registerXModule(recommendationsXModule);
-
-    expect(componentInstance.vm.$x.status).toEqual({
-      identifierResults: expect.stringMatching(REQUEST_STATUS_REGEX),
-      popularSearches: expect.stringMatching(REQUEST_STATUS_REGEX),
-      recommendations: expect.stringMatching(REQUEST_STATUS_REGEX)
-    });
-
-    XPlugin.registerXModule(nextQueriesXModule);
-    XPlugin.registerXModule(querySuggestionsXModule);
-    XPlugin.registerXModule(relatedTagsXModule);
-    XPlugin.registerXModule(searchBoxXModule);
-    XPlugin.registerXModule(searchXModule);
-
-    expect(componentInstance.vm.$x.status).toEqual({
-      identifierResults: expect.stringMatching(REQUEST_STATUS_REGEX),
-      popularSearches: expect.stringMatching(REQUEST_STATUS_REGEX),
-      recommendations: expect.stringMatching(REQUEST_STATUS_REGEX),
-      nextQueries: expect.stringMatching(REQUEST_STATUS_REGEX),
-      querySuggestions: expect.stringMatching(REQUEST_STATUS_REGEX),
-      relatedTags: expect.stringMatching(REQUEST_STATUS_REGEX),
-      search: expect.stringMatching(REQUEST_STATUS_REGEX)
-    });
-  });
-
-  it('has every property defined as a getter', () => {
-    /**
-     * Checks that every property defined by the object and keys is a getter or an object that
-     * only contains getters.
-     *
-     * @param obj - The object to check.
-     * @param keys - The subset of keys from the object to check.
-     * @returns True when the object properties defined by the keys are getters or object with
-     * getters.
-     */
-    function isJSGetterOrDictionaryOfJSGetters(
-      // object and string[] are the parameters used by getOwnPropertyDescriptor.
-      // eslint-disable-next-line @typescript-eslint/ban-types
-      obj: object,
-      keys: string[]
-    ): boolean {
-      return keys.every(key => {
-        const descriptor = Object.getOwnPropertyDescriptor(obj, key);
-        const value = obj[key as keyof typeof obj];
-        return (
-          (descriptor?.set === undefined &&
-            descriptor?.value === undefined &&
-            descriptor?.get !== undefined) ||
-          (typeof value === 'object' &&
-            isJSGetterOrDictionaryOfJSGetters(value, Object.keys(value)))
-        );
-      });
-    }
-
-    const aliasKeys = Object.keys(getAliasAPI(componentInstance.vm));
-
-    expect(isJSGetterOrDictionaryOfJSGetters(componentInstance.vm.$x, aliasKeys)).toEqual(true);
-  });
-});
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin-emitters.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin-emitters.spec.ts
index e03bd502d5..89c9054f09 100644
--- a/packages/x-components/src/plugins/__tests__/x-plugin-emitters.spec.ts
+++ b/packages/x-components/src/plugins/__tests__/x-plugin-emitters.spec.ts
@@ -1,13 +1,12 @@
-import { createLocalVue } from '@vue/test-utils';
-import { default as Vue, VueConstructor } from 'vue';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { createStore, Store } from 'vuex';
 import { setQuery } from '../../store/utils/query.utils';
 import { createWireFromFunction } from '../../wiring/wires.factory';
 import { XComponentsAdapterDummy } from '../../__tests__/adapter.dummy';
-import { createXModule } from '../../__tests__/utils';
+import { createXModule, installNewXPlugin } from '../../__tests__/utils';
 import { XPlugin } from '../x-plugin';
 import { XPluginOptions } from '../x-plugin.types';
-import { XDummyBus } from '../../__tests__/bus.dummy';
 
 const wireInstance = jest.fn();
 const usedClearedWireInstance = jest.fn();
@@ -41,8 +40,6 @@ const xModule = createXModule({
   }
 });
 
-let plugin: XPlugin;
-let localVue: VueConstructor<Vue>;
 let store: Store<any>; // Any to handle creation of new properties
 
 describe('testing X Plugin emitters', () => {
@@ -55,11 +52,9 @@ describe('testing X Plugin emitters', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-    plugin = new XPlugin(new XDummyBus());
     XPlugin.resetInstance();
-    localVue = createLocalVue();
-    localVue.use(Vuex);
-    store = new Store({});
+    store = createStore({});
+    mount({}, { global: { plugins: [store] } });
   });
 
   describe('install XPlugin overriding store emitters', () => {
@@ -79,13 +74,13 @@ describe('testing X Plugin emitters', () => {
 
     it('overrides before installing plugin', () => {
       XPlugin.registerXModule(xModule);
-      localVue.use(plugin, pluginOptions);
+      mount({}, { global: { plugins: [installNewXPlugin(pluginOptions)] } });
 
       expectModuleToHaveBeenReplaced();
     });
 
     it('overrides after installing plugin', () => {
-      localVue.use(plugin, pluginOptions);
+      mount({}, { global: { plugins: [installNewXPlugin(pluginOptions)] } });
       XPlugin.registerXModule(xModule);
 
       expectModuleToHaveBeenReplaced();
@@ -116,20 +111,29 @@ describe('testing X Plugin emitters', () => {
     const expectedQuery = 'lego';
     beforeEach(() => {
       XPlugin.registerXModule(xModule);
-      localVue.use(plugin, {
-        adapter: XComponentsAdapterDummy,
-        __PRIVATE__xModules: {
-          searchBox: {
-            storeEmitters: {
-              UserClearedQuery: {
-                selector: state => state.query,
-                filter: newValue => newValue === expectedQuery
-              }
-            }
+      mount(
+        {},
+        {
+          global: {
+            plugins: [
+              installNewXPlugin({
+                adapter: XComponentsAdapterDummy,
+                __PRIVATE__xModules: {
+                  searchBox: {
+                    storeEmitters: {
+                      UserClearedQuery: {
+                        selector: state => state.query,
+                        filter: newValue => newValue === expectedQuery
+                      }
+                    }
+                  }
+                },
+                store
+              })
+            ]
           }
-        },
-        store
-      });
+        }
+      );
     });
 
     // eslint-disable-next-line max-len
@@ -175,7 +179,7 @@ describe('testing X Plugin emitters', () => {
       };
 
       XPlugin.registerXModule(xModule);
-      localVue.use(plugin, pluginOptions);
+      mount({}, { global: { plugins: [installNewXPlugin(pluginOptions)] } });
 
       /* Emitters relies on Vue watcher that are async. We need to wait a cycle before testing if
          they have emitted or not. */
@@ -205,7 +209,7 @@ describe('testing X Plugin emitters', () => {
         store
       };
 
-      localVue.use(plugin, pluginOptions);
+      mount({}, { global: { plugins: [installNewXPlugin(pluginOptions)] } });
       XPlugin.registerXModule(xModule);
 
       /* Emitters relies on Vue watcher that are async. We need to wait a cycle before testing if
@@ -246,7 +250,7 @@ describe('testing X Plugin emitters', () => {
       };
 
       XPlugin.registerXModule(xModule);
-      localVue.use(plugin, pluginOptions);
+      mount({}, { global: { plugins: [installNewXPlugin(pluginOptions)] } });
 
       store.commit('x/searchBox/setQuery', 'wheat');
       await waitNextTick();
@@ -289,6 +293,6 @@ describe('testing X Plugin emitters', () => {
  * have been run.
  */
 async function waitNextTick(): Promise<void> {
-  await localVue.nextTick();
+  await nextTick();
   jest.runAllTimers();
 }
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin-mixin.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin-mixin.spec.ts
deleted file mode 100644
index 40918a0679..0000000000
--- a/packages/x-components/src/plugins/__tests__/x-plugin-mixin.spec.ts
+++ /dev/null
@@ -1,235 +0,0 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import { ComponentOptions, default as Vue } from 'vue';
-import { installNewXPlugin } from '../../__tests__/utils';
-import { xComponentMixin } from '../../components/x-component.mixin';
-import { FeatureLocation, QueryFeature } from '../../types/origin';
-import { WireMetadata } from '../../wiring/wiring.types';
-import { searchBoxXModule } from '../../x-modules/search-box/x-module';
-import { XPlugin } from '../x-plugin';
-
-describe('testing $x component API global mixin', () => {
-  describe('testing origin', () => {
-    /** Options to render the component to test component's bus origin functionality. */
-    interface RenderOriginComponentOptions {
-      /** The feature to be emitted. */
-      feature?: QueryFeature;
-      /** The location to be emitted. */
-      location?: FeatureLocation;
-    }
-
-    /** API returned by the component to test component's bus origin functionality. */
-    interface RenderOriginComponentAPI {
-      /** The bus emit, to assert that it has been called with a proper origin. */
-      busListener: jest.SpyInstance;
-      /** The component testing wrapper. Will emit a {@link XEvent} when clicked. */
-      wrapper: Wrapper<Vue>;
-    }
-
-    function renderOriginComponent({
-      feature,
-      location
-    }: RenderOriginComponentOptions = {}): RenderOriginComponentAPI {
-      const [, localVue] = installNewXPlugin();
-      const busListener = jest.spyOn(XPlugin.bus, 'emit');
-      const wrapper = mount(
-        {
-          template: `
-            <MyButton/>`,
-          components: {
-            MyButton: {
-              template: '<button @click="emit">Click me</button>',
-              methods: {
-                emit(this: Vue) {
-                  this.$x.emit('UserIsTypingAQuery', 'So awesome, much quality, such skill', {
-                    feature
-                  });
-                }
-              }
-            }
-          },
-          provide: {
-            location
-          }
-        },
-        {
-          localVue
-        }
-      );
-      return { wrapper, busListener };
-    }
-
-    it('emits location and feature in the metadata when they are available', () => {
-      const { wrapper, busListener } = renderOriginComponent({
-        location: 'predictive_layer',
-        feature: 'search_box'
-      });
-      wrapper.trigger('click');
-
-      expect(busListener).toHaveBeenCalledTimes(1);
-      expect(busListener).toHaveBeenCalledWith(
-        expect.any(String),
-        expect.anything(),
-        expect.objectContaining<Partial<WireMetadata>>({
-          location: 'predictive_layer',
-          feature: 'search_box'
-        })
-      );
-    });
-  });
-
-  describe('testing $x API', () => {
-    it('allows emitting and subscribing to events via $x object', () => {
-      const [, localVue] = installNewXPlugin();
-      const wrapper = mount(
-        {
-          render(createElement) {
-            return createElement();
-          }
-        },
-        { localVue }
-      );
-      const listener = jest.fn();
-
-      wrapper.vm.$x.on('UserIsTypingAQuery').subscribe(listener);
-      wrapper.vm.$x.emit('UserIsTypingAQuery', 'So awesome, much quality, such skill');
-
-      expect(listener).toHaveBeenCalledTimes(1);
-      expect(listener).toHaveBeenCalledWith('So awesome, much quality, such skill');
-    });
-
-    it('emits the event metadata', () => {
-      const [, localVue] = installNewXPlugin();
-      const listener = jest.fn();
-      const testTarget = document.createElement('div');
-
-      const emitterComponent: ComponentOptions<any> & ThisType<Vue> = {
-        mounted() {
-          this.$x.emit('UserIsTypingAQuery', 'Sexy Lego', { target: testTarget });
-        },
-        render(createElement) {
-          return createElement('input');
-        }
-      };
-
-      mount(
-        {
-          mixins: [xComponentMixin(searchBoxXModule)],
-          created() {
-            this.$x.on('UserIsTypingAQuery', true).subscribe(listener);
-          },
-          render(createElement) {
-            return createElement(emitterComponent);
-          }
-        } as ComponentOptions<any> & ThisType<Vue>,
-        { localVue }
-      );
-
-      expect(listener).toHaveBeenCalledTimes(1);
-      expect(listener).toHaveBeenCalledWith({
-        eventPayload: 'Sexy Lego',
-        metadata: {
-          moduleName: 'searchBox',
-          target: testTarget,
-          location: undefined,
-          replaceable: true
-        }
-      });
-    });
-
-    it('smart components emits the event metadata', () => {
-      const listener = jest.fn();
-      const testTarget = document.createElement('div');
-      const [, localVue] = installNewXPlugin();
-      mount(
-        {
-          mixins: [xComponentMixin(searchBoxXModule)],
-          created() {
-            this.$x.on('UserIsTypingAQuery', true).subscribe(listener);
-          },
-          mounted() {
-            this.$x.emit('UserIsTypingAQuery', 'Sexy Lego', { target: testTarget });
-          },
-          render(createElement) {
-            return createElement('input');
-          }
-        } as ComponentOptions<any> & ThisType<Vue>,
-        { localVue }
-      );
-      expect(listener).toHaveBeenCalledTimes(1);
-      expect(listener).toHaveBeenCalledWith({
-        eventPayload: 'Sexy Lego',
-        metadata: {
-          moduleName: 'searchBox',
-          target: testTarget,
-          location: undefined,
-          replaceable: true
-        }
-      });
-    });
-
-    it('finds the root x-component and emits the bus events as Vue events', () => {
-      const [, localVue] = installNewXPlugin();
-      const listener = jest.fn();
-      const emitterComponent: ComponentOptions<any> & ThisType<Vue> = {
-        mixins: [xComponentMixin(searchBoxXModule)], // Flag it as x-component
-        mounted() {
-          this.$x.emit('UserIsTypingAQuery', 'Sexy Playmobil');
-        },
-        render(createElement) {
-          return createElement('input');
-        }
-      };
-
-      const parentComponent: ComponentOptions<any> & ThisType<Vue> = {
-        mixins: [xComponentMixin(searchBoxXModule)], // Flag it as x-component
-        render(createElement) {
-          return createElement(emitterComponent);
-        }
-      };
-
-      mount(
-        {
-          render(createElement) {
-            return createElement(parentComponent, {
-              on: {
-                UserIsTypingAQuery: listener
-              }
-            });
-          }
-        },
-        { localVue }
-      );
-
-      expect(listener).toHaveBeenCalledTimes(1);
-    });
-
-    it('can access the $x API from an immediate watcher', () => {
-      const [, localVue] = installNewXPlugin();
-      const queryCallback = jest.fn();
-      const wrapper = mount(
-        {
-          computed: {
-            query(): string {
-              return this.$x.query.search;
-            }
-          },
-          watch: {
-            query: {
-              handler(query: string): void {
-                this.$x.emit('UserAcceptedAQuery', query);
-              },
-              immediate: true
-            }
-          },
-          render(h) {
-            return h();
-          }
-        } as ComponentOptions<Vue> & ThisType<Vue>,
-        { localVue }
-      );
-      wrapper.vm.$x.on('UserAcceptedAQuery').subscribe(queryCallback);
-
-      expect(queryCallback).toHaveBeenCalledTimes(1);
-    });
-  });
-});
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin-search-adapter.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin-search-adapter.spec.ts
index 74a86fdb64..a4d4020b80 100644
--- a/packages/x-components/src/plugins/__tests__/x-plugin-search-adapter.spec.ts
+++ b/packages/x-components/src/plugins/__tests__/x-plugin-search-adapter.spec.ts
@@ -1,19 +1,16 @@
-import { createLocalVue } from '@vue/test-utils';
-import { VueConstructor } from 'vue';
+import { mount } from '@vue/test-utils';
 import { XPlugin } from '../x-plugin';
 import { XDummyBus } from '../../__tests__/bus.dummy';
 
 describe('testing adapter configuration', () => {
   let xPlugin: XPlugin;
-  let localVue: VueConstructor;
 
   beforeEach(() => {
     jest.clearAllMocks();
     xPlugin = new XPlugin(new XDummyBus());
-    localVue = createLocalVue();
   });
 
   it('throws an error if no adapter is passed', () => {
-    expect(() => localVue.use(xPlugin, {})).toThrow();
+    expect(() => mount({}, { global: { plugins: [xPlugin] } })).toThrow();
   });
 });
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin.spec.ts
index 4378718051..2f892048b0 100644
--- a/packages/x-components/src/plugins/__tests__/x-plugin.spec.ts
+++ b/packages/x-components/src/plugins/__tests__/x-plugin.spec.ts
@@ -1,7 +1,7 @@
 import { Dictionary } from '@empathyco/x-utils';
-import { createLocalVue, shallowMount, Wrapper } from '@vue/test-utils';
-import { default as Vue, VueConstructor } from 'vue';
-import Vuex, { Store } from 'vuex';
+import { mount, shallowMount } from '@vue/test-utils';
+import { createStore, Store } from 'vuex';
+import { nextTick } from 'vue';
 import { createStoreEmitters, XStoreModule } from '../../store';
 import { createWireFromFunction, wireCommit } from '../../wiring/wires.factory';
 import { AnyWire } from '../../wiring/wiring.types';
@@ -73,44 +73,57 @@ const xModule: AnyXModule = {
   }
 };
 
-let localVue: VueConstructor;
 let store: Store<any>; // Any to handle creation of new properties
 
 describe('testing X Plugin', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     XPlugin.resetInstance();
-    localVue = createLocalVue();
-    localVue.use(Vuex);
-    store = new Store({});
+    store = createStore({});
+    mount({}, { global: { plugins: [store] } });
   });
 
   describe('install XPlugin without overriding options', () => {
     it('throws an error if no options are passed', () => {
       const plugin = new XPlugin(new XDummyBus());
-      expect(() => localVue.use(plugin)).toThrow();
+      expect(() => mount({}, { global: { plugins: [plugin] } })).toThrow();
     });
 
     it('allows registering a x-module before installing', () => {
       XPlugin.registerXModule(xModule);
       expectDefaultModuleToBeNotRegistered();
 
-      installNewXPlugin({ store, adapter: XComponentsAdapterDummy });
+      mount(
+        {},
+        { global: { plugins: [installNewXPlugin({ store, adapter: XComponentsAdapterDummy })] } }
+      );
       expectDefaultModuleToBeRegisteredOnce();
     });
 
     it('allows registering a initial x-module when installing', () => {
-      installNewXPlugin({
-        store,
-        adapter: XComponentsAdapterDummy,
-        initialXModules: [xModule]
-      });
+      mount(
+        {},
+        {
+          global: {
+            plugins: [
+              installNewXPlugin({
+                store,
+                adapter: XComponentsAdapterDummy,
+                initialXModules: [xModule]
+              })
+            ]
+          }
+        }
+      );
 
       expectDefaultModuleToBeRegisteredOnce();
     });
 
     it('allows registering a x-module after installing', () => {
-      installNewXPlugin({ store, adapter: XComponentsAdapterDummy });
+      mount(
+        {},
+        { global: { plugins: [installNewXPlugin({ store, adapter: XComponentsAdapterDummy })] } }
+      );
       XPlugin.registerXModule(xModule);
 
       expectDefaultModuleToBeRegisteredOnce();
@@ -118,7 +131,10 @@ describe('testing X Plugin', () => {
 
     it('does not re-register a module', () => {
       XPlugin.registerXModule(xModule);
-      installNewXPlugin({ store, adapter: XComponentsAdapterDummy });
+      mount(
+        {},
+        { global: { plugins: [installNewXPlugin({ store, adapter: XComponentsAdapterDummy })] } }
+      );
       XPlugin.registerXModule(xModule);
 
       expectDefaultModuleToBeRegisteredOnce();
@@ -256,12 +272,21 @@ describe('testing X Plugin', () => {
     describe('override before installing plugin', () => {
       beforeEach(() => {
         XPlugin.registerXModule(xModule);
-        installNewXPlugin({
-          __PRIVATE__xModules: privateXModulesOptions,
-          xModules: xModulesOptions,
-          store,
-          adapter: XComponentsAdapterDummy
-        });
+        mount(
+          {},
+          {
+            global: {
+              plugins: [
+                installNewXPlugin({
+                  __PRIVATE__xModules: privateXModulesOptions,
+                  xModules: xModulesOptions,
+                  store,
+                  adapter: XComponentsAdapterDummy
+                })
+              ]
+            }
+          }
+        );
       });
 
       it('overrides state', () => expectStoreStateToBeModified());
@@ -272,12 +297,22 @@ describe('testing X Plugin', () => {
 
     describe('override after installing plugin', () => {
       beforeEach(() => {
-        installNewXPlugin({
-          __PRIVATE__xModules: privateXModulesOptions,
-          xModules: xModulesOptions,
-          store,
-          adapter: XComponentsAdapterDummy
-        });
+        mount(
+          {},
+          {
+            global: {
+              plugins: [
+                installNewXPlugin({
+                  __PRIVATE__xModules: privateXModulesOptions,
+                  xModules: xModulesOptions,
+                  store,
+                  adapter: XComponentsAdapterDummy
+                })
+              ]
+            }
+          }
+        );
+
         XPlugin.registerXModule(xModule);
       });
 
@@ -299,7 +334,16 @@ describe('testing X Plugin', () => {
           mutations: {}
         }
       };
-      installNewXPlugin({ store, adapter: XComponentsAdapterDummy });
+
+      mount(
+        {},
+        {
+          global: {
+            plugins: [installNewXPlugin({ store, adapter: XComponentsAdapterDummy })]
+          }
+        }
+      );
+
       XPlugin.registerXModule(xModuleWithoutConfig);
 
       expect(store.state.x.searchBox.config).not.toBeDefined();
@@ -329,12 +373,26 @@ describe('testing X Plugin', () => {
 
     it('overrides before installing plugin', () => {
       XPlugin.registerXModule(xModule);
-      installNewXPlugin(pluginOptions);
+      mount(
+        {},
+        {
+          global: {
+            plugins: [installNewXPlugin(pluginOptions)]
+          }
+        }
+      );
 
       expectModuleToHaveBeenReplaced();
     });
     it('overrides after installing plugin', () => {
-      installNewXPlugin(pluginOptions);
+      mount(
+        {},
+        {
+          global: {
+            plugins: [installNewXPlugin(pluginOptions)]
+          }
+        }
+      );
       XPlugin.registerXModule(xModule);
 
       expectModuleToHaveBeenReplaced();
@@ -350,7 +408,6 @@ describe('testing X Plugin', () => {
   });
 
   describe('x-Modules system', () => {
-    let component: Wrapper<Vue>;
     const searchBoxQueryChangedSubscriber = jest.fn();
     const storeModule: XStoreModule<
       { query: string },
@@ -396,22 +453,21 @@ describe('testing X Plugin', () => {
         wiring,
         storeEmitters
       });
-      installNewXPlugin({ store, adapter: XComponentsAdapterDummy }, localVue);
-      component = shallowMount(
+      shallowMount(
+        {},
         {
-          render(h) {
-            return h();
+          global: {
+            plugins: [installNewXPlugin({ store, adapter: XComponentsAdapterDummy })]
           }
-        },
-        { store, localVue }
+        }
       );
     });
 
     it('store-emitters emit a changed event when the observed store state changes', async () => {
-      component.vm.$x.emit('UserIsTypingAQuery', 'New York strip steak');
+      XPlugin.bus.emit('UserIsTypingAQuery', 'New York strip steak');
 
-      await localVue.nextTick(); // Needed so Vue has updated the reactive dependencies.
-      jest.runAllTimers(); // Needed for the debounce of the emitters.
+      await nextTick(); // Needed so Vue has updated the reactive dependencies.
+      jest.runAllTimers(); // Needed for debounce of the emitters.
 
       expect(searchBoxQueryChangedSubscriber).toHaveBeenCalledTimes(1);
       expect(searchBoxQueryChangedSubscriber).toHaveBeenCalledWith({
@@ -427,9 +483,9 @@ describe('testing X Plugin', () => {
       "store-emitters don't emit multiple events if the events that are modifying the observed" +
         ' value are emitted synchronously',
       async () => {
-        component.vm.$x.emit('UserIsTypingAQuery', 'New York strip steak');
-        component.vm.$x.emit('UserIsTypingAQuery', 'Prime rib');
-        component.vm.$x.emit('UserIsTypingAQuery', 'Tomahawk steak');
+        XPlugin.bus.emit('UserIsTypingAQuery', 'New York strip steak');
+        XPlugin.bus.emit('UserIsTypingAQuery', 'Prime rib');
+        XPlugin.bus.emit('UserIsTypingAQuery', 'Tomahawk steak');
 
         await waitNextTick();
 
@@ -448,9 +504,9 @@ describe('testing X Plugin', () => {
       "store-emitters don't emit multiple events if the events that are modifying the observed" +
         ' value are emitted asynchronously but consecutively',
       async () => {
-        component.vm.$x.emit('UserIsTypingAQuery', 'New York strip steak');
-        component.vm.$x.emit('UserIsTypingAQuery', 'Prime rib');
-        component.vm.$x.emit('UserIsTypingAQuery', 'Tomahawk steak');
+        XPlugin.bus.emit('UserIsTypingAQuery', 'New York strip steak');
+        XPlugin.bus.emit('UserIsTypingAQuery', 'Prime rib');
+        XPlugin.bus.emit('UserIsTypingAQuery', 'Tomahawk steak');
 
         await waitNextTick();
 
@@ -467,8 +523,8 @@ describe('testing X Plugin', () => {
     );
 
     it("store-emitters don't emit an event if value is reset synchronously", async () => {
-      component.vm.$x.emit('UserIsTypingAQuery', 'chinchulines');
-      component.vm.$x.emit('UserIsTypingAQuery', '');
+      XPlugin.bus.emit('UserIsTypingAQuery', 'chinchulines');
+      XPlugin.bus.emit('UserIsTypingAQuery', '');
 
       await waitNextTick();
 
@@ -485,6 +541,6 @@ describe('testing X Plugin', () => {
  * have been run.
  */
 async function waitNextTick(): Promise<void> {
-  await localVue.nextTick();
+  await nextTick();
   jest.runAllTimers();
 }
diff --git a/packages/x-components/src/store/__tests__/vuex-watchers-hack.spec.ts b/packages/x-components/src/store/__tests__/vuex-watchers-hack.spec.ts
index 3462ad055b..8223e47de0 100644
--- a/packages/x-components/src/store/__tests__/vuex-watchers-hack.spec.ts
+++ b/packages/x-components/src/store/__tests__/vuex-watchers-hack.spec.ts
@@ -1,13 +1,6 @@
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Module, Store } from 'vuex';
-
-/**
- * When dynamically registering modules, Vuex re-executes watchers, if the watcher is over a
- * primitive value, it is stopped due to a simple === comparison, but when it is over a complex
- * object or array, the comparison fails, and it emits that the value has changed. Looks like
- * this behavior is intended. Vuex store is reset when registering a new module.
- * {@link https://github.com/vuejs/vuex/issues/524#issuecomment-267715183}.
- */
+import { createStore, Module, Store } from 'vuex';
+import { nextTick } from 'vue';
+
 interface StoreRootState {
   first: FirstState;
   second: SecondState;
@@ -56,10 +49,8 @@ const secondModule: Module<SecondState, StoreRootState> = {
     count: 0
   }
 };
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
 let store: Store<StoreRootState>;
+store = createStore<StoreRootState>({});
 const watchCallback = jest.fn();
 
 describe('testing Vuex watcher hacks', () => {
@@ -69,7 +60,7 @@ describe('testing Vuex watcher hacks', () => {
 
   describe('vuex watchers standard behavior', () => {
     beforeEach(() => {
-      store = new Store({});
+      store = createStore<StoreRootState>({});
     });
 
     it('does not trigger simple state watchers when registering modules', simpleValuesWatchers);
@@ -86,30 +77,30 @@ describe('testing Vuex watcher hacks', () => {
       doesNotEagerExecuteGettersWatchers
     );
 
-    it('triggers object state watchers when registering modules', async () => {
+    it('does not trigger object state watchers when registering other modules', async () => {
       expect.assertions(1);
       store.registerModule('first', firstModule);
       store.watch(state => state.first.object, watchCallback);
       store.registerModule('second', secondModule);
 
-      await localVue.nextTick();
-      expect(watchCallback).toHaveBeenCalledTimes(1); // But it should not be called
+      await nextTick();
+      expect(watchCallback).toHaveBeenCalledTimes(0);
     });
 
-    it('triggers object getter watchers when registering modules', async () => {
+    it('does not trigger object getter watchers when registering new modules', async () => {
       expect.assertions(1);
       store.registerModule('first', firstModule);
       store.watch((_, getters) => getters['first/objectCopy'], watchCallback);
       store.registerModule('second', secondModule);
 
-      await localVue.nextTick();
-      expect(watchCallback).toHaveBeenCalledTimes(1); // But it should not be called
+      await nextTick();
+      expect(watchCallback).toHaveBeenCalledTimes(0);
     });
   });
 
   describe('vuex watchers hack', () => {
     beforeEach(() => {
-      store = new Store({
+      store = createStore({
         state: {
           first: null as any, // `any` to prevent TS from complaining
           second: null as any
@@ -137,7 +128,7 @@ describe('testing Vuex watcher hacks', () => {
       store.watch(state => state.first.object, watchCallback);
       store.registerModule('second', secondModule);
 
-      await localVue.nextTick();
+      await nextTick();
       expect(watchCallback).not.toHaveBeenCalled();
     });
 
@@ -147,7 +138,7 @@ describe('testing Vuex watcher hacks', () => {
       store.watch((_, getters) => getters['first/objectCopy'], watchCallback);
       store.registerModule('second', secondModule);
 
-      await localVue.nextTick();
+      await nextTick();
       expect(watchCallback).not.toHaveBeenCalled();
     });
   });
@@ -158,7 +149,7 @@ describe('testing Vuex watcher hacks', () => {
     store.watch(state => state.first.flag, watchCallback);
     store.registerModule('second', secondModule);
 
-    await localVue.nextTick();
+    await nextTick();
     expect(watchCallback).not.toHaveBeenCalled();
   }
 
@@ -168,7 +159,7 @@ describe('testing Vuex watcher hacks', () => {
     store.watch((_, getters) => getters['first/notFlag'], watchCallback);
     store.registerModule('second', secondModule);
 
-    await localVue.nextTick();
+    await nextTick();
     expect(watchCallback).not.toHaveBeenCalled();
   }
 
@@ -177,7 +168,7 @@ describe('testing Vuex watcher hacks', () => {
     store.registerModule('first', firstModule);
     store.watch(state => state.first.object, watchCallback);
 
-    await localVue.nextTick();
+    await nextTick();
     expect(watchCallback).not.toHaveBeenCalled();
   }
 
@@ -186,7 +177,7 @@ describe('testing Vuex watcher hacks', () => {
     store.registerModule('first', firstModule);
     store.watch((_, getters) => getters['first/objectCopy'], watchCallback);
 
-    await localVue.nextTick();
+    await nextTick();
     expect(watchCallback).not.toHaveBeenCalled();
   }
 });
diff --git a/packages/x-components/src/wiring/__tests__/operators-testing-utils.ts b/packages/x-components/src/wiring/__tests__/operators-testing-utils.ts
index 96eebfabb3..b3402d43c3 100644
--- a/packages/x-components/src/wiring/__tests__/operators-testing-utils.ts
+++ b/packages/x-components/src/wiring/__tests__/operators-testing-utils.ts
@@ -1,6 +1,6 @@
 import { DeepPartial } from '@empathyco/x-utils';
-import { createLocalVue } from '@vue/test-utils';
-import Vuex, { Store } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { createStore, Store } from 'vuex';
 import { EventPayload, SubjectPayload, XBus } from '@empathyco/x-bus';
 import { Observable } from 'rxjs';
 import { RootXStoreState } from '../../store/index';
@@ -19,16 +19,15 @@ export function createWire<SomeEvent extends XEvent = 'UserIsTypingAQuery'>({
   event = 'UserIsTypingAQuery' as SomeEvent,
   state
 }: CreateWireOptions<SomeEvent> = {}): CreateWireAPI<XEventPayload<SomeEvent>> {
-  const vue = createLocalVue();
-  vue.use(Vuex);
+  const store = createStore({
+    state: { x: state }
+  }) as Store<RootXStoreState>;
+  mount({}, { global: { plugins: [store] } });
   const bus = new XDummyBus();
   const callback = jest.fn();
   const wire = createWireFromFunction<XEventPayload<SomeEvent>>(({ eventPayload }) => {
     callback(eventPayload);
   });
-  const store = new Store<DeepPartial<RootXStoreState>>({
-    state: { x: state }
-  }) as Store<RootXStoreState>;
 
   return {
     store,
diff --git a/packages/x-components/src/wiring/__tests__/utils.ts b/packages/x-components/src/wiring/__tests__/utils.ts
index 2879e97cd6..dcff1126e0 100644
--- a/packages/x-components/src/wiring/__tests__/utils.ts
+++ b/packages/x-components/src/wiring/__tests__/utils.ts
@@ -1,6 +1,6 @@
-import { createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { Subject } from 'rxjs';
-import Vuex, { Store } from 'vuex';
+import { createStore, Store } from 'vuex';
 import { RootXStoreState } from '../../store/store.types';
 import { XModuleName } from '../../x-modules/x-modules.types';
 import { WireParams, WirePayload } from '../wiring.types';
@@ -13,9 +13,7 @@ import { WireParams, WirePayload } from '../wiring.types';
  * @internal
  */
 export function createQuerySuggestionsStoreMock(): Store<any> {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-  const store = new Store<any>({
+  const store = createStore<any>({
     state: () => ({
       x: {
         querySuggestions: {
@@ -31,6 +29,7 @@ export function createQuerySuggestionsStoreMock(): Store<any> {
         state.x.querySuggestions.query.trim()
     }
   });
+  mount({}, { global: { plugins: [store] } });
   store.commit = jest.fn();
   store.dispatch = jest.fn();
   return store;