test: adjust composable tests

empathyco · Aug 14, 2024 · 7b8b58a · 7b8b58a
1 parent 0ecc720
commit 7b8b58a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 29 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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;
 }