diff --git a/packages/x-components/src/components/__tests__/base-variable-column-grid.spec.ts b/packages/x-components/src/components/__tests__/base-variable-column-grid.spec.ts
index 8f4df9bb7d..1189e1bee9 100644
--- a/packages/x-components/src/components/__tests__/base-variable-column-grid.spec.ts
+++ b/packages/x-components/src/components/__tests__/base-variable-column-grid.spec.ts
@@ -1,8 +1,7 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getSearchResponseStub } from '../../__stubs__/search-response-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../__tests__/utils';
-import { ListItem } from '../../utils/types';
 import BaseVariableColumnGrid from '../base-variable-column-grid.vue';
 import { XPlugin } from '../../plugins/x-plugin';
 
@@ -13,16 +12,14 @@ const itemsStub = [
   ...searchResponse.results
 ];
 
-function renderComponent({ items = itemsStub }: RenderOptions = {}): RenderAPI {
-  const [, localVue] = installNewXPlugin();
-  function mountComponent(): Wrapper<Vue> {
+function renderComponent({ items = itemsStub } = {}) {
+  function mountComponent() {
     return mount(BaseVariableColumnGrid, {
-      props: ['items'],
-      propsData: {
+      global: { plugins: [installNewXPlugin()] },
+      props: {
         items
       },
-      localVue,
-      scopedSlots: {
+      slots: {
         default: '<span data-test="default-slot" slot-scope="{ item }">{{ item.id }}</span>',
         result: '<span data-test="result-slot" slot-scope="{ item }">{{ item.name }}</span>'
       }
@@ -34,12 +31,9 @@ function renderComponent({ items = itemsStub }: RenderOptions = {}): RenderAPI {
   return {
     wrapper: wrapper,
     mountComponent,
-    hasColumns(columns: number): boolean {
-      return wrapper.classes(`x-base-grid--cols-${columns}`);
-    },
-    isScopedSlotOverridden(selector): boolean {
-      return wrapper.find(getDataTestSelector(selector)).exists();
-    }
+    hasColumns: (columns: number) => wrapper.classes(`x-base-grid--cols-${columns}`),
+    isScopedSlotOverridden: (selector: string) =>
+      wrapper.find(getDataTestSelector(selector)).exists()
   };
 }
 
@@ -70,22 +64,10 @@ describe('testing BaseVariableColumnGrid component', () => {
     expect(hasColumns(6)).toBe(true);
 
     const wrapper2 = mountComponent();
+
+    console.log(wrapper2.classes());
+    await nextTick();
+
     expect(wrapper2.classes('x-base-grid--cols-6')).toBe(true);
   });
 });
-
-interface RenderOptions {
-  /** The array of items to render in the grid. */
-  items?: ListItem[];
-}
-
-interface RenderAPI {
-  /** The grid's wrapper. */
-  wrapper: Wrapper<Vue>;
-  /** Mounts the grid component. */
-  mountComponent: () => Wrapper<Vue>;
-  /** Checks if the grid has a certain number of columns. */
-  hasColumns: (columns: number) => boolean;
-  /** Check if a scoped slot is overridden. */
-  isScopedSlotOverridden: (selector: string) => boolean;
-}
diff --git a/packages/x-components/src/components/__tests__/display-emitter.spec.ts b/packages/x-components/src/components/__tests__/display-emitter.spec.ts
index 0a436d073d..d94f412ac8 100644
--- a/packages/x-components/src/components/__tests__/display-emitter.spec.ts
+++ b/packages/x-components/src/components/__tests__/display-emitter.spec.ts
@@ -24,7 +24,8 @@ function render({
   });
 
   return {
-    wrapper: wrapper.findComponent(DisplayEmitter),
+    wrapper,
+    displayEmiter: wrapper.findComponent(DisplayEmitter),
     element: wrapper.find(getDataTestSelector('child')).element,
     payload,
     eventMetadata
@@ -38,9 +39,9 @@ describe('testing DisplayEmitter component', () => {
   });
 
   it('renders everything passed to its default slot', () => {
-    const { wrapper } = render();
+    const { displayEmiter } = render();
 
-    expect(wrapper.find(getDataTestSelector('child')).exists()).toBeTruthy();
+    expect(displayEmiter.find(getDataTestSelector('child')).exists()).toBeTruthy();
   });
 
   it('executes `useEmitDisplayEvent` composable underneath', () => {
@@ -70,7 +71,7 @@ describe('testing DisplayEmitter component', () => {
   it('removes the watcher on unmount', async () => {
     const { wrapper } = render();
 
-    wrapper.destroy();
+    wrapper.unmount();
     await nextTick();
 
     expect(unwatchDisplaySpy).toHaveBeenCalled();
diff --git a/packages/x-components/src/components/__tests__/dynamic-props.mixin.spec.ts b/packages/x-components/src/components/__tests__/dynamic-props.mixin.spec.ts
deleted file mode 100644
index dd7011d226..0000000000
--- a/packages/x-components/src/components/__tests__/dynamic-props.mixin.spec.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import Vue from 'vue';
-import { mount, Wrapper } from '@vue/test-utils';
-import { dynamicPropsMixin } from '../dynamic-props.mixin';
-
-const renderComponent = ({ props = ['list', 'button'] }: ComponentOptions = {}): ComponentAPI => {
-  const wrapper = mount({
-    mixins: [dynamicPropsMixin(props)],
-    render: h => h(),
-    props: ['data']
-  });
-  return { wrapper };
-};
-
-describe('dynamicPropsMixin', () => {
-  it('expects to have the defined props from the mixin', () => {
-    const { wrapper } = renderComponent();
-    const props = Object.keys(wrapper.props());
-    expect(props).toEqual(['list', 'button', 'data']);
-  });
-});
-
-/**
- * The options for the `renderComponent` function.
- */
-interface ComponentOptions {
-  props?: string[];
-}
-
-/**
- * Test API for the component.
- */
-interface ComponentAPI {
-  /** The wrapper for the component. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/components/__tests__/global-x-bus.spec.ts b/packages/x-components/src/components/__tests__/global-x-bus.spec.ts
index 79ddbf4652..df08e641f4 100644
--- a/packages/x-components/src/components/__tests__/global-x-bus.spec.ts
+++ b/packages/x-components/src/components/__tests__/global-x-bus.spec.ts
@@ -4,10 +4,11 @@ import { XPlugin } from '../../plugins/index';
 import GlobalXBus from '../global-x-bus.vue';
 
 function renderGlobalXBus({ listeners = {} } = {}) {
-  installNewXPlugin();
-
   return {
-    wrapper: mount(GlobalXBus, { listeners })
+    wrapper: mount(GlobalXBus, {
+      props: { listeners },
+      global: { plugins: [installNewXPlugin()] }
+    })
   } as const;
 }
 
@@ -41,7 +42,7 @@ describe('testing GlobalXBus component', () => {
     await XPlugin.bus.emit('UserClickedColumnPicker');
     expect(clickedColumnPickerCallback).toHaveBeenCalledTimes(1);
 
-    wrapper.destroy();
+    wrapper.unmount();
 
     await XPlugin.bus.emit('UserClickedColumnPicker');
     expect(clickedColumnPickerCallback).toHaveBeenCalledTimes(1);
diff --git a/packages/x-components/src/components/__tests__/highlight.spec.ts b/packages/x-components/src/components/__tests__/highlight.spec.ts
index 43fee3bd02..b5fbbc4cff 100644
--- a/packages/x-components/src/components/__tests__/highlight.spec.ts
+++ b/packages/x-components/src/components/__tests__/highlight.spec.ts
@@ -1,33 +1,26 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Highlight from '../highlight.vue';
 import { getDataTestSelector } from '../../__tests__/utils';
+import { nextTick } from 'vue';
 
 function renderHighlight({
-  template = '<Highlight v-bind="$attrs"/>',
-  text,
-  highlight,
-  noMatchClass,
-  matchingPartClass,
-  matchClass
-}: RenderHighlightOptions): RenderHighlightAPI {
-  const wrapper = mount(
-    {
-      inheritAttrs: false,
-      components: {
-        Highlight
-      },
-      template
+  slots = {},
+  text = '',
+  highlight = '',
+  noMatchClass = '',
+  matchingPartClass = '',
+  matchClass = ''
+} = {}) {
+  const wrapper = mount(Highlight, {
+    props: {
+      text,
+      highlight,
+      noMatchClass,
+      matchingPartClass,
+      matchClass
     },
-    {
-      propsData: {
-        text,
-        highlight,
-        noMatchClass,
-        matchingPartClass,
-        matchClass
-      }
-    }
-  );
+    slots: { ...slots }
+  });
   return {
     wrapper,
     getStartPart() {
@@ -39,7 +32,7 @@ function renderHighlight({
     getEndPart() {
       return wrapper.find(getDataTestSelector('highlight-end'));
     },
-    async setHighlight(highlight) {
+    async setHighlight(highlight: string) {
       return await wrapper.setProps({ highlight });
     }
   };
@@ -112,13 +105,14 @@ describe('testing Highlight component', () => {
     expect(getEndPart().exists()).toBe(false);
   });
 
-  it('allows to add classes when the text matches', () => {
+  it('allows to add classes when the text matches', async () => {
     const { getMatchingPart, wrapper } = renderHighlight({
       text: 'salchichón',
       highlight: 'sal',
       matchClass: 'custom-match-class',
       matchingPartClass: 'custom-matching-part-class'
     });
+    await nextTick();
     expect(wrapper.classes('custom-match-class')).toBe(true);
     expect(getMatchingPart().classes('custom-matching-part-class')).toBe(true);
   });
@@ -133,14 +127,13 @@ describe('testing Highlight component', () => {
   });
 
   it('allows customising the HTML', async () => {
+    const customHtml = `
+        <span v-if="hasMatch" class="match-custom-layout">
+          <strong>{{ start }}</strong>{{ match }}<strong>{{ end }}</strong>
+        </span>
+        <span v-else class="no-match-custom">{{ text }}</span>`;
     const { wrapper, setHighlight } = renderHighlight({
-      template: `
-        <Highlight v-bind="$attrs" #default="{ hasMatch, start, match, end, text }">
-          <span v-if="hasMatch" class="match-custom-layout">
-            <strong>{{ start }}</strong>{{ match }}<strong>{{ end }}</strong>
-          </span>
-          <span v-else class="no-match-custom">{{ text }}</span>
-        </Highlight>`,
+      slots: { default: customHtml },
       text: 'churrasco',
       highlight: 'chur'
     });
@@ -154,31 +147,3 @@ describe('testing Highlight component', () => {
     );
   });
 });
-
-interface RenderHighlightOptions {
-  /** The template to render. */
-  template?: string;
-  /** The text to be highlighted. */
-  text: string;
-  /** The part of the text to highlight. */
-  highlight: string;
-  /** Class to add to the root node when the given text doesn't contain the part to highlight. */
-  noMatchClass?: string;
-  /** Class to add to the node wrapping the matching text. */
-  matchingPartClass?: string;
-  /** Class to add to the root node when the given text contains the part to highlight. */
-  matchClass?: string;
-}
-
-interface RenderHighlightAPI {
-  /** Testing wrapper component. */
-  wrapper: Wrapper<Vue>;
-  /** Only the start node wrapper. */
-  getStartPart: () => Wrapper<Vue>;
-  /** Only the matching node wrapper. */
-  getMatchingPart: () => Wrapper<Vue>;
-  /** Only the end node wrapper. */
-  getEndPart: () => Wrapper<Vue>;
-  /** Sets the part of the text to highlight. */
-  setHighlight: (highlight: string) => Promise<void>;
-}
diff --git a/packages/x-components/src/components/__tests__/items-list.spec.ts b/packages/x-components/src/components/__tests__/items-list.spec.ts
index c38d5ded80..abd7d5f3ff 100644
--- a/packages/x-components/src/components/__tests__/items-list.spec.ts
+++ b/packages/x-components/src/components/__tests__/items-list.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 { ListItem } from '../../utils/types';
 import { getDataTestSelector } from '../../__tests__/utils';
 import { getBannersStub } from '../../__stubs__/banners-stubs.factory';
@@ -13,20 +12,13 @@ import { getPromotedsStub } from '../../__stubs__/promoteds-stubs.factory';
  * @param options - The options to render the component with.
  * @returns The API for testing the `BannersList` component.
  */
-function renderItemsList({
-  items = [],
-  scopedSlots
-}: RenderItemsListOptions = {}): RendersItemsListAPI {
+function renderItemsList({ items = [], slots }: RenderItemsListOptions = {}): RendersItemsListAPI {
   const wrapper = mount(ItemsList, {
-    propsData: {
-      items
-    },
-    scopedSlots
+    props: { items },
+    slots
   });
 
-  return {
-    wrapper
-  };
+  return { wrapper };
 }
 
 describe('testing ItemsList component', () => {
@@ -50,7 +42,7 @@ describe('testing ItemsList component', () => {
     const itemsWrapperArray = wrapper.findAll('.x-items-list__item');
     expect(itemsWrapperArray).toHaveLength(resultsStub.length);
     resultsStub.forEach((result, index: number) => {
-      expect(itemsWrapperArray.at(index).text()).toBe(result.id);
+      expect(itemsWrapperArray.at(index)?.text()).toBe(result.id);
     });
   });
 
@@ -74,7 +66,7 @@ describe('testing ItemsList component', () => {
 
   it('allows to customize each item using the slot', () => {
     const { wrapper } = renderItemsList({
-      scopedSlots: {
+      slots: {
         result: `<template #result="{ item }">Result: {{ item.name }}</template>`,
         banner: `<template #banner="{ item }">Banner: {{ item.id }}</template>`,
         promoted: `<template #promoted="{ item }">Promoted: {{ item.title }}</template>`
@@ -100,10 +92,10 @@ interface RenderItemsListOptions {
   /** Items to be passed to the component. */
   items?: ListItem[];
   /** Scoped slots to be passed to the mount function. */
-  scopedSlots?: Record<string, string>;
+  slots?: Record<string, string>;
 }
 
 interface RendersItemsListAPI {
   /** The `wrapper` wrapper component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/components/__tests__/location-provider.spec.ts b/packages/x-components/src/components/__tests__/location-provider.spec.ts
index 21acafb1f5..8888a2e8bc 100644
--- a/packages/x-components/src/components/__tests__/location-provider.spec.ts
+++ b/packages/x-components/src/components/__tests__/location-provider.spec.ts
@@ -1,18 +1,16 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { Component, Inject } from 'vue-property-decorator';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent, inject } from 'vue';
 import { FeatureLocation } from '../../types';
 import LocationProvider from '../location-provider.vue';
 
-@Component({
-  template: `
-    <button />
-  `
-})
-class Child extends Vue {
-  @Inject('location')
-  public location!: FeatureLocation;
-}
+const Child = defineComponent({
+  name: 'Child',
+  template: `{{ injectedLocation }}`,
+  setup() {
+    const injectedLocation = inject<FeatureLocation>('location');
+    return { injectedLocation };
+  }
+});
 
 /**
  * Renders the {@link LocationProvider} component, exposing a basic API for testing.
@@ -21,9 +19,7 @@ class Child extends Vue {
  *
  * @returns The API for testing the `LocationProvider` component.
  */
-function renderLocationProvider({
-  location
-}: RenderLocationProviderOptions): RenderLocationProviderAPI {
+function renderLocationProvider({ location = '' } = {}) {
   const wrapper = mount(
     {
       components: {
@@ -33,37 +29,22 @@ function renderLocationProvider({
       template: `
         <LocationProvider :location="location">
           <Child />
-        </LocationProvider>`,
-      props: ['location']
+        </LocationProvider>`
     },
     {
-      propsData: {
-        location
-      }
+      props: { location }
     }
   );
 
   return {
-    child: wrapper.findComponent<Child>(Child)
+    child: wrapper.findComponent(Child)
   };
 }
 
 describe('testing LocationProvider component', () => {
   it('provides a location to its child', () => {
-    const { child } = renderLocationProvider({
-      location: 'external'
-    });
+    const { child } = renderLocationProvider({ location: 'external' });
 
-    expect(child.vm.location).toBe('external');
+    expect(child.html()).toBe('external');
   });
 });
-
-interface RenderLocationProviderOptions {
-  /** The location to provide. */
-  location: FeatureLocation;
-}
-
-interface RenderLocationProviderAPI {
-  /** The wrapper for the child component inside the location provider. */
-  child: Wrapper<Child>;
-}
diff --git a/packages/x-components/src/components/__tests__/page-loader-button.spec.ts b/packages/x-components/src/components/__tests__/page-loader-button.spec.ts
index 5ee2816a60..60433b30be 100644
--- a/packages/x-components/src/components/__tests__/page-loader-button.spec.ts
+++ b/packages/x-components/src/components/__tests__/page-loader-button.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { Result } from '@empathyco/x-types';
 import { getDataTestSelector, installNewXPlugin } from '../../__tests__/utils';
 import PageLoaderButton from '../page-loader-button.vue';
@@ -10,17 +9,15 @@ function renderPageLoaderButton({
   query = 'dress',
   results = getResultsStub(48),
   totalResults = 100,
-  scopedSlots
+  slots
 }: RenderPageLoaderButtonOptions = {}): RenderPageLoaderButtonAPI {
-  const [, localVue] = installNewXPlugin();
-
-  const wrapper = mount(PageLoaderButton as ComponentOptions<Vue>, {
-    propsData: {
+  const wrapper = mount(PageLoaderButton, {
+    props: {
       buttonClasses: '',
       buttonEvents: {}
     },
-    localVue,
-    scopedSlots,
+    global: { plugins: [installNewXPlugin()] },
+    slots,
     data() {
       return {
         query,
@@ -56,7 +53,7 @@ describe('testing PageLoaderButton component', () => {
 
   it('allows customizing its slots', () => {
     const { wrapper } = renderPageLoaderButton({
-      scopedSlots: {
+      slots: {
         textContent: `<p data-test="replaced-slot">Click to see more results</p>`,
         buttonContent: `<span>Load More</span>`
       }
@@ -134,7 +131,7 @@ interface RenderPageLoaderButtonOptions {
   /** The total number of results. */
   totalResults?: number;
   /** Scoped slots to be passed to the mount function. */
-  scopedSlots?: Record<string, string>;
+  slots?: Record<string, string>;
 }
 
 /**
@@ -142,7 +139,7 @@ interface RenderPageLoaderButtonOptions {
  */
 interface RenderPageLoaderButtonAPI {
   /** The wrapper for the page loader button component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /* A jest spy of the X emit method. */
   emitSpy: ReturnType<typeof jest.spyOn>;
 }
diff --git a/packages/x-components/src/components/__tests__/snippet-callbacks.spec.ts b/packages/x-components/src/components/__tests__/snippet-callbacks.spec.ts
index c84077d76c..70ac78da2e 100644
--- a/packages/x-components/src/components/__tests__/snippet-callbacks.spec.ts
+++ b/packages/x-components/src/components/__tests__/snippet-callbacks.spec.ts
@@ -1,4 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { baseSnippetConfig } from '../../views/base-config';
 import { XEventListeners } from '../../x-installer/api/api.types';
 import SnippetCallbacks from '../snippet-callbacks.vue';
@@ -54,7 +54,7 @@ describe('testing SnippetCallbacks component', () => {
     expect(clickedColumnPickerCallback).toHaveBeenCalledWith(1, expect.any(Object));
 
     // Force unsubscribing
-    wrapper.destroy();
+    wrapper.unmount();
   });
 
   it('emits a SnippetCallbackExecuted event when a callback is executed', () => {
@@ -107,5 +107,5 @@ interface RenderSnippetCallbacksOptions {
  */
 interface RenderSnippetCallbacksAPI {
   /** The wrapper of the container element. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }
diff --git a/packages/x-components/src/components/__tests__/x-component-mixin.spec.ts b/packages/x-components/src/components/__tests__/x-component-mixin.spec.ts
deleted file mode 100644
index 18eae29abe..0000000000
--- a/packages/x-components/src/components/__tests__/x-component-mixin.spec.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
-import Vuex, { Store } from 'vuex';
-import { RootXStoreState } from '../../store/store.types';
-import { searchBoxXModule } from '../../x-modules/search-box/x-module';
-import { installNewXPlugin } from '../../__tests__/utils';
-import { xComponentMixin } from '../x-component.mixin';
-import { isXComponent } from '../x-component.utils';
-
-describe('testing XComponent Mixin', () => {
-  const xComponent: ComponentOptions<Vue> = {
-    mixins: [xComponentMixin(searchBoxXModule)],
-    render: h => h()
-  };
-  let xComponentWrapper: Wrapper<Vue>;
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-  const store: Store<RootXStoreState> = new Store({});
-  installNewXPlugin({ store }, localVue);
-
-  beforeEach(() => {
-    xComponentWrapper = mount(xComponent, { localVue, store });
-  });
-
-  describe('testing XComponentMixin initializing a component as an XComponent', () => {
-    it('registers the x-module', () => {
-      expect(store.state.x.searchBox).toBeDefined();
-    });
-
-    it('flags components as x-components', () => {
-      const normalComponentWrapper = mount({
-        render: h => h()
-      });
-      expect(isXComponent(xComponentWrapper.vm)).toEqual(true);
-      expect(isXComponent(normalComponentWrapper.vm)).toEqual(false);
-    });
-  });
-});
diff --git a/packages/x-components/src/components/__tests__/x-component-utils.spec.ts b/packages/x-components/src/components/__tests__/x-component-utils.spec.ts
index 12dbf3553a..aae3a7d3a5 100644
--- a/packages/x-components/src/components/__tests__/x-component-utils.spec.ts
+++ b/packages/x-components/src/components/__tests__/x-component-utils.spec.ts
@@ -1,15 +1,13 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent, h } from 'vue';
 import { XModuleName } from '../../x-modules/x-modules.types';
 import { getXComponentXModuleName, isXComponent, getRootXComponent } from '../x-component.utils';
 
 describe('testing the x-component utils', () => {
-  function renderComponent(xModule?: XModuleName): Wrapper<Vue> {
+  function renderComponent(xModule?: XModuleName): VueWrapper {
     return mount({
       xModule,
-      render(h) {
-        return h();
-      }
+      render: () => ''
     });
   }
 
@@ -48,15 +46,13 @@ describe('testing the x-component utils', () => {
     });
 
     it('returns the first root x component ancestor of a non x component', () => {
-      const nonXComponent = Vue.extend({
+      const nonXComponent = defineComponent({
         template: '<div>This is the child component</div>'
       });
 
       const ancestorXComponent = mount({
         xModule: 'searchBox',
-        render(h) {
-          return h(nonXComponent);
-        }
+        render: () => h(nonXComponent)
       });
 
       const nonXComponentVm = ancestorXComponent.findComponent(nonXComponent).vm;