Merge branch 'slashmanov/remove-local-vue-non-ee-2' into 'master'

Remove localVue usage from non-EE tests without VueApollo (2/3)

See merge request gitlab-org/gitlab!78874

spec/frontend/ide/components/branches/search_list_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import Item from '~/ide/components/branches/item.vue';
 import List from '~/ide/components/branches/search_list.vue';
 import { __ } from '~/locale';
 import { branches } from '../../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('IDE branches search list', () => {
   let wrapper;
@@ -31,7 +31,6 @@ describe('IDE branches search list', () => {
     });
 
     wrapper = shallowMount(List, {
-      localVue,
       store: fakeStore,
     });
   };

spec/frontend/ide/components/commit_sidebar/editor_header_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import EditorHeader from '~/ide/components/commit_sidebar/editor_header.vue';
 import { createStore } from '~/ide/stores';
 import { file } from '../../helpers';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 const TEST_FILE_PATH = 'test/file/path';
 
@@ -16,7 +16,6 @@ describe('IDE commit editor header', () => {
   const createComponent = (fileProps = {}) => {
     wrapper = mount(EditorHeader, {
       store,
-      localVue,
       propsData: {
         activeFile: {
           ...file(TEST_FILE_PATH),

spec/frontend/ide/components/error_message_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import ErrorMessage from '~/ide/components/error_message.vue';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('IDE error message component', () => {
   let wrapper;
@@ -25,7 +25,6 @@ describe('IDE error message component', () => {
         },
       },
       store: fakeStore,
-      localVue,
     });
   };
 

spec/frontend/ide/components/file_templates/dropdown_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import $ from 'jquery';
 import Vuex from 'vuex';
 import Dropdown from '~/ide/components/file_templates/dropdown.vue';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('IDE file templates dropdown component', () => {
   let wrapper;
@@ -44,7 +44,6 @@ describe('IDE file templates dropdown component', () => {
         ...props,
       },
       store: fakeStore,
-      localVue,
     });
 
     ({ element } = wrapper);

spec/frontend/ide/components/ide_file_row_spec.js

-import { createLocalVue, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import FileRowExtra from '~/ide/components/file_row_extra.vue';
 import IdeFileRow from '~/ide/components/ide_file_row.vue';
 import { createStore } from '~/ide/stores';
 import FileRow from '~/vue_shared/components/file_row.vue';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 const TEST_EXTRA_PROPS = {
   testattribute: 'abc',
@@ -30,7 +30,6 @@ describe('Ide File Row component', () => {
         ...props,
       },
       store: createStore(),
-      localVue,
       ...options,
     });
   };

spec/frontend/ide/components/ide_review_spec.js

-import { createLocalVue, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { keepAlive } from 'helpers/keep_alive_component_helper';
@@ -9,8 +9,7 @@ import { createStore } from '~/ide/stores';
 import { file } from '../helpers';
 import { projectData } from '../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('IDE review mode', () => {
   let wrapper;
@@ -28,7 +27,6 @@ describe('IDE review mode', () => {
 
     wrapper = mount(keepAlive(IdeReview), {
       store,
-      localVue,
     });
   });
 

spec/frontend/ide/components/ide_side_bar_spec.js

 import { GlSkeletonLoading } from '@gitlab/ui';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import waitForPromises from 'helpers/wait_for_promises';
 import IdeReview from '~/ide/components/ide_review.vue';
@@ -10,8 +11,7 @@ import { leftSidebarViews } from '~/ide/constants';
 import { createStore } from '~/ide/stores';
 import { projectData } from '../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('IdeSidebar', () => {
   let wrapper;
@@ -26,7 +26,6 @@ describe('IdeSidebar', () => {
 
     return mount(IdeSidebar, {
       store,
-      localVue,
     });
   }
 

spec/frontend/ide/components/ide_spec.js

-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import waitForPromises from 'helpers/wait_for_promises';
 import CannotPushCodeAlert from '~/ide/components/cannot_push_code_alert.vue';
@@ -9,8 +10,7 @@ import { createStore } from '~/ide/stores';
 import { file } from '../helpers';
 import { projectData } from '../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 const TEST_FORK_IDE_PATH = '/test/ide/path';
 
@@ -34,7 +34,6 @@ describe('WebIDE', () => {
 
     wrapper = shallowMount(Ide, {
       store,
-      localVue,
     });
   };
 

spec/frontend/ide/components/ide_status_list_spec.js

 import { GlLink } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import IdeStatusList from '~/ide/components/ide_status_list.vue';
 import TerminalSyncStatusSafe from '~/ide/components/terminal_sync/terminal_sync_status_safe.vue';
@@ -16,8 +17,7 @@ const TEST_FILE_EDITOR = {
 };
 const TEST_EDITOR_POSITION = `${TEST_FILE_EDITOR.editorRow}:${TEST_FILE_EDITOR.editorColumn}`;
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('ide/components/ide_status_list', () => {
   let activeFileEditor;
@@ -42,7 +42,6 @@ describe('ide/components/ide_status_list', () => {
     });
 
     wrapper = shallowMount(IdeStatusList, {
-      localVue,
       store,
       ...options,
     });

spec/frontend/ide/components/ide_tree_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { keepAlive } from 'helpers/keep_alive_component_helper';
@@ -7,8 +7,7 @@ import { createStore } from '~/ide/stores';
 import { file } from '../helpers';
 import { projectData } from '../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('IdeTree', () => {
   let store;
@@ -27,7 +26,6 @@ describe('IdeTree', () => {
 
     wrapper = mount(keepAlive(IdeTree), {
       store,
-      localVue,
     });
   });
 

spec/frontend/ide/components/jobs/list_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import StageList from '~/ide/components/jobs/list.vue';
 import Stage from '~/ide/components/jobs/stage.vue';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 const storeActions = {
   fetchJobs: jest.fn(),
   toggleStageCollapsed: jest.fn(),
@@ -42,7 +42,6 @@ describe('IDE stages list', () => {
         ...defaultProps,
         ...props,
       },
-      localVue,
       store,
     });
   };
@@ -92,7 +91,6 @@ describe('IDE stages list', () => {
       wrapper = mount(StageList, {
         propsData: { ...defaultProps, stages },
         store,
-        localVue,
       });
     });
 

spec/frontend/ide/components/merge_requests/item_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import Item from '~/ide/components/merge_requests/item.vue';
 import { createRouter } from '~/ide/ide_router';
@@ -11,8 +12,7 @@ const TEST_ITEM = {
 };
 
 describe('IDE merge request item', () => {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+  Vue.use(Vuex);
 
   let wrapper;
   let store;
@@ -28,7 +28,6 @@ describe('IDE merge request item', () => {
         currentProjectId: TEST_ITEM.projectPathWithNamespace,
         ...props,
       },
-      localVue,
       router,
       store,
     });

spec/frontend/ide/components/merge_requests/list_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import Item from '~/ide/components/merge_requests/item.vue';
 import List from '~/ide/components/merge_requests/list.vue';
 import TokenedInput from '~/ide/components/shared/tokened_input.vue';
 import { mergeRequests as mergeRequestsMock } from '../../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('IDE merge requests list', () => {
   let wrapper;
@@ -41,7 +41,6 @@ describe('IDE merge requests list', () => {
 
     wrapper = shallowMount(List, {
       store: fakeStore,
-      localVue,
     });
   };
 

spec/frontend/ide/components/panes/collapsible_sidebar_spec.js

-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import IdeSidebarNav from '~/ide/components/ide_sidebar_nav.vue';
 import CollapsibleSidebar from '~/ide/components/panes/collapsible_sidebar.vue';
 import { createStore } from '~/ide/stores';
 import paneModule from '~/ide/stores/modules/pane';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('ide/components/panes/collapsible_sidebar.vue', () => {
   let wrapper;
@@ -17,7 +17,6 @@ describe('ide/components/panes/collapsible_sidebar.vue', () => {
 
   const createComponent = (props) => {
     wrapper = shallowMount(CollapsibleSidebar, {
-      localVue,
       store,
       propsData: {
         extensionTabs: [],
@@ -46,7 +45,7 @@ describe('ide/components/panes/collapsible_sidebar.vue', () => {
     let extensionTabs;
 
     beforeEach(() => {
-      const FakeComponent = localVue.component(fakeComponentName, {
+      const FakeComponent = Vue.component(fakeComponentName, {
         render: () => null,
       });
 

spec/frontend/ide/components/panes/right_spec.js

-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import CollapsibleSidebar from '~/ide/components/panes/collapsible_sidebar.vue';
@@ -7,8 +7,7 @@ import { rightSidebarViews } from '~/ide/constants';
 import { createStore } from '~/ide/stores';
 import extendStore from '~/ide/stores/extend';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('ide/components/panes/right.vue', () => {
   let wrapper;
@@ -18,7 +17,6 @@ describe('ide/components/panes/right.vue', () => {
     extendStore(store, document.createElement('div'));
 
     wrapper = shallowMount(RightPane, {
-      localVue,
       store,
       propsData: {
         ...props,

spec/frontend/ide/components/preview/clientside_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import smooshpack from 'smooshpack';
 import Vuex from 'vuex';
 import Clientside from '~/ide/components/preview/clientside.vue';
@@ -9,8 +10,7 @@ jest.mock('smooshpack', () => ({
   Manager: jest.fn(),
 }));
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 const dummyPackageJson = () => ({
   raw: JSON.stringify({
@@ -67,7 +67,6 @@ describe('IDE clientside preview', () => {
 
     wrapper = shallowMount(Clientside, {
       store,
-      localVue,
     });
   };
 

spec/frontend/ide/components/repo_tab_spec.js

 import { GlTab } from '@gitlab/ui';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import { stubComponent } from 'helpers/stub_component';
 import RepoTab from '~/ide/components/repo_tab.vue';
@@ -7,8 +8,7 @@ import { createRouter } from '~/ide/ide_router';
 import { createStore } from '~/ide/stores';
 import { file } from '../helpers';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 const GlTabStub = stubComponent(GlTab, {
   template: '<li><slot name="title" /></li>',
@@ -23,7 +23,6 @@ describe('RepoTab', () => {
 
   function createComponent(propsData) {
     wrapper = mount(RepoTab, {
-      localVue,
       store,
       propsData,
       stubs: {

spec/frontend/ide/components/repo_tabs_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import RepoTabs from '~/ide/components/repo_tabs.vue';
 import { createStore } from '~/ide/stores';
 import { file } from '../helpers';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('RepoTabs', () => {
   let wrapper;
@@ -22,7 +22,6 @@ describe('RepoTabs', () => {
         activeFile: file('activeFile'),
       },
       store,
-      localVue,
     });
   });
 

spec/frontend/ide/components/resizable_panel_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import ResizablePanel from '~/ide/components/resizable_panel.vue';
 import { SIDE_LEFT, SIDE_RIGHT } from '~/ide/constants';
@@ -8,8 +9,7 @@ const TEST_WIDTH = 500;
 const TEST_MIN_WIDTH = 400;
 
 describe('~/ide/components/resizable_panel', () => {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+  Vue.use(Vuex);
 
   let wrapper;
   let store;
@@ -33,7 +33,6 @@ describe('~/ide/components/resizable_panel', () => {
         ...props,
       },
       store,
-      localVue,
     });
   };
   const findResizer = () => wrapper.find(PanelResizer);

spec/frontend/ide/components/terminal/session_spec.js

 import { GlButton } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import TerminalSession from '~/ide/components/terminal/session.vue';
 import Terminal from '~/ide/components/terminal/terminal.vue';
@@ -13,8 +14,7 @@ import {
 
 const TEST_TERMINAL_PATH = 'terminal/path';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('IDE TerminalSession', () => {
   let wrapper;
@@ -33,7 +33,6 @@ describe('IDE TerminalSession', () => {
     });
 
     wrapper = shallowMount(TerminalSession, {
-      localVue,
       store,
       ...options,
     });

spec/frontend/ide/components/terminal/view_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import waitForPromises from 'helpers/wait_for_promises';
 import { TEST_HOST } from 'spec/test_constants';
@@ -9,8 +10,7 @@ import TerminalView from '~/ide/components/terminal/view.vue';
 const TEST_HELP_PATH = `${TEST_HOST}/help`;
 const TEST_SVG_PATH = `${TEST_HOST}/illustration.svg`;
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('IDE TerminalView', () => {
   let state;
@@ -30,7 +30,7 @@ describe('IDE TerminalView', () => {
       },
     });
 
-    wrapper = shallowMount(TerminalView, { localVue, store });
+    wrapper = shallowMount(TerminalView, { store });
 
     // Uses deferred components, so wait for those to load...
     await waitForPromises();

spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js

-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import TerminalSyncStatus from '~/ide/components/terminal_sync/terminal_sync_status.vue';
 import TerminalSyncStatusSafe from '~/ide/components/terminal_sync/terminal_sync_status_safe.vue';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('ide/components/terminal_sync/terminal_sync_status_safe', () => {
   let store;
@@ -16,7 +16,6 @@ describe('ide/components/terminal_sync/terminal_sync_status_safe', () => {
     });
 
     wrapper = shallowMount(TerminalSyncStatusSafe, {
-      localVue,
       store,
     });
   };

spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js

 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import TerminalSyncStatus from '~/ide/components/terminal_sync/terminal_sync_status.vue';
 import {
@@ -11,8 +12,7 @@ import {
 const TEST_MESSAGE = 'lorem ipsum dolar sit';
 const START_LOADING = 'START_LOADING';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('ide/components/terminal_sync/terminal_sync_status', () => {
   let moduleState;
@@ -35,7 +35,6 @@ describe('ide/components/terminal_sync/terminal_sync_status', () => {
     });
 
     wrapper = shallowMount(TerminalSyncStatus, {
-      localVue,
       store,
     });
   };

spec/frontend/ide/stores/plugins/terminal_spec.js

-import { createLocalVue } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import { TEST_HOST } from 'helpers/test_constants';
 import terminalModule from '~/ide/stores/modules/terminal';
@@ -11,8 +11,7 @@ const TEST_DATASET = {
   eeWebTerminalConfigHelpPath: `${TEST_HOST}/web/terminal/config/help`,
   eeWebTerminalRunnersHelpPath: `${TEST_HOST}/web/terminal/runners/help`,
 };
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('ide/stores/extend', () => {
   let store;

spec/frontend/import_entities/import_projects/components/import_projects_table_spec.js

 import { GlLoadingIcon, GlButton, GlIntersectionObserver, GlFormInput } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { STATUSES } from '~/import_entities/constants';
 import ImportProjectsTable from '~/import_entities/import_projects/components/import_projects_table.vue';
@@ -46,8 +46,7 @@ describe('ImportProjectsTable', () => {
     filterable,
     paginatable,
   } = {}) {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
+    Vue.use(Vuex);
 
     const store = new Vuex.Store({
       state: { ...state(), defaultTargetNamespace: USER_NAMESPACE, ...initialState },
@@ -67,7 +66,6 @@ describe('ImportProjectsTable', () => {
     });
 
     wrapper = shallowMount(ImportProjectsTable, {
-      localVue,
       store,
       propsData: {
         providerTitle,

spec/frontend/import_entities/import_projects/components/provider_repo_table_row_spec.js

 import { GlBadge, GlButton, GlDropdown } from '@gitlab/ui';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { STATUSES } from '~/import_entities//constants';
 import ImportGroupDropdown from '~/import_entities/components/group_dropdown.vue';
@@ -38,13 +38,11 @@ describe('ProviderRepoTableRow', () => {
   };
 
   function mountComponent(props) {
-    const localVue = createLocalVue();
-    localVue.use(Vuex);
+    Vue.use(Vuex);
 
     const store = initStore();
 
     wrapper = shallowMount(ProviderRepoTableRow, {
-      localVue,
       store,
       propsData: { availableNamespaces, userNamespace, ...props },
     });

spec/frontend/issues/related_merge_requests/components/related_merge_requests_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 import mockData from 'test_fixtures/issues/related_merge_requests.json';
 import axios from '~/lib/utils/axios_utils';
@@ -7,7 +7,6 @@ import createStore from '~/issues/related_merge_requests/store/index';
 import RelatedIssuableItem from '~/issuable/components/related_issuable_item.vue';
 
 const API_ENDPOINT = '/api/v4/projects/2/issues/33/related_merge_requests';
-const localVue = createLocalVue();
 
 describe('RelatedMergeRequests', () => {
   let wrapper;
@@ -21,8 +20,7 @@ describe('RelatedMergeRequests', () => {
     mock = new MockAdapter(axios);
     mock.onGet(`${API_ENDPOINT}?per_page=100`).reply(200, mockData, { 'x-total': 2 });
 
-    wrapper = mount(localVue.extend(RelatedMergeRequests), {
-      localVue,
+    wrapper = mount(RelatedMergeRequests, {
       store: createStore(),
       propsData: {
         endpoint: API_ENDPOINT,

spec/frontend/jobs/components/job_app_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import Vuex from 'vuex';
 import delayedJobFixture from 'test_fixtures/jobs/delayed.json';
@@ -16,8 +17,7 @@ import axios from '~/lib/utils/axios_utils';
 import job from '../mock_data';
 
 describe('Job App', () => {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+  Vue.use(Vuex);
 
   let store;
   let wrapper;

spec/frontend/jobs/components/log/log_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import Log from '~/jobs/components/log/log.vue';
 import { logLinesParserLegacy, logLinesParser } from '~/jobs/store/utils';
@@ -11,12 +12,10 @@ describe('Job Log', () => {
   let store;
   let origGon;
 
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+  Vue.use(Vuex);
 
   const createComponent = () => {
     wrapper = mount(Log, {
-      localVue,
       store,
     });
   };
@@ -91,12 +90,10 @@ describe('Job Log, infinitelyCollapsibleSections feature flag enabled', () => {
   let store;
   let origGon;
 
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+  Vue.use(Vuex);
 
   const createComponent = () => {
     wrapper = mount(Log, {
-      localVue,
       store,
     });
   };

spec/frontend/jobs/components/manual_variables_form_spec.js

 import { GlSprintf, GlLink } from '@gitlab/ui';
-import { createLocalVue, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import ManualVariablesForm from '~/jobs/components/manual_variables_form.vue';
 
-const localVue = createLocalVue();
-
 Vue.use(Vuex);
 
 describe('Manual Variables Form', () => {
@@ -29,9 +27,8 @@ describe('Manual Variables Form', () => {
     });
 
     wrapper = extendedWrapper(
-      mount(localVue.extend(ManualVariablesForm), {
+      mount(ManualVariablesForm, {
         propsData: { ...requiredProps, ...props },
-        localVue,
         store,
         stubs: {
           GlSprintf,

spec/frontend/lib/utils/vuex_module_mappers_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import {
@@ -10,13 +10,12 @@ import {
 
 const TEST_MODULE_NAME = 'testModuleName';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 // setup test component and store ----------------------------------------------
 //
 // These are used to indirectly test `vuex_module_mappers`.
-const TestComponent = Vue.extend({
+const TestComponent = {
   props: {
     vuexModule: {
       type: String,
@@ -47,7 +46,7 @@ const TestComponent = Vue.extend({
   <pre data-testid="state">{{ stateJson }}</pre>
   <pre data-testid="getters">{{ gettersJson }}</pre>
 </div>`,
-});
+};
 
 const createTestStore = () => {
   return new Vuex.Store({
@@ -94,7 +93,6 @@ describe('~/lib/utils/vuex_module_mappers', () => {
         vuexModule: TEST_MODULE_NAME,
       },
       store,
-      localVue,
     });
   });
 

spec/frontend/members/components/action_buttons/approve_access_request_button_spec.js

 import { GlButton, GlForm } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import ApproveAccessRequestButton from '~/members/components/action_buttons/approve_access_request_button.vue';
@@ -7,8 +8,7 @@ import { MEMBER_TYPES } from '~/members/constants';
 
 jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('ApproveAccessRequestButton', () => {
   let wrapper;
@@ -29,7 +29,6 @@ describe('ApproveAccessRequestButton', () => {
 
   const createComponent = (propsData = {}, state) => {
     wrapper = shallowMount(ApproveAccessRequestButton, {
-      localVue,
       store: createStore(state),
       provide: {
         namespace: MEMBER_TYPES.accessRequest,

spec/frontend/members/components/action_buttons/remove_group_link_button_spec.js

 import { GlButton } from '@gitlab/ui';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import RemoveGroupLinkButton from '~/members/components/action_buttons/remove_group_link_button.vue';
 import { MEMBER_TYPES } from '~/members/constants';
 import { group } from '../../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('RemoveGroupLinkButton', () => {
   let wrapper;
@@ -29,7 +29,6 @@ describe('RemoveGroupLinkButton', () => {
 
   const createComponent = () => {
     wrapper = mount(RemoveGroupLinkButton, {
-      localVue,
       store: createStore(),
       provide: {
         namespace: MEMBER_TYPES.group,

spec/frontend/members/components/action_buttons/remove_member_button_spec.js

 import { GlButton } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { modalData } from 'jest/members/mock_data';
 import RemoveMemberButton from '~/members/components/action_buttons/remove_member_button.vue';
 import { MEMBER_TYPES } from '~/members/constants';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('RemoveMemberButton', () => {
   let wrapper;
@@ -33,7 +33,6 @@ describe('RemoveMemberButton', () => {
 
   const createComponent = (propsData = {}, state) => {
     wrapper = shallowMount(RemoveMemberButton, {
-      localVue,
       store: createStore(state),
       provide: {
         namespace: MEMBER_TYPES.user,

spec/frontend/members/components/action_buttons/resend_invite_button_spec.js

 import { GlButton } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import ResendInviteButton from '~/members/components/action_buttons/resend_invite_button.vue';
@@ -7,8 +8,7 @@ import { MEMBER_TYPES } from '~/members/constants';
 
 jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('ResendInviteButton', () => {
   let wrapper;
@@ -29,7 +29,6 @@ describe('ResendInviteButton', () => {
 
   const createComponent = (propsData = {}, state) => {
     wrapper = shallowMount(ResendInviteButton, {
-      localVue,
       store: createStore(state),
       provide: {
         namespace: MEMBER_TYPES.invite,

spec/frontend/members/components/app_spec.js

 import { GlAlert } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import * as commonUtils from '~/lib/utils/common_utils';
 import MembersApp from '~/members/components/app.vue';
@@ -11,8 +11,7 @@ import { RECEIVE_MEMBER_ROLE_ERROR, HIDE_ERROR } from '~/members/store/mutation_
 import mutations from '~/members/store/mutations';
 
 describe('MembersApp', () => {
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
+  Vue.use(Vuex);
 
   let wrapper;
   let store;
@@ -33,7 +32,6 @@ describe('MembersApp', () => {
     });
 
     wrapper = shallowMount(MembersApp, {
-      localVue,
       propsData: {
         namespace: MEMBER_TYPES.group,
         tabQueryParamValue: TAB_QUERY_PARAM_VALUES.group,

spec/frontend/members/components/filter_sort/filter_sort_container_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import FilterSortContainer from '~/members/components/filter_sort/filter_sort_container.vue';
 import MembersFilteredSearchBar from '~/members/components/filter_sort/members_filtered_search_bar.vue';
 import SortDropdown from '~/members/components/filter_sort/sort_dropdown.vue';
 import { MEMBER_TYPES } from '~/members/constants';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('FilterSortContainer', () => {
   let wrapper;
@@ -32,7 +32,6 @@ describe('FilterSortContainer', () => {
     });
 
     wrapper = shallowMount(FilterSortContainer, {
-      localVue,
       store,
       provide: {
         namespace: MEMBER_TYPES.user,

spec/frontend/members/components/filter_sort/members_filtered_search_bar_spec.js

 import { GlFilteredSearchToken } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { redirectTo } from '~/lib/utils/url_utility';
@@ -18,8 +19,7 @@ jest.mock('~/lib/utils/url_utility', () => {
   };
 });
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('MembersFilteredSearchBar', () => {
   let wrapper;
@@ -44,7 +44,6 @@ describe('MembersFilteredSearchBar', () => {
     });
 
     wrapper = shallowMount(MembersFilteredSearchBar, {
-      localVue,
       provide: {
         sourceId: 1,
         canManageMembers: true,

spec/frontend/members/components/filter_sort/sort_dropdown_spec.js

 import { GlSorting, GlSortingItem } from '@gitlab/ui';
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import * as urlUtilities from '~/lib/utils/url_utility';
 import SortDropdown from '~/members/components/filter_sort/sort_dropdown.vue';
 import { MEMBER_TYPES } from '~/members/constants';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('SortDropdown', () => {
   let wrapper;
@@ -35,7 +35,6 @@ describe('SortDropdown', () => {
     });
 
     wrapper = mount(SortDropdown, {
-      localVue,
       provide: {
         sourceId: 1,
         namespace: MEMBER_TYPES.user,

spec/frontend/members/components/modals/leave_modal_spec.js

 import { GlModal, GlForm } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
-import { mount, createLocalVue, createWrapper } from '@vue/test-utils';
+import { mount, createWrapper } from '@vue/test-utils';
 import { cloneDeep } from 'lodash';
-import { nextTick } from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import LeaveModal from '~/members/components/modals/leave_modal.vue';
 import { LEAVE_MODAL_ID, MEMBER_TYPES } from '~/members/constants';
@@ -12,8 +12,7 @@ import { member } from '../../mock_data';
 
 jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('LeaveModal', () => {
   let wrapper;
@@ -34,7 +33,6 @@ describe('LeaveModal', () => {
 
   const createComponent = (propsData = {}, state) => {
     wrapper = mount(LeaveModal, {
-      localVue,
       store: createStore(state),
       provide: {
         namespace: MEMBER_TYPES.user,

spec/frontend/members/components/modals/remove_group_link_modal_spec.js

 import { GlModal, GlForm } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
-import { mount, createLocalVue, createWrapper } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { mount, createWrapper } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import RemoveGroupLinkModal from '~/members/components/modals/remove_group_link_modal.vue';
 import { REMOVE_GROUP_LINK_MODAL_ID, MEMBER_TYPES } from '~/members/constants';
@@ -9,8 +9,7 @@ import { group } from '../../mock_data';
 
 jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('RemoveGroupLinkModal', () => {
   let wrapper;
@@ -38,7 +37,6 @@ describe('RemoveGroupLinkModal', () => {
 
   const createComponent = (state) => {
     wrapper = mount(RemoveGroupLinkModal, {
-      localVue,
       store: createStore(state),
       provide: {
         namespace: MEMBER_TYPES.group,

spec/frontend/members/components/table/expiration_datepicker_spec.js

 import { GlDatepicker } from '@gitlab/ui';
-import { mount, createLocalVue } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { useFakeDate } from 'helpers/fake_date';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -8,8 +8,7 @@ import ExpirationDatepicker from '~/members/components/table/expiration_datepick
 import { MEMBER_TYPES } from '~/members/constants';
 import { member } from '../../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('ExpirationDatepicker', () => {
   // March 15th, 2020 3:00
@@ -49,7 +48,6 @@ describe('ExpirationDatepicker', () => {
       provide: {
         namespace: MEMBER_TYPES.user,
       },
-      localVue,
       store: createStore(),
       mocks: {
         $toast,

spec/frontend/members/components/table/members_table_cell_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import MembersTableCell from '~/members/components/table/members_table_cell.vue';
 import { MEMBER_TYPES } from '~/members/constants';
@@ -36,9 +37,8 @@ describe('MembersTableCell', () => {
     },
   };
 
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-  localVue.component('WrappedComponent', WrappedComponent);
+  Vue.use(Vuex);
+  Vue.component('WrappedComponent', WrappedComponent);
 
   const createStore = (state = {}) => {
     return new Vuex.Store({
@@ -50,7 +50,6 @@ describe('MembersTableCell', () => {
 
   const createComponent = (propsData, state) => {
     wrapper = mount(MembersTableCell, {
-      localVue,
       propsData,
       store: createStore(state),
       provide: {

spec/frontend/members/components/table/members_table_spec.js

 import { GlBadge, GlPagination, GlTable } from '@gitlab/ui';
-import { createLocalVue } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { mountExtended, extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -28,8 +28,7 @@ import {
   pagination,
 } from '../../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('MembersTable', () => {
   let wrapper;
@@ -56,7 +55,6 @@ describe('MembersTable', () => {
 
   const createComponent = (state, provide = {}) => {
     wrapper = mountExtended(MembersTable, {
-      localVue,
       propsData: {
         tabQueryParamValue: TAB_QUERY_PARAM_VALUES.invite,
       },

spec/frontend/members/components/table/role_dropdown_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { within } from '@testing-library/dom';
-import { mount, createWrapper, createLocalVue } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { mount, createWrapper } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import waitForPromises from 'helpers/wait_for_promises';
 import { BV_DROPDOWN_SHOW } from '~/lib/utils/constants';
@@ -10,8 +10,7 @@ import RoleDropdown from '~/members/components/table/role_dropdown.vue';
 import { MEMBER_TYPES } from '~/members/constants';
 import { member } from '../../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('RoleDropdown', () => {
   let wrapper;
@@ -42,7 +41,6 @@ describe('RoleDropdown', () => {
         permissions: {},
         ...propsData,
       },
-      localVue,
       store: createStore(),
       mocks: {
         $toast,

spec/frontend/merge_conflicts/components/merge_conflict_resolver_app_spec.js

 import { GlSprintf } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import InlineConflictLines from '~/merge_conflicts/components/inline_conflict_lines.vue';
 import ParallelConflictLines from '~/merge_conflicts/components/parallel_conflict_lines.vue';
@@ -8,8 +9,7 @@ import { createStore } from '~/merge_conflicts/store';
 import { decorateFiles } from '~/merge_conflicts/utils';
 import { conflictsMock } from '../mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('Merge Conflict Resolver App', () => {
   let wrapper;

spec/frontend/monitoring/components/embeds/embed_group_spec.js

 import { GlButton, GlCard } from '@gitlab/ui';
-import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import { TEST_HOST } from 'helpers/test_constants';
 import EmbedGroup from '~/monitoring/components/embeds/embed_group.vue';
@@ -12,8 +13,7 @@ import {
   multipleEmbedProps,
 } from './mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('Embed Group', () => {
   let wrapper;
@@ -23,7 +23,6 @@ describe('Embed Group', () => {
   function mountComponent({ urls = [TEST_HOST], shallow = true, stubs } = {}) {
     const mountMethod = shallow ? shallowMount : mount;
     wrapper = mountMethod(EmbedGroup, {
-      localVue,
       store,
       propsData: {
         urls,

spec/frontend/monitoring/components/embeds/metric_embed_spec.js

-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import { setHTMLFixture } from 'helpers/fixtures';
 import { TEST_HOST } from 'helpers/test_constants';
@@ -6,8 +7,7 @@ import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
 import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
 import { groups, initialState, metricsData, metricsWithData } from './mock_data';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
+Vue.use(Vuex);
 
 describe('MetricEmbed', () => {
   let wrapper;
@@ -17,7 +17,6 @@ describe('MetricEmbed', () => {
 
   function mountComponent() {
     wrapper = shallowMount(MetricEmbed, {
-      localVue,
       store,
       propsData: {
         dashboardUrl: TEST_HOST,

spec/frontend/monitoring/router_spec.js

-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Dashboard from '~/monitoring/components/dashboard.vue';
 import DashboardPage from '~/monitoring/pages/dashboard_page.vue';
@@ -25,8 +26,7 @@ describe('Monitoring router', () => {
   let store;
 
   const createWrapper = (basePath, routeArg) => {
-    const localVue = createLocalVue();
-    localVue.use(VueRouter);
+    Vue.use(VueRouter);
 
     router = createRouter(basePath);
     if (routeArg !== undefined) {
@@ -34,7 +34,6 @@ describe('Monitoring router', () => {
     }
 
     return mount(MockApp, {
-      localVue,
       store,
       router,
     });