Fix karma test utils violations

Fix karma violations with vue test utils by ensuring components are
mounted correctly

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

@@ -82,16 +82,13 @@ describe('Dashboard', () => {
         });
       });
 
-      it('does not render add button on the dashboard', done => {
-        setTimeout(() => {
-          expect(vm.element.querySelector('.js-add-metric-button')).toBe(null);
-          done();
-        });
+      it('does not render add button on the dashboard', () => {
+        expect(vm.element.querySelector('.js-add-metric-button')).toBe(null);
       });
     });
 
     describe('when available', () => {
-      beforeEach(() => {
+      beforeEach(done => {
         createComponent({
           customMetricsAvailable: true,
           customMetricsPath: '/endpoint',
@@ -101,16 +98,12 @@ describe('Dashboard', () => {
         });
 
         setupComponentStore(vm);
-      });
 
-      it('renders add button on the dashboard', done => {
-        localVue.nextTick(() => {
-          expect(vm.element.querySelector('.js-add-metric-button').innerText).toContain(
-            'Add metric',
-          );
+        vm.vm.$nextTick(done);
+      });
 
-          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/onboarding_helper_spec.js

@@ -127,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 });
 
-        expect(wrapper.vm.showPopover).toBe(true);
+        wrapper.vm
+          .$nextTick()
+          .then(() => {
+            expect(wrapper.vm.showPopover).toBe(true);
+          })
+          .then(done)
+          .catch(done.fail);
       });
     });
 
@@ -316,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);
 
@@ -324,7 +330,13 @@ describe('User onboarding tour parts list', () => {
 
       wrapper.vm.expanded = true;
 
-      expect(icon.props('name')).toEqual('close');
+      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/operations/components/dashboard/project_spec.js

@@ -35,13 +35,13 @@ describe('project component', () => {
 
     describe('can upgrade project group', () => {
       beforeEach(() => {
-        createComponent({
-          project: {
-            ...mockOneProject,
-            upgrade_required: true,
-            upgrade_path: '/upgrade',
-          },
-        });
+        project = {
+          ...mockOneProject,
+          upgrade_required: true,
+          upgrade_path: '/upgrade',
+        };
+
+        createComponent({ project });
       });
 
       it('shows project title', () => {
@@ -66,13 +66,13 @@ describe('project component', () => {
 
     describe('cannot upgrade project group', () => {
       beforeEach(() => {
-        createComponent({
-          project: {
-            ...mockOneProject,
-            upgrade_required: true,
-            upgrade_path: '',
-          },
-        });
+        project = {
+          ...mockOneProject,
+          upgrade_required: true,
+          upgrade_path: '',
+        };
+
+        createComponent({ project });
       });
 
       it('shows upgrade license text', () => {

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

@@ -5,15 +5,14 @@ import CreateEpicForm from 'ee/related_items_tree/components/create_epic_form.vu
 
 const localVue = createLocalVue();
 
-const createComponent = (isSubmitting = false) => {
-  return mount(localVue.extend(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_body_spec.js

@@ -6,8 +6,8 @@ import { mockParentItem } from '../mock_data';
 
 const localVue = createLocalVue();
 
-const createComponent = (parentItem = mockParentItem, children = []) => {
-  return shallowMount(localVue.extend(RelatedItemsBody), {
+const createComponent = (parentItem = mockParentItem, children = []) =>
+  shallowMount(localVue.extend(RelatedItemsBody), {
     localVue,
     stubs: {
       'tree-root': true,
@@ -18,7 +18,6 @@ const createComponent = (parentItem = mockParentItem, children = []) => {
     },
     sync: false,
   });
-};
 
 describe('RelatedItemsTree', () => {
   describe('RelatedTreeBody', () => {

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

@@ -20,7 +20,7 @@ describe('Storage counter app', () => {
     wrapper = shallowMount(localVue.extend(StorageApp), {
       propsData: { namespacePath: 'h5bp', helpPagePath: 'help' },
       mocks: { $apollo },
-      sync: true,
+      sync: false,
       localVue,
     });
   }
@@ -33,33 +33,51 @@ describe('Storage counter app', () => {
     wrapper.destroy();
   });
 
-  it('renders the 2 projects', () => {
+  it('renders the 2 projects', done => {
     wrapper.setData({
       namespace: projects,
     });
 
-    expect(wrapper.findAll(Project).length).toEqual(2);
+    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,
       });
 
-      expect(wrapper.find('.js-total-usage').text()).toContain(
-        withRootStorageStatistics.totalUsage,
-      );
+      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,
       });
 
-      expect(wrapper.find('.js-total-usage').text()).toContain('N/A');
+      wrapper.vm
+        .$nextTick()
+        .then(() => {
+          expect(wrapper.find('.js-total-usage').text()).toContain('N/A');
+        })
+        .then(done)
+        .catch(done.fail);
     });
   });
 });

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/frequent_items/components/frequent_items_list_item_spec.js

@@ -5,49 +5,47 @@ import { mockProject } from '../mock_data'; // can also use 'mockGroup', but not
 
 const localVue = createLocalVue();
 
-const createComponent = () =>
-  shallowMount(localVue.extend(frequentItemsListItemComponent), {
-    propsData: {
-      itemId: mockProject.id,
-      itemName: mockProject.name,
-      namespace: mockProject.namespace,
-      webUrl: mockProject.webUrl,
-      avatarUrl: mockProject.avatarUrl,
-    },
-    sync: false,
-    localVue,
-  });
-
 describe('FrequentItemsListItemComponent', () => {
   let wrapper;
-  let vm;
 
-  beforeEach(() => {
-    wrapper = createComponent();
-
-    ({ vm } = 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,
+    });
+  };
 
   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/jobs/components/manual_variables_form_spec.js

@@ -6,6 +6,7 @@ const localVue = createLocalVue();
 
 describe('Manual Variables Form', () => {
   let wrapper;
+
   const requiredProps = {
     action: {
       path: '/play',
@@ -27,8 +28,15 @@ describe('Manual Variables Form', () => {
     factory(requiredProps);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
+  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', () => {
@@ -75,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',
@@ -84,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: {
-          name: 'panel',
-          collapseGroup: true,
-        },
+      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: {
-          name: 'panel',
-          collapseGroup: true,
-          showPanels: false,
-        },
+      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,
     });
   }