Merge branch 'fe-fix-karma-vue-test-utils-violations' into 'master'

Fe fix karma vue test utils violations

Closes #32213

See merge request gitlab-org/gitlab!18765

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/notes/components/note_actions_spec.js

@@ -4,21 +4,21 @@ import noteActions from '~/notes/components/note_actions.vue';
 import { TEST_HOST } from 'spec/test_constants';
 import { userDataMock } from '../../../../spec/frontend/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,
       attachToDocument: true,
     });
-  };
 
   beforeEach(() => {
     store = createStore();

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,52 +73,37 @@ describe('Dashboard', () => {
   describe('add custom metrics', () => {
     describe('when not available', () => {
       beforeEach(() => {
-        vm = shallowMount(Component, {
-          propsData: {
-            ...propsData,
+        createComponent({
           customMetricsAvailable: false,
           customMetricsPath: '/endpoint',
           hasMetrics: true,
           prometheusAlertsAvailable: true,
           alertsEndpoint: '/endpoint',
-          },
-          store,
         });
       });
 
-      it('does not render add button on the dashboard', done => {
-        setTimeout(() => {
+      it('does not render add button on the dashboard', () => {
         expect(vm.element.querySelector('.js-add-metric-button')).toBe(null);
-          done();
-        });
       });
     });
 
     describe('when available', () => {
-      beforeEach(() => {
-        vm = shallowMount(Component, {
-          propsData: {
-            ...propsData,
+      beforeEach(done => {
+        createComponent({
           customMetricsAvailable: true,
           customMetricsPath: '/endpoint',
           hasMetrics: true,
           prometheusAlertsAvailable: true,
           alertsEndpoint: '/endpoint',
-          },
-          store,
         });
 
         setupComponentStore(vm);
-      });
 
-      it('renders add button on the dashboard', done => {
-        localVue.nextTick(() => {
-          expect(vm.element.querySelector('.js-add-metric-button').innerText).toContain(
-            'Add metric',
-          );
-
-          done();
+        vm.vm.$nextTick(done);
       });
+
+      it('renders add button on the dashboard', () => {
+        expect(vm.element.querySelector('.js-add-metric-button').innerText).toContain('Add metric');
       });
 
       it('uses modal for custom metrics form', () => {

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,11 +51,14 @@ describe('User onboarding action popover', () => {
         'onboardingHelper.destroyActionPopover',
         jasmine.any(Function),
       );
-
-      wrapperX.destroy();
     });
   });
 
+  describe('after mount', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
     describe('beforeDestroy', () => {
       it("unbinds 'showActionPopover', 'hideActionPopover' and 'destroyActionPopover' event handler", () => {
         spyOn(eventHub, '$off');
@@ -83,4 +88,5 @@ describe('User onboarding action popover', () => {
         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(() => {
@@ -125,10 +127,16 @@ describe('User onboarding tour parts list', () => {
 
   describe('watch', () => {
     describe('watch initialShow', () => {
-      it('sets showPopover to true if initialShow is true', () => {
+      it('sets showPopover to true if initialShow is true', done => {
         wrapper.setProps({ initialShow: true });
 
+        wrapper.vm
+          .$nextTick()
+          .then(() => {
             expect(wrapper.vm.showPopover).toBe(true);
+          })
+          .then(done)
+          .catch(done.fail);
       });
     });
 
@@ -314,7 +322,7 @@ describe('User onboarding tour parts list', () => {
       expect(wrapper.find('.qa-toggle-btn').exists()).toBe(true);
     });
 
-    it('renders the proper toggle button icons', () => {
+    it('renders the proper toggle button icons', done => {
       const btn = wrapper.find('.qa-toggle-btn');
       const icon = btn.find(Icon);
 
@@ -322,7 +330,13 @@ describe('User onboarding tour parts list', () => {
 
       wrapper.vm.expanded = true;
 
+      wrapper.vm
+        .$nextTick()
+        .then(() => {
           expect(icon.props('name')).toEqual('close');
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     it('renders the tour parts list if there are tour titles', () => {

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();
@@ -37,12 +40,8 @@ describe('project component', () => {
           upgrade_required: true,
           upgrade_path: '/upgrade',
         };
-        wrapper = shallowMount(ProjectComponent, {
-          sync: false,
-          store,
-          localVue,
-          propsData: { project },
-        });
+
+        createComponent({ project });
       });
 
       it('shows project title', () => {
@@ -72,12 +71,8 @@ describe('project component', () => {
           upgrade_required: true,
           upgrade_path: '',
         };
-        wrapper = shallowMount(ProjectComponent, {
-          sync: false,
-          store,
-          localVue,
-          propsData: { project },
-        });
+
+        createComponent({ project });
       });
 
       it('shows upgrade license text', () => {
@@ -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,16 +3,16 @@ 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) =>
+  mount(localVue.extend(CreateEpicForm), {
     localVue,
     propsData: {
       isSubmitting,
     },
+    sync: false,
   });
-};
 
 describe('RelatedItemsTree', () => {
   describe('CreateEpicForm', () => {

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 = []) =>
+  shallowMount(localVue.extend(RelatedItemsBody), {
     localVue,
     stubs: {
       'tree-root': true,
@@ -16,8 +16,8 @@ const createComponent = (parentItem = mockParentItem, children = []) => {
       parentItem,
       children,
     },
+    sync: false,
   });
-};
 
 describe('RelatedItemsTree', () => {
   describe('RelatedTreeBody', () => {

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,
+      sync: false,
+      localVue,
     });
   }
 
@@ -30,33 +33,51 @@ describe('Storage counter app', () => {
     wrapper.destroy();
   });
 
-  it('renders the 2 projects', () => {
+  it('renders the 2 projects', done => {
     wrapper.setData({
       namespace: projects,
     });
 
+    wrapper.vm
+      .$nextTick()
+      .then(() => {
         expect(wrapper.findAll(Project).length).toEqual(2);
+      })
+      .then(done)
+      .catch(done.fail);
   });
 
   describe('with rootStorageStatistics information', () => {
-    it('renders total usage', () => {
+    it('renders total usage', done => {
       wrapper.setData({
         namespace: withRootStorageStatistics,
       });
 
+      wrapper.vm
+        .$nextTick()
+        .then(() => {
           expect(wrapper.find('.js-total-usage').text()).toContain(
             withRootStorageStatistics.totalUsage,
           );
+        })
+        .then(done)
+        .catch(done.fail);
     });
   });
 
   describe('without rootStorageStatistics information', () => {
-    it('renders N/A', () => {
+    it('renders N/A', done => {
       wrapper.setData({
         namespace: projects,
       });
 
+      wrapper.vm
+        .$nextTick()
+        .then(() => {
           expect(wrapper.find('.js-total-usage').text()).toContain('N/A');
+        })
+        .then(done)
+        .catch(done.fail);
     });
   });
 });

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,
   });
 }
 

ee/spec/javascripts/vue_mr_widget/components/approvals/approvals_auth_spec.js

@@ -23,6 +23,7 @@ describe('Approval auth component', () => {
         ...props,
         modalId: 'testid',
       },
+      sync: false,
       localVue,
     });
   };

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, {
+describe('FrequentItemsListItemComponent', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(localVue.extend(frequentItemsListItemComponent), {
       propsData: {
         itemId: mockProject.id,
         itemName: mockProject.name,
         namespace: mockProject.namespace,
         webUrl: mockProject.webUrl,
         avatarUrl: mockProject.avatarUrl,
+        ...props,
       },
+      sync: false,
+      localVue,
     });
-};
-
-describe('FrequentItemsListItemComponent', () => {
-  let wrapper;
-  let vm;
-
-  beforeEach(() => {
-    wrapper = createComponent();
-
-    ({ vm } = wrapper);
-  });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
   describe('computed', () => {
     describe('hasAvatar', () => {
       it('should return `true` or `false` if whether avatar is present or not', () => {
-        wrapper.setProps({ avatarUrl: 'path/to/avatar.png' });
+        createComponent({ avatarUrl: 'path/to/avatar.png' });
 
-        expect(vm.hasAvatar).toBe(true);
+        expect(wrapper.vm.hasAvatar).toBe(true);
+      });
 
-        wrapper.setProps({ avatarUrl: null });
+      it('should return `false` if avatar is not present', () => {
+        createComponent({ avatarUrl: null });
 
-        expect(vm.hasAvatar).toBe(false);
+        expect(wrapper.vm.hasAvatar).toBe(false);
       });
     });
 
     describe('highlightedItemName', () => {
       it('should enclose part of project name in <b> & </b> which matches with `matcher` prop', () => {
-        wrapper.setProps({ matcher: 'lab' });
+        createComponent({ matcher: 'lab' });
 
         expect(wrapper.find('.js-frequent-items-item-title').html()).toContain(
           '<b>L</b><b>a</b><b>b</b>',
@@ -55,7 +53,7 @@ describe('FrequentItemsListItemComponent', () => {
       });
 
       it('should return project name as it is if `matcher` is not available', () => {
-        wrapper.setProps({ matcher: null });
+        createComponent({ matcher: null });
 
         expect(trimText(wrapper.find('.js-frequent-items-item-title').text())).toBe(
           mockProject.name,
@@ -65,13 +63,13 @@ describe('FrequentItemsListItemComponent', () => {
 
     describe('truncatedNamespace', () => {
       it('should truncate project name from namespace string', () => {
-        wrapper.setProps({ namespace: 'platform / nokia-3310' });
+        createComponent({ namespace: 'platform / nokia-3310' });
 
         expect(trimText(wrapper.find('.js-frequent-items-item-namespace').text())).toBe('platform');
       });
 
       it('should truncate namespace string from the middle if it includes more than two groups in path', () => {
-        wrapper.setProps({
+        createComponent({
           namespace: 'platform / hardware / broadcom / Wifi Group / Mobile Chipset / nokia-3310',
         });
 
@@ -84,6 +82,8 @@ describe('FrequentItemsListItemComponent', () => {
 
   describe('template', () => {
     it('should render component element', () => {
+      createComponent();
+
       expect(wrapper.classes()).toContain('frequent-items-list-item-container');
       expect(wrapper.findAll('a').length).toBe(1);
       expect(wrapper.findAll('.frequent-items-item-avatar-container').length).toBe(1);

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 = {
     action: {
       path: '/play',
@@ -14,8 +17,10 @@ describe('Manual Variables Form', () => {
   };
 
   const factory = (props = {}) => {
-    wrapper = shallowMount(Form, {
+    wrapper = shallowMount(localVue.extend(Form), {
       propsData: props,
+      localVue,
+      sync: false,
     });
   };
 
@@ -23,8 +28,15 @@ describe('Manual Variables Form', () => {
     factory(requiredProps);
   });
 
-  afterEach(() => {
+  afterEach(done => {
+    // The component has a `nextTick` callback after some events so we need
+    // to wait for those to finish before destroying.
+    setImmediate(() => {
       wrapper.destroy();
+      wrapper = null;
+
+      done();
+    });
   });
 
   it('renders empty form with correct placeholders', () => {
@@ -71,7 +83,7 @@ describe('Manual Variables Form', () => {
   });
 
   describe('when deleting a variable', () => {
-    it('removes the variable row', () => {
+    beforeEach(done => {
       wrapper.vm.variables = [
         {
           key: 'new key',
@@ -80,6 +92,10 @@ describe('Manual Variables Form', () => {
         },
       ];
 
+      wrapper.vm.$nextTick(done);
+    });
+
+    it('removes the variable row', () => {
       wrapper.find(GlButton).vm.$emit('click');
 
       expect(wrapper.vm.variables.length).toBe(0);

spec/javascripts/monitoring/charts/column_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import ColumnChart from '~/monitoring/components/charts/column.vue';
 
+const localVue = createLocalVue();
+
 describe('Column component', () => {
   let columnChart;
 
   beforeEach(() => {
-    columnChart = shallowMount(ColumnChart, {
+    columnChart = shallowMount(localVue.extend(ColumnChart), {
       propsData: {
         graphData: {
           queries: [
@@ -28,6 +30,8 @@ describe('Column component', () => {
         },
         containerWidth: 100,
       },
+      sync: false,
+      localVue,
     });
   });
 

spec/javascripts/monitoring/charts/empty_chart_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
 
+const localVue = createLocalVue();
+
 describe('Empty Chart component', () => {
   let emptyChart;
   const graphTitle = 'Memory Usage';
 
   beforeEach(() => {
-    emptyChart = shallowMount(EmptyChart, {
+    emptyChart = shallowMount(localVue.extend(EmptyChart), {
       propsData: {
         graphTitle,
       },
+      sync: false,
+      localVue,
     });
   });
 

spec/javascripts/monitoring/charts/single_stat_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import SingleStatChart from '~/monitoring/components/charts/single_stat.vue';
 import { graphDataPrometheusQuery } from '../mock_data';
 
+const localVue = createLocalVue();
+
 describe('Single Stat Chart component', () => {
   let singleStatChart;
 
   beforeEach(() => {
-    singleStatChart = shallowMount(SingleStatChart, {
+    singleStatChart = shallowMount(localVue.extend(SingleStatChart), {
       propsData: {
         graphData: graphDataPrometheusQuery,
       },
+      sync: false,
+      localVue,
     });
   });
 

spec/javascripts/monitoring/components/dashboard_spec.js

@@ -72,6 +72,17 @@ describe('Dashboard', () => {
   let mock;
   let store;
   let component;
+  let wrapper;
+
+  const createComponentWrapper = (props = {}, options = {}) => {
+    wrapper = shallowMount(localVue.extend(DashboardComponent), {
+      localVue,
+      sync: false,
+      propsData: { ...propsData, ...props },
+      store,
+      ...options,
+    });
+  };
 
   beforeEach(() => {
     setFixtures(`
@@ -81,13 +92,16 @@ describe('Dashboard', () => {
 
     store = createStore();
     mock = new MockAdapter(axios);
-    DashboardComponent = Vue.extend(Dashboard);
+    DashboardComponent = localVue.extend(Dashboard);
   });
 
   afterEach(() => {
     if (component) {
       component.$destroy();
     }
+    if (wrapper) {
+      wrapper.destroy();
+    }
     mock.restore();
   });
 
@@ -123,15 +137,8 @@ describe('Dashboard', () => {
   });
 
   describe('cluster health', () => {
-    let wrapper;
-
     beforeEach(done => {
-      wrapper = shallowMount(DashboardComponent, {
-        localVue,
-        sync: false,
-        propsData: { ...propsData, hasMetrics: true },
-        store,
-      });
+      createComponentWrapper({ hasMetrics: true });
 
       // all_dashboards is not defined in health dashboards
       wrapper.vm.$store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, undefined);
@@ -383,7 +390,6 @@ describe('Dashboard', () => {
   });
 
   describe('drag and drop function', () => {
-    let wrapper;
     let expectedPanelCount; // also called metrics, naming to be improved: https://gitlab.com/gitlab-org/gitlab/issues/31565
 
     const findDraggables = () => wrapper.findAll(VueDraggable);
@@ -400,13 +406,7 @@ describe('Dashboard', () => {
     });
 
     beforeEach(done => {
-      wrapper = shallowMount(DashboardComponent, {
-        localVue,
-        sync: false,
-        propsData: { ...propsData, hasMetrics: true },
-        store,
-        attachToDocument: true,
-      });
+      createComponentWrapper({ hasMetrics: true }, { attachToDocument: true });
 
       setupComponentStore(wrapper.vm);
 
@@ -417,6 +417,10 @@ describe('Dashboard', () => {
       wrapper.destroy();
     });
 
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
     it('wraps vuedraggable', () => {
       expect(findDraggablePanels().exists()).toBe(true);
       expect(findDraggablePanels().length).toEqual(expectedPanelCount);
@@ -502,7 +506,6 @@ describe('Dashboard', () => {
   // https://gitlab.com/gitlab-org/gitlab-ce/issues/66922
   // eslint-disable-next-line jasmine/no-disabled-tests
   xdescribe('link to chart', () => {
-    let wrapper;
     const currentDashboard = 'TEST_DASHBOARD';
     localVue.use(GlToast);
     const link = () => wrapper.find('.js-chart-link');
@@ -511,13 +514,7 @@ describe('Dashboard', () => {
     beforeEach(done => {
       mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
 
-      wrapper = shallowMount(DashboardComponent, {
-        localVue,
-        sync: false,
-        attachToDocument: true,
-        propsData: { ...propsData, hasMetrics: true, currentDashboard },
-        store,
-      });
+      createComponentWrapper({ hasMetrics: true, currentDashboard }, { attachToDocument: true });
 
       setTimeout(done);
     });
@@ -614,19 +611,12 @@ describe('Dashboard', () => {
   });
 
   describe('dashboard edit link', () => {
-    let wrapper;
     const findEditLink = () => wrapper.find('.js-edit-link');
 
     beforeEach(done => {
       mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
 
-      wrapper = shallowMount(DashboardComponent, {
-        localVue,
-        sync: false,
-        attachToDocument: true,
-        propsData: { ...propsData, hasMetrics: true },
-        store,
-      });
+      createComponentWrapper({ hasMetrics: true }, { attachToDocument: true });
 
       wrapper.vm.$store.commit(
         `monitoringDashboard/${types.SET_ALL_DASHBOARDS}`,

spec/javascripts/monitoring/components/graph_group_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import GraphGroup from '~/monitoring/components/graph_group.vue';
 
+const localVue = createLocalVue();
+
 describe('Graph group component', () => {
   let graphGroup;
+
   const findPrometheusGroup = () => graphGroup.find('.prometheus-graph-group');
   const findPrometheusPanel = () => graphGroup.find('.prometheus-panel');
 
+  const createComponent = propsData => {
+    graphGroup = shallowMount(localVue.extend(GraphGroup), {
+      propsData,
+      sync: false,
+      localVue,
+    });
+  };
+
   afterEach(() => {
     graphGroup.destroy();
   });
 
   describe('When groups can be collapsed', () => {
     beforeEach(() => {
-      graphGroup = shallowMount(GraphGroup, {
-        propsData: {
+      createComponent({
         name: 'panel',
         collapseGroup: true,
-        },
       });
     });
 
@@ -33,12 +42,10 @@ describe('Graph group component', () => {
 
   describe('When groups can not be collapsed', () => {
     beforeEach(() => {
-      graphGroup = shallowMount(GraphGroup, {
-        propsData: {
+      createComponent({
         name: 'panel',
         collapseGroup: true,
         showPanels: false,
-        },
       });
     });
 
@@ -49,12 +56,7 @@ describe('Graph group component', () => {
 
   describe('When collapseGroup prop is updated', () => {
     beforeEach(() => {
-      graphGroup = shallowMount(GraphGroup, {
-        propsData: {
-          name: 'panel',
-          collapseGroup: false,
-        },
-      });
+      createComponent({ name: 'panel', collapseGroup: false });
     });
 
     it('previously collapsed group should respond to the prop change', done => {

spec/javascripts/notes/components/note_actions/reply_button_spec.js

@@ -2,15 +2,14 @@ import Vuex from 'vuex';
 import { createLocalVue, mount } from '@vue/test-utils';
 import ReplyButton from '~/notes/components/note_actions/reply_button.vue';
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 describe('ReplyButton', () => {
   let wrapper;
 
   beforeEach(() => {
-    const localVue = createLocalVue();
-
-    localVue.use(Vuex);
-
-    wrapper = mount(ReplyButton, {
+    wrapper = mount(localVue.extend(ReplyButton), {
       sync: false,
       localVue,
     });

spec/javascripts/notes/components/note_actions_spec.js

@@ -12,7 +12,7 @@ describe('noteActions', () => {
 
   const shallowMountNoteActions = propsData => {
     const localVue = createLocalVue();
-    return shallowMount(noteActions, {
+    return shallowMount(localVue.extend(noteActions), {
       store,
       propsData,
       localVue,

spec/javascripts/notes/components/note_form_spec.js

@@ -14,7 +14,7 @@ describe('issue_note_form component', () => {
 
   const createComponentWrapper = () => {
     const localVue = createLocalVue();
-    return shallowMount(NoteForm, {
+    return shallowMount(localVue.extend(NoteForm), {
       store,
       propsData: props,
       // see https://gitlab.com/gitlab-org/gitlab-foss/issues/56317 for the following

spec/javascripts/notes/components/noteable_discussion_spec.js

@@ -10,6 +10,8 @@ import mockDiffFile from '../../diffs/mock_data/diff_file';
 
 const discussionWithTwoUnresolvedNotes = 'merge_requests/resolved_diff_discussion.json';
 
+const localVue = createLocalVue();
+
 describe('noteable_discussion component', () => {
   let store;
   let wrapper;
@@ -22,8 +24,7 @@ describe('noteable_discussion component', () => {
     store.dispatch('setNoteableData', noteableDataMock);
     store.dispatch('setNotesData', notesDataMock);
 
-    const localVue = createLocalVue();
-    wrapper = mount(noteableDiscussion, {
+    wrapper = mount(localVue.extend(noteableDiscussion), {
       store,
       propsData: { discussion: discussionMock },
       localVue,

spec/javascripts/notes/components/noteable_note_spec.js

@@ -18,7 +18,7 @@ describe('issue_note', () => {
     store.dispatch('setNotesData', notesDataMock);
 
     const localVue = createLocalVue();
-    wrapper = shallowMount(issueNote, {
+    wrapper = shallowMount(localVue.extend(issueNote), {
       store,
       propsData: {
         note,

spec/javascripts/related_merge_requests/components/related_merge_requests_spec.js

@@ -20,7 +20,7 @@ describe('RelatedMergeRequests', () => {
     mock = new MockAdapter(axios);
     mock.onGet(`${API_ENDPOINT}?per_page=100`).reply(200, mockData, { 'x-total': 2 });
 
-    wrapper = mount(RelatedMergeRequests, {
+    wrapper = mount(localVue.extend(RelatedMergeRequests), {
       localVue,
       sync: false,
       store: createStore(),

spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_container_spec.js

@@ -4,18 +4,19 @@ import MrWidgetPipeline from '~/vue_merge_request_widget/components/mr_widget_pi
 import ArtifactsApp from '~/vue_merge_request_widget/components/artifacts_list_app.vue';
 import { mockStore } from '../mock_data';
 
+const localVue = createLocalVue();
+
 describe('MrWidgetPipelineContainer', () => {
   let wrapper;
 
   const factory = (props = {}) => {
-    const localVue = createLocalVue();
-
     wrapper = mount(localVue.extend(MrWidgetPipelineContainer), {
       propsData: {
         mr: Object.assign({}, mockStore),
         ...props,
       },
       localVue,
+      sync: false,
     });
   };
 

spec/javascripts/vue_shared/components/pagination/graphql_pagination_spec.js

-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import GraphqlPagination from '~/vue_shared/components/pagination/graphql_pagination.vue';
 
+const localVue = createLocalVue();
+
 describe('Graphql Pagination component', () => {
   let wrapper;
   function factory({ hasNextPage = true, hasPreviousPage = true }) {
-    wrapper = shallowMount(GraphqlPagination, {
+    wrapper = shallowMount(localVue.extend(GraphqlPagination), {
       propsData: {
         hasNextPage,
         hasPreviousPage,
       },
+      sync: false,
+      localVue,
     });
   }