Fix some vue-test-utils violations

- Karma specs need to have `localVue` extend component
- Must have `sync: false`

ee/spec/frontend/approvals/components/approval_check_popover_spec.js

@@ -4,11 +4,12 @@ import { GlPopover, GlLink } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import component from 'ee/approvals/components/approval_check_popover.vue';
 
+const localVue = createLocalVue();
+
 describe('Approval Check Popover', () => {
   let wrapper;
 
   beforeEach(() => {
-    const localVue = createLocalVue();
     wrapper = shallowMount(component, {
       localVue,
       propsData: {

ee/spec/frontend/related_items_tree/components/tree_item_body_spec.js

@@ -28,9 +28,10 @@ const mockItem = Object.assign({}, mockIssue1, {
   assignees: epicUtils.extractIssueAssignees(mockIssue1.assignees),
 });
 
+const localVue = createLocalVue();
+
 const createComponent = (parentItem = mockParentItem, item = mockItem) => {
   const store = createDefaultStore();
-  const localVue = createLocalVue();
   const children = epicUtils.processQueryResponse(mockQueryResponse.data.group);
 
   store.dispatch('setInitialParentItem', mockParentItem);

ee/spec/frontend/related_items_tree/components/tree_item_spec.js

@@ -23,9 +23,10 @@ const mockItem = Object.assign({}, mockEpic1, {
   pathIdSeparator: PathIdSeparator.Epic,
 });
 
+const localVue = createLocalVue();
+
 const createComponent = (parentItem = mockParentItem, item = mockItem) => {
   const store = createDefaultStore();
-  const localVue = createLocalVue();
   const children = epicUtils.processQueryResponse(mockQueryResponse.data.group);
 
   store.dispatch('setInitialParentItem', mockParentItem);
@@ -44,7 +45,7 @@ const createComponent = (parentItem = mockParentItem, item = mockItem) => {
     isSubItem: true,
   });
 
-  return shallowMount(TreeItem, {
+  return shallowMount(localVue.extend(TreeItem), {
     localVue,
     store,
     stubs: {
@@ -54,6 +55,7 @@ const createComponent = (parentItem = mockParentItem, item = mockItem) => {
       parentItem,
       item,
     },
+    sync: false,
   });
 };
 

ee/spec/javascripts/batch_comments/components/diff_file_drafts_spec.js

@@ -22,7 +22,12 @@ describe('Batch comments diff file drafts component', () => {
       },
     });
 
-    vm = shallowMount(DiffFileDrafts, { store, localVue, propsData: { fileHash: 'filehash' } });
+    vm = shallowMount(localVue.extend(DiffFileDrafts), {
+      store,
+      localVue,
+      propsData: { fileHash: 'filehash' },
+      sync: false,
+    });
   }
 
   afterEach(() => {

ee/spec/javascripts/batch_comments/components/draft_note_spec.js

@@ -5,6 +5,8 @@ import { createStore } from 'ee/batch_comments/stores';
 import '~/behaviors/markdown/render_gfm';
 import { createDraft } from '../mock_data';
 
+const localVue = createLocalVue();
+
 describe('Batch comments draft note component', () => {
   let wrapper;
   let draft;
@@ -14,8 +16,7 @@ describe('Batch comments draft note component', () => {
 
     draft = createDraft();
 
-    const localVue = createLocalVue();
-    wrapper = shallowMount(DraftNote, {
+    wrapper = shallowMount(localVue.extend(DraftNote), {
       store,
       propsData: { draft },
       sync: false,

ee/spec/javascripts/custom_metrics/custom_metrics_form_spec.js

@@ -17,7 +17,7 @@ describe('CustomMetricsForm', () => {
       legend: '',
     },
   }) {
-    wrapper = shallowMount(CustomMetricsForm, {
+    wrapper = shallowMount(localVue.extend(CustomMetricsForm), {
       localVue,
       sync: false,
       propsData: {

ee/spec/javascripts/issues_analytics/components/issues_analytics_spec.js

-import Vue from 'vue';
 import IssuesAnalytics from 'ee/issues_analytics/components/issues_analytics.vue';
 import EmptyState from 'ee/issues_analytics/components/empty_state.vue';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { createStore } from 'ee/issues_analytics/stores';
 
+const localVue = createLocalVue();
+
 describe('Issues Analytics component', () => {
   let vm;
   let store;
   let mountComponent;
-  const Component = Vue.extend(IssuesAnalytics);
   const mockChartData = { '2017-11': 0, '2017-12': 2 };
 
   beforeEach(() => {
@@ -22,13 +22,14 @@ describe('Issues Analytics component', () => {
         filterBlockEl: document.querySelector('#mock-filter'),
       };
 
-      return shallowMount(Component, {
+      return shallowMount(localVue.extend(IssuesAnalytics), {
         propsData: props,
         stubs: {
           GlColumnChart: true,
           EmptyState,
         },
         store,
+        localVue,
       }).vm;
     };
 

ee/spec/javascripts/monitoring/components/dashboard_spec.js

@@ -14,12 +14,25 @@ import propsData from 'spec/monitoring/components/dashboard_spec';
 import CustomMetricsFormFields from 'ee/custom_metrics/components/custom_metrics_form_fields.vue';
 import * as types from '~/monitoring/stores/mutation_types';
 
+const localVue = createLocalVue();
+
 describe('Dashboard', () => {
   let Component;
   let mock;
   let store;
   let vm;
-  const localVue = createLocalVue();
+
+  const createComponent = (props = {}) => {
+    vm = shallowMount(localVue.extend(Component), {
+      propsData: {
+        ...propsData,
+        ...props,
+      },
+      store,
+      sync: false,
+      localVue,
+    });
+  };
 
   beforeEach(() => {
     setFixtures(`
@@ -60,16 +73,12 @@ describe('Dashboard', () => {
   describe('add custom metrics', () => {
     describe('when not available', () => {
       beforeEach(() => {
-        vm = shallowMount(Component, {
-          propsData: {
-            ...propsData,
-            customMetricsAvailable: false,
-            customMetricsPath: '/endpoint',
-            hasMetrics: true,
-            prometheusAlertsAvailable: true,
-            alertsEndpoint: '/endpoint',
-          },
-          store,
+        createComponent({
+          customMetricsAvailable: false,
+          customMetricsPath: '/endpoint',
+          hasMetrics: true,
+          prometheusAlertsAvailable: true,
+          alertsEndpoint: '/endpoint',
         });
       });
 
@@ -83,16 +92,12 @@ describe('Dashboard', () => {
 
     describe('when available', () => {
       beforeEach(() => {
-        vm = shallowMount(Component, {
-          propsData: {
-            ...propsData,
-            customMetricsAvailable: true,
-            customMetricsPath: '/endpoint',
-            hasMetrics: true,
-            prometheusAlertsAvailable: true,
-            alertsEndpoint: '/endpoint',
-          },
-          store,
+        createComponent({
+          customMetricsAvailable: true,
+          customMetricsPath: '/endpoint',
+          hasMetrics: true,
+          prometheusAlertsAvailable: true,
+          alertsEndpoint: '/endpoint',
         });
 
         setupComponentStore(vm);

ee/spec/javascripts/notes/components/note_actions_spec.js

@@ -4,20 +4,20 @@ import noteActions from '~/notes/components/note_actions.vue';
 import { TEST_HOST } from 'spec/test_constants';
 import { userDataMock } from 'spec/notes/mock_data';
 
+const localVue = createLocalVue();
+
 describe('noteActions', () => {
   let wrapper;
   let store;
   let props;
 
-  const createWrapper = propsData => {
-    const localVue = createLocalVue();
-    return shallowMount(noteActions, {
+  const createWrapper = propsData =>
+    shallowMount(localVue.extend(noteActions), {
       store,
       propsData,
       localVue,
       sync: false,
     });
-  };
 
   beforeEach(() => {
     store = createStore();

ee/spec/javascripts/onboarding/onboarding_helper/components/action_popover_spec.js

 import component from 'ee/onboarding/onboarding_helper/components/action_popover.vue';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import eventHub from 'ee/onboarding/onboarding_helper/event_hub';
 
+const localVue = createLocalVue();
+
 describe('User onboarding action popover', () => {
   let wrapper;
   let props;
@@ -11,29 +13,29 @@ describe('User onboarding action popover', () => {
   const placement = 'top';
   const showDefault = true;
 
-  beforeEach(() => {
+  const createComponent = () => {
     props = {
       target,
       content,
       placement,
       showDefault,
     };
-    wrapper = shallowMount(component, {
+    wrapper = shallowMount(localVue.extend(component), {
       propsData: props,
+      sync: false,
+      localVue,
     });
-  });
+  };
 
   afterEach(() => {
     wrapper.destroy();
   });
 
-  describe('mounted', () => {
+  describe('when mounted', () => {
     it("binds 'onboardingHelper.showActionPopover', 'onboardingHelper.hideActionPopover' and 'onboardingHelper.destroyActionPopover' event listener on eventHub", () => {
       spyOn(eventHub, '$on');
 
-      const wrapperX = shallowMount(component, {
-        propsData: props,
-      });
+      createComponent();
 
       expect(eventHub.$on).toHaveBeenCalledWith(
         'onboardingHelper.showActionPopover',
@@ -49,38 +51,42 @@ describe('User onboarding action popover', () => {
         'onboardingHelper.destroyActionPopover',
         jasmine.any(Function),
       );
-
-      wrapperX.destroy();
     });
   });
 
-  describe('beforeDestroy', () => {
-    it("unbinds 'showActionPopover', 'hideActionPopover' and 'destroyActionPopover' event handler", () => {
-      spyOn(eventHub, '$off');
+  describe('after mount', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    describe('beforeDestroy', () => {
+      it("unbinds 'showActionPopover', 'hideActionPopover' and 'destroyActionPopover' event handler", () => {
+        spyOn(eventHub, '$off');
 
-      wrapper.destroy();
+        wrapper.destroy();
 
-      expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.showActionPopover');
-      expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.hideActionPopover');
-      expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.destroyActionPopover');
+        expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.showActionPopover');
+        expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.hideActionPopover');
+        expect(eventHub.$off).toHaveBeenCalledWith('onboardingHelper.destroyActionPopover');
+      });
     });
-  });
 
-  describe('methods', () => {
-    describe('toggleShowPopover', () => {
-      it('updates the showPopover property', () => {
-        wrapper.vm.showPopover = false;
+    describe('methods', () => {
+      describe('toggleShowPopover', () => {
+        it('updates the showPopover property', () => {
+          wrapper.vm.showPopover = false;
 
-        wrapper.vm.toggleShowPopover(true);
+          wrapper.vm.toggleShowPopover(true);
 
-        expect(wrapper.vm.showPopover).toBeTruthy();
+          expect(wrapper.vm.showPopover).toBeTruthy();
+        });
       });
     });
-  });
 
-  describe('template', () => {
-    it('shows the content passed in as prop', () => {
-      expect(wrapper.text()).toEqual(content);
+    describe('template', () => {
+      it('shows the content passed in as prop', () => {
+        expect(wrapper.text()).toEqual(content);
+      });
     });
   });
 });

ee/spec/javascripts/onboarding/onboarding_helper/components/help_content_popover_spec.js

 import component from 'ee/onboarding/onboarding_helper/components/help_content_popover.vue';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
 
+const localVue = createLocalVue();
+
 describe('User onboarding help content popover', () => {
   let wrapper;
 
@@ -42,7 +44,7 @@ describe('User onboarding help content popover', () => {
   };
 
   function createComponent(propsData) {
-    wrapper = shallowMount(component, { propsData });
+    wrapper = shallowMount(localVue.extend(component), { propsData, localVue, sync: false });
   }
 
   afterEach(() => {

ee/spec/javascripts/onboarding/onboarding_helper/components/onboarding_helper_spec.js

 import component from 'ee/onboarding/onboarding_helper/components/onboarding_helper.vue';
 import TourPartsList from 'ee/onboarding/onboarding_helper/components/tour_parts_list.vue';
 import Icon from '~/vue_shared/components/icon.vue';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlProgressBar, GlLoadingIcon } from '@gitlab/ui';
 import Tracking from '~/tracking';
 
+const localVue = createLocalVue();
+
 describe('User onboarding tour parts list', () => {
   let wrapper;
 
@@ -29,7 +31,7 @@ describe('User onboarding tour parts list', () => {
   };
 
   function createComponent(propsData) {
-    wrapper = shallowMount(component, { propsData });
+    wrapper = shallowMount(localVue.extend(component), { propsData, localVue, sync: false });
   }
 
   beforeEach(() => {

ee/spec/javascripts/onboarding/onboarding_helper/components/tour_parts_list_spec.js

 import component from 'ee/onboarding/onboarding_helper/components/tour_parts_list.vue';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+
+const localVue = createLocalVue();
 
 describe('User onboarding tour parts list', () => {
   let wrapper;
@@ -18,7 +20,7 @@ describe('User onboarding tour parts list', () => {
   let tourItems;
 
   function createComponent(propsData) {
-    wrapper = shallowMount(component, { propsData });
+    wrapper = shallowMount(localVue.extend(component), { propsData, localVue, sync: false });
   }
 
   beforeEach(() => {

ee/spec/javascripts/onboarding/onboarding_welcome/welcome_page_spec.js

@@ -3,9 +3,11 @@ import component from 'ee/onboarding/onboarding_welcome/components/welcome_page.
 import ActionPopover from 'ee/onboarding/onboarding_helper/components/action_popover.vue';
 import HelpContentPopover from 'ee/onboarding/onboarding_helper/components/help_content_popover.vue';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import onboardingUtils from 'ee/onboarding/utils';
 
+const localVue = createLocalVue();
+
 describe('User onboarding welcome page', () => {
   let wrapper;
   const props = {
@@ -16,7 +18,7 @@ describe('User onboarding welcome page', () => {
   };
 
   function createComponent(propsData) {
-    wrapper = shallowMount(component, { propsData });
+    wrapper = shallowMount(localVue.extend(component), { propsData, localVue, sync: false });
   }
 
   afterEach(() => {

ee/spec/javascripts/operations/components/dashboard/project_spec.js

@@ -14,14 +14,17 @@ describe('project component', () => {
   const ProjectComponent = localVue.extend(Project);
   let wrapper;
 
-  beforeEach(() => {
+  const createComponent = (props = {}) => {
     wrapper = shallowMount(ProjectComponent, {
       sync: false,
       store,
       localVue,
-      propsData: { project: mockOneProject },
+      propsData: {
+        project: mockOneProject,
+        ...props,
+      },
     });
-  });
+  };
 
   afterEach(() => {
     wrapper.destroy();
@@ -32,16 +35,12 @@ describe('project component', () => {
 
     describe('can upgrade project group', () => {
       beforeEach(() => {
-        project = {
-          ...mockOneProject,
-          upgrade_required: true,
-          upgrade_path: '/upgrade',
-        };
-        wrapper = shallowMount(ProjectComponent, {
-          sync: false,
-          store,
-          localVue,
-          propsData: { project },
+        createComponent({
+          project: {
+            ...mockOneProject,
+            upgrade_required: true,
+            upgrade_path: '/upgrade',
+          },
         });
       });
 
@@ -67,16 +66,12 @@ describe('project component', () => {
 
     describe('cannot upgrade project group', () => {
       beforeEach(() => {
-        project = {
-          ...mockOneProject,
-          upgrade_required: true,
-          upgrade_path: '',
-        };
-        wrapper = shallowMount(ProjectComponent, {
-          sync: false,
-          store,
-          localVue,
-          propsData: { project },
+        createComponent({
+          project: {
+            ...mockOneProject,
+            upgrade_required: true,
+            upgrade_path: '',
+          },
         });
       });
 
@@ -91,6 +86,10 @@ describe('project component', () => {
   });
 
   describe('wrapped components', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     describe('project header', () => {
       it('binds project', () => {
         const header = wrapper.find(ProjectHeader);

ee/spec/javascripts/related_items_tree/components/create_epic_form_spec.js

@@ -3,14 +3,15 @@ import { GlButton } from '@gitlab/ui';
 
 import CreateEpicForm from 'ee/related_items_tree/components/create_epic_form.vue';
 
-const createComponent = (isSubmitting = false) => {
-  const localVue = createLocalVue();
+const localVue = createLocalVue();
 
-  return mount(CreateEpicForm, {
+const createComponent = (isSubmitting = false) => {
+  return mount(localVue.extend(CreateEpicForm), {
     localVue,
     propsData: {
       isSubmitting,
     },
+    sync: false,
   });
 };
 

ee/spec/javascripts/related_items_tree/components/related_items_tree_app_spec.js

@@ -11,16 +11,18 @@ import IssueActionsSplitButton from 'ee/related_items_tree/components/issue_acti
 
 import { mockInitialConfig, mockParentItem } from '../mock_data';
 
+const localVue = createLocalVue();
+
 const createComponent = () => {
   const store = createDefaultStore();
-  const localVue = createLocalVue();
 
   store.dispatch('setInitialConfig', mockInitialConfig);
   store.dispatch('setInitialParentItem', mockParentItem);
 
-  return shallowMount(RelatedItemsTreeApp, {
+  return shallowMount(localVue.extend(RelatedItemsTreeApp), {
     localVue,
     store,
+    sync: false,
   });
 };
 

ee/spec/javascripts/related_items_tree/components/related_items_tree_body_spec.js

@@ -4,10 +4,10 @@ import RelatedItemsBody from 'ee/related_items_tree/components/related_items_tre
 
 import { mockParentItem } from '../mock_data';
 
-const createComponent = (parentItem = mockParentItem, children = []) => {
-  const localVue = createLocalVue();
+const localVue = createLocalVue();
 
-  return shallowMount(RelatedItemsBody, {
+const createComponent = (parentItem = mockParentItem, children = []) => {
+  return shallowMount(localVue.extend(RelatedItemsBody), {
     localVue,
     stubs: {
       'tree-root': true,
@@ -16,6 +16,7 @@ const createComponent = (parentItem = mockParentItem, children = []) => {
       parentItem,
       children,
     },
+    sync: false,
   });
 };
 

ee/spec/javascripts/related_items_tree/components/state_tooltip_spec.js

@@ -14,16 +14,16 @@ const mockClosedAt = `${currentDate.getFullYear() - 1}-${currentDate.getMonth()
   1}-${currentDate.getDate()}`;
 const mockClosedAtYear = currentDate.getFullYear() - 1;
 
+const localVue = createLocalVue();
+
 const createComponent = ({
   getTargetRef = () => {},
   isOpen = false,
   state = 'closed',
   createdAt = mockCreatedAt,
   closedAt = mockClosedAt,
-}) => {
-  const localVue = createLocalVue();
-
-  return shallowMount(StateTooltip, {
+}) =>
+  shallowMount(localVue.extend(StateTooltip), {
     localVue,
     propsData: {
       getTargetRef,
@@ -32,8 +32,8 @@ const createComponent = ({
       createdAt,
       closedAt,
     },
+    sync: false,
   });
-};
 
 describe('RelatedItemsTree', () => {
   describe('RelatedItemsTreeHeader', () => {

ee/spec/javascripts/related_items_tree/components/tree_item_remove_modal_spec.js

@@ -16,9 +16,10 @@ const mockItem = Object.assign({}, mockIssue1, {
   assignees: epicUtils.extractIssueAssignees(mockIssue1.assignees),
 });
 
+const localVue = createLocalVue();
+
 const createComponent = (parentItem = mockParentItem, item = mockItem) => {
   const store = createDefaultStore();
-  const localVue = createLocalVue();
   const children = epicUtils.processQueryResponse(mockQueryResponse.data.group);
 
   store.dispatch('setInitialParentItem', mockParentItem);
@@ -36,9 +37,10 @@ const createComponent = (parentItem = mockParentItem, item = mockItem) => {
     item,
   });
 
-  return shallowMount(TreeItemRemoveModal, {
+  return shallowMount(localVue.extend(TreeItemRemoveModal), {
     localVue,
     store,
+    sync: false,
   });
 };
 

ee/spec/javascripts/related_items_tree/components/tree_root_spec.js

@@ -18,13 +18,14 @@ import {
 
 const { epic } = mockQueryResponse.data.group;
 
+const localVue = createLocalVue();
+
 const createComponent = ({
   parentItem = mockParentItem,
   epicPageInfo = epic.children.pageInfo,
   issuesPageInfo = epic.issues.pageInfo,
 } = {}) => {
   const store = createDefaultStore();
-  const localVue = createLocalVue();
   const children = epicUtils.processQueryResponse(mockQueryResponse.data.group);
 
   store.dispatch('setInitialParentItem', mockParentItem);
@@ -44,7 +45,7 @@ const createComponent = ({
     pageInfo: issuesPageInfo,
   });
 
-  return shallowMount(TreeRoot, {
+  return shallowMount(localVue.extend(TreeRoot), {
     localVue,
     store,
     stubs: {
@@ -55,6 +56,7 @@ const createComponent = ({
       parentItem,
       children,
     },
+    sync: false,
   });
 };
 

ee/spec/javascripts/security_dashboard/components/vulnerability_chart_button_spec.js

 import Vue from 'vue';
 import component from 'ee/security_dashboard/components/vulnerability_chart_buttons.vue';
 import { DAYS } from 'ee/security_dashboard/store/modules/vulnerabilities/constants';
-import { shallowMount, mount } from '@vue/test-utils';
+import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
+
+const localVue = createLocalVue();
 
 describe('Vulnerability Chart Buttons', () => {
+  let wrapper;
   const Component = Vue.extend(component);
   const days = [DAYS.THIRTY, DAYS.SIXTY, DAYS.NINETY];
 
+  const createWrapper = (props = {}, mountfn = shallowMount) => {
+    wrapper = mountfn(localVue.extend(Component), {
+      propsData: { days, ...props },
+      localVue,
+      sync: false,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
   describe('when rendering the buttons', () => {
     it('should render with 90 days selected', () => {
       const activeDay = DAYS.NINETY;
-      const wrapper = shallowMount(Component, { propsData: { days, activeDay } });
+      createWrapper({ activeDay });
+
       const activeButton = wrapper.find('[data-days="90"].active');
 
       expect(activeButton.attributes('data-days')).toMatch('90');
@@ -18,7 +34,8 @@ describe('Vulnerability Chart Buttons', () => {
 
     it('should render with 60 days selected', () => {
       const activeDay = DAYS.SIXTY;
-      const wrapper = shallowMount(Component, { propsData: { days, activeDay } });
+      createWrapper({ activeDay });
+
       const activeButton = wrapper.find('[data-days="60"].active');
 
       expect(activeButton.attributes('data-days')).toMatch('60');
@@ -26,7 +43,8 @@ describe('Vulnerability Chart Buttons', () => {
 
     it('should render with 30 days selected', () => {
       const activeDay = DAYS.THIRTY;
-      const wrapper = shallowMount(Component, { propsData: { days, activeDay } });
+      createWrapper({ activeDay });
+
       const activeButton = wrapper.find('[data-days="30"].active');
 
       expect(activeButton.attributes('data-days')).toMatch('30');
@@ -35,10 +53,9 @@ describe('Vulnerability Chart Buttons', () => {
 
   describe('when clicking the button', () => {
     const activeDay = DAYS.THIRTY;
-    let wrapper;
 
     beforeEach(() => {
-      wrapper = mount(Component, { propsData: { days, activeDay }, sync: false });
+      createWrapper({ activeDay }, mount);
     });
 
     it('should call the clickHandler', () => {

ee/spec/javascripts/storage_counter/components/app_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import StorageApp from 'ee/storage_counter/components/app.vue';
 import Project from 'ee/storage_counter/components/project.vue';
 import { projects, withRootStorageStatistics } from '../data';
 
+const localVue = createLocalVue();
+
 describe('Storage counter app', () => {
   let wrapper;
 
@@ -15,10 +17,11 @@ describe('Storage counter app', () => {
       },
     };
 
-    wrapper = shallowMount(StorageApp, {
+    wrapper = shallowMount(localVue.extend(StorageApp), {
       propsData: { namespacePath: 'h5bp', helpPagePath: 'help' },
       mocks: { $apollo },
       sync: true,
+      localVue,
     });
   }
 

ee/spec/javascripts/storage_counter/components/project_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
 import Project from 'ee/storage_counter/components/project.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
@@ -22,11 +22,15 @@ const data = {
   },
 };
 
+const localVue = createLocalVue();
+
 function factory(project) {
-  wrapper = shallowMount(Project, {
+  wrapper = shallowMount(localVue.extend(Project), {
     propsData: {
       project,
     },
+    localVue,
+    sync: false,
   });
 }
 

ee/spec/javascripts/storage_counter/components/storage_row_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import StorageRow from 'ee/storage_counter/components/storage_row.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 
@@ -7,13 +7,16 @@ const data = {
   name: 'LFS Package',
   value: 1293346,
 };
+const localVue = createLocalVue();
 
 function factory({ name, value }) {
-  wrapper = shallowMount(StorageRow, {
+  wrapper = shallowMount(localVue.extend(StorageRow), {
     propsData: {
       name,
       value,
     },
+    localVue,
+    sync: false,
   });
 }
 

spec/javascripts/diffs/components/settings_dropdown_spec.js

@@ -4,15 +4,14 @@ import diffModule from '~/diffs/store/modules';
 import SettingsDropdown from '~/diffs/components/settings_dropdown.vue';
 import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 describe('Diff settiings dropdown component', () => {
   let vm;
   let actions;
 
   function createComponent(extendStore = () => {}) {
-    const localVue = createLocalVue();
-
-    localVue.use(Vuex);
-
     const store = new Vuex.Store({
       modules: {
         diffs: {
@@ -26,9 +25,10 @@ describe('Diff settiings dropdown component', () => {
 
     extendStore(store);
 
-    vm = mount(SettingsDropdown, {
+    vm = mount(localVue.extend(SettingsDropdown), {
       localVue,
       store,
+      sync: false,
     });
   }
 

spec/javascripts/frequent_items/components/frequent_items_list_item_spec.js

-import Vue from 'vue';
 import frequentItemsListItemComponent from '~/frequent_items/components/frequent_items_list_item.vue';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { trimText } from 'spec/helpers/text_helper';
 import { mockProject } from '../mock_data'; // can also use 'mockGroup', but not useful to test here
 
-const createComponent = () => {
-  const Component = Vue.extend(frequentItemsListItemComponent);
+const localVue = createLocalVue();
 
-  return shallowMount(Component, {
+const createComponent = () =>
+  shallowMount(localVue.extend(frequentItemsListItemComponent), {
     propsData: {
       itemId: mockProject.id,
       itemName: mockProject.name,
@@ -15,8 +14,9 @@ const createComponent = () => {
       webUrl: mockProject.webUrl,
       avatarUrl: mockProject.avatarUrl,
     },
+    sync: false,
+    localVue,
   });
-};
 
 describe('FrequentItemsListItemComponent', () => {
   let wrapper;

spec/javascripts/frequent_items/components/frequent_items_search_input_spec.js

-import Vue from 'vue';
 import searchComponent from '~/frequent_items/components/frequent_items_search_input.vue';
 import eventHub from '~/frequent_items/event_hub';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 
-const createComponent = (namespace = 'projects') => {
-  const Component = Vue.extend(searchComponent);
+const localVue = createLocalVue();
 
-  return shallowMount(Component, { propsData: { namespace } });
-};
+const createComponent = (namespace = 'projects') =>
+  shallowMount(localVue.extend(searchComponent), {
+    propsData: { namespace },
+    localVue,
+    sync: false,
+  });
 
 describe('FrequentItemsSearchInputComponent', () => {
   let wrapper;
@@ -40,7 +42,7 @@ describe('FrequentItemsSearchInputComponent', () => {
       spyOn(eventHub, '$on');
       const vmX = createComponent().vm;
 
-      Vue.nextTick(() => {
+      localVue.nextTick(() => {
         expect(eventHub.$on).toHaveBeenCalledWith(
           `${vmX.namespace}-dropdownOpen`,
           jasmine.any(Function),
@@ -58,7 +60,7 @@ describe('FrequentItemsSearchInputComponent', () => {
       vmX.$mount();
       vmX.$destroy();
 
-      Vue.nextTick(() => {
+      localVue.nextTick(() => {
         expect(eventHub.$off).toHaveBeenCalledWith(
           `${vmX.namespace}-dropdownOpen`,
           jasmine.any(Function),

spec/javascripts/jobs/components/manual_variables_form_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
 import Form from '~/jobs/components/manual_variables_form.vue';
 
+const localVue = createLocalVue();
+
 describe('Manual Variables Form', () => {
   let wrapper;
   const requiredProps = {
@@ -14,8 +16,10 @@ describe('Manual Variables Form', () => {
   };
 
   const factory = (props = {}) => {
-    wrapper = shallowMount(Form, {
+    wrapper = shallowMount(localVue.extend(Form), {
       propsData: props,
+      localVue,
+      sync: false,
     });
   };