Merge branch 'slashmanov/replace-vue-next-tick-with-direct-import' into 'master'

Replace Vue.nextTick with a direct import from Vue package

See merge request gitlab-org/gitlab!78995

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

 import { GlPopover, GlLink, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import component from 'ee/approvals/components/approval_check_popover.vue';
 import { TEST_HOST } from 'helpers/test_constants';
 
@@ -17,11 +17,11 @@ describe('Approval Check Popover', () => {
 
   describe('with a documentation link', () => {
     const documentationLink = `${TEST_HOST}/documentation`;
-    beforeEach((done) => {
+    beforeEach(async () => {
       wrapper.setProps({
         documentationLink,
       });
-      Vue.nextTick(done);
+      await nextTick();
     });
 
     it('should render the documentation link', () => {

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

 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import component from 'ee/approvals/components/approval_check_rule_popover.vue';
 import {
   VULNERABILITY_CHECK_NAME,
@@ -20,107 +20,87 @@ describe('Approval Check Popover', () => {
   describe('computed props', () => {
     const securityApprovalsHelpPagePath = `${TEST_HOST}/documentation`;
 
-    beforeEach((done) => {
+    beforeEach(async () => {
       wrapper.setProps({ securityApprovalsHelpPagePath });
-      Vue.nextTick(done);
+      await nextTick();
     });
 
     describe('showVulnerabilityCheckPopover', () => {
-      it('return true if the rule type is "Vulnerability-Check"', (done) => {
+      it('return true if the rule type is "Vulnerability-Check"', async () => {
         wrapper.setProps({ rule: { name: VULNERABILITY_CHECK_NAME } });
-        Vue.nextTick(() => {
-          expect(wrapper.vm.showVulnerabilityCheckPopover).toBe(true);
-          done();
-        });
+        await nextTick();
+        expect(wrapper.vm.showVulnerabilityCheckPopover).toBe(true);
       });
-      it('return false if the rule type is "Vulnerability-Check"', (done) => {
+      it('return false if the rule type is "Vulnerability-Check"', async () => {
         wrapper.setProps({ rule: { name: 'FooRule' } });
-        Vue.nextTick(() => {
-          expect(wrapper.vm.showVulnerabilityCheckPopover).toBe(false);
-          done();
-        });
+        await nextTick();
+        expect(wrapper.vm.showVulnerabilityCheckPopover).toBe(false);
       });
     });
 
     describe('showLicenseCheckPopover', () => {
-      it('return true if the rule type is "License-Check"', (done) => {
+      it('return true if the rule type is "License-Check"', async () => {
         wrapper.setProps({ rule: { name: LICENSE_CHECK_NAME } });
-        Vue.nextTick(() => {
-          expect(wrapper.vm.showLicenseCheckPopover).toBe(true);
-          done();
-        });
+        await nextTick();
+        expect(wrapper.vm.showLicenseCheckPopover).toBe(true);
       });
-      it('return false if the rule type is "License-Check"', (done) => {
+      it('return false if the rule type is "License-Check"', async () => {
         wrapper.setProps({ rule: { name: 'FooRule' } });
-        Vue.nextTick(() => {
-          expect(wrapper.vm.showLicenseCheckPopover).toBe(false);
-          done();
-        });
+        await nextTick();
+        expect(wrapper.vm.showLicenseCheckPopover).toBe(false);
       });
     });
 
     describe('approvalConfig', () => {
-      it('returns "Vulnerability-Check" config', (done) => {
+      it('returns "Vulnerability-Check" config', async () => {
         wrapper.setProps({ rule: { name: VULNERABILITY_CHECK_NAME } });
-        Vue.nextTick(() => {
-          expect(wrapper.vm.approvalRuleConfig.title).toBe(
-            APPROVAL_RULE_CONFIGS[VULNERABILITY_CHECK_NAME].title,
-          );
-          expect(wrapper.vm.approvalRuleConfig.popoverText).toBe(
-            APPROVAL_RULE_CONFIGS[VULNERABILITY_CHECK_NAME].popoverText,
-          );
-          expect(wrapper.vm.approvalRuleConfig.documentationText).toBe(
-            APPROVAL_RULE_CONFIGS[VULNERABILITY_CHECK_NAME].documentationText,
-          );
-          done();
-        });
+        await nextTick();
+        expect(wrapper.vm.approvalRuleConfig.title).toBe(
+          APPROVAL_RULE_CONFIGS[VULNERABILITY_CHECK_NAME].title,
+        );
+        expect(wrapper.vm.approvalRuleConfig.popoverText).toBe(
+          APPROVAL_RULE_CONFIGS[VULNERABILITY_CHECK_NAME].popoverText,
+        );
+        expect(wrapper.vm.approvalRuleConfig.documentationText).toBe(
+          APPROVAL_RULE_CONFIGS[VULNERABILITY_CHECK_NAME].documentationText,
+        );
       });
-      it('returns "License-Check" config', (done) => {
+      it('returns "License-Check" config', async () => {
         wrapper.setProps({ rule: { name: LICENSE_CHECK_NAME } });
-        Vue.nextTick(() => {
-          expect(wrapper.vm.approvalRuleConfig.title).toBe(
-            APPROVAL_RULE_CONFIGS[LICENSE_CHECK_NAME].title,
-          );
-          expect(wrapper.vm.approvalRuleConfig.popoverText).toBe(
-            APPROVAL_RULE_CONFIGS[LICENSE_CHECK_NAME].popoverText,
-          );
-          expect(wrapper.vm.approvalRuleConfig.documentationText).toBe(
-            APPROVAL_RULE_CONFIGS[LICENSE_CHECK_NAME].documentationText,
-          );
-          done();
-        });
+        await nextTick();
+        expect(wrapper.vm.approvalRuleConfig.title).toBe(
+          APPROVAL_RULE_CONFIGS[LICENSE_CHECK_NAME].title,
+        );
+        expect(wrapper.vm.approvalRuleConfig.popoverText).toBe(
+          APPROVAL_RULE_CONFIGS[LICENSE_CHECK_NAME].popoverText,
+        );
+        expect(wrapper.vm.approvalRuleConfig.documentationText).toBe(
+          APPROVAL_RULE_CONFIGS[LICENSE_CHECK_NAME].documentationText,
+        );
       });
-      it('returns an undefined config', (done) => {
+      it('returns an undefined config', async () => {
         wrapper.setProps({ rule: { name: 'FooRule' } });
-        Vue.nextTick(() => {
-          expect(wrapper.vm.approvalConfig).toBe(undefined);
-          done();
-        });
+        await nextTick();
+        expect(wrapper.vm.approvalConfig).toBe(undefined);
       });
     });
 
     describe('documentationLink', () => {
-      it('returns documentation link for "License-Check"', (done) => {
+      it('returns documentation link for "License-Check"', async () => {
         wrapper.setProps({ rule: { name: 'License-Check' } });
-        Vue.nextTick(() => {
-          expect(wrapper.vm.documentationLink).toBe(securityApprovalsHelpPagePath);
-          done();
-        });
+        await nextTick();
+        expect(wrapper.vm.documentationLink).toBe(securityApprovalsHelpPagePath);
       });
-      it('returns documentation link for "Vulnerability-Check"', (done) => {
+      it('returns documentation link for "Vulnerability-Check"', async () => {
         wrapper.setProps({ rule: { name: 'Vulnerability-Check' } });
-        Vue.nextTick(() => {
-          expect(wrapper.vm.documentationLink).toBe(securityApprovalsHelpPagePath);
-          done();
-        });
+        await nextTick();
+        expect(wrapper.vm.documentationLink).toBe(securityApprovalsHelpPagePath);
       });
-      it('returns empty text', (done) => {
+      it('returns empty text', async () => {
         const text = '';
         wrapper.setProps({ rule: { name: 'FooRule' } });
-        Vue.nextTick(() => {
-          expect(wrapper.vm.documentationLink).toBe(text);
-          done();
-        });
+        await nextTick();
+        expect(wrapper.vm.documentationLink).toBe(text);
       });
     });
   });

ee/spec/frontend/roadmap/components/preset_quarters/quarters_header_item_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 
 import QuartersHeaderItemComponent from 'ee/roadmap/components/preset_quarters/quarters_header_item.vue';
 import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
@@ -81,18 +81,14 @@ describe('QuartersHeaderItemComponent', () => {
         expect(vm.timelineHeaderClass).toBe('');
       });
 
-      it('returns string containing `label-dark label-bold` when current quarter is same as timeframeItem quarter', (done) => {
+      it('returns string containing `label-dark label-bold` when current quarter is same as timeframeItem quarter', async () => {
         vm = createComponent({
           timeframeItem: mockTimeframeQuarters[1],
         });
 
         [, vm.currentDate] = mockTimeframeQuarters[1].range;
-        Vue.nextTick()
-          .then(() => {
-            expect(vm.timelineHeaderClass).toBe('label-dark label-bold');
-          })
-          .then(done)
-          .catch(done.fail);
+        await nextTick();
+        expect(vm.timelineHeaderClass).toBe('label-dark label-bold');
       });
 
       it('returns string containing `label-dark` when current quarter is less than timeframeItem quarter', () => {

ee/spec/frontend/subscriptions/new/components/checkout/payment_method_spec.js

 import { mount, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
 import { STEPS } from 'ee/subscriptions/constants';
@@ -50,12 +51,11 @@ describe('Payment Method', () => {
       expect(isStepValid()).toBe(true);
     });
 
-    it('should be invalid when paymentMethodId is undefined', () => {
+    it('should be invalid when paymentMethodId is undefined', async () => {
       store.commit(types.UPDATE_PAYMENT_METHOD_ID, null);
 
-      return localVue.nextTick().then(() => {
-        expect(isStepValid()).toBe(false);
-      });
+      await nextTick();
+      expect(isStepValid()).toBe(false);
     });
   });
 

ee/spec/frontend/subscriptions/new/components/checkout/subscription_details_spec.js

 import { mount, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import Vuex from 'vuex';
 import { STEPS } from 'ee/subscriptions/constants';
@@ -365,37 +366,33 @@ describe('Subscription Details', () => {
         expect(isStepValid()).toBe(true);
       });
 
-      it('should be invalid when no plan is selected', () => {
+      it('should be invalid when no plan is selected', async () => {
         store.commit(types.UPDATE_SELECTED_PLAN, null);
 
-        return localVue.nextTick().then(() => {
-          expect(isStepValid()).toBe(false);
-        });
+        await nextTick();
+        expect(isStepValid()).toBe(false);
       });
 
-      it('should be invalid when no organization name is given, and no group is selected', () => {
+      it('should be invalid when no organization name is given, and no group is selected', async () => {
         store.commit(types.UPDATE_ORGANIZATION_NAME, null);
         store.commit(types.UPDATE_SELECTED_GROUP, null);
 
-        return localVue.nextTick().then(() => {
-          expect(isStepValid()).toBe(false);
-        });
+        await nextTick();
+        expect(isStepValid()).toBe(false);
       });
 
-      it('should be invalid when number of users is 0', () => {
+      it('should be invalid when number of users is 0', async () => {
         store.commit(types.UPDATE_NUMBER_OF_USERS, 0);
 
-        return localVue.nextTick().then(() => {
-          expect(isStepValid()).toBe(false);
-        });
+        await nextTick();
+        expect(isStepValid()).toBe(false);
       });
 
-      it('should be invalid when number of users is smaller than the selected group users', () => {
+      it('should be invalid when number of users is smaller than the selected group users', async () => {
         store.commit(types.UPDATE_NUMBER_OF_USERS, 10);
 
-        return localVue.nextTick().then(() => {
-          expect(isStepValid()).toBe(false);
-        });
+        await nextTick();
+        expect(isStepValid()).toBe(false);
       });
     });
 
@@ -440,36 +437,32 @@ describe('Subscription Details', () => {
         expect(isStepValid()).toBe(true);
       });
 
-      it('should be invalid when no plan is selected', () => {
+      it('should be invalid when no plan is selected', async () => {
         store.commit(types.UPDATE_SELECTED_PLAN, null);
 
-        return localVue.nextTick().then(() => {
-          expect(isStepValid()).toBe(false);
-        });
+        await nextTick();
+        expect(isStepValid()).toBe(false);
       });
 
-      it('should be invalid when number users is 0', () => {
+      it('should be invalid when number users is 0', async () => {
         store.commit(types.UPDATE_NUMBER_OF_USERS, 0);
 
-        return localVue.nextTick().then(() => {
-          expect(isStepValid()).toBe(false);
-        });
+        await nextTick();
+        expect(isStepValid()).toBe(false);
       });
 
-      it('should be valid when number of users is greater than group users', () => {
+      it('should be valid when number of users is greater than group users', async () => {
         store.commit(types.UPDATE_NUMBER_OF_USERS, 4);
 
-        return localVue.nextTick().then(() => {
-          expect(isStepValid()).toBe(true);
-        });
+        await nextTick();
+        expect(isStepValid()).toBe(true);
       });
 
-      it('should not be valid when number of users is less than group users', () => {
+      it('should not be valid when number of users is less than group users', async () => {
         store.commit(types.UPDATE_NUMBER_OF_USERS, 2);
 
-        return localVue.nextTick().then(() => {
-          expect(isStepValid()).toBe(false);
-        });
+        await nextTick();
+        expect(isStepValid()).toBe(false);
       });
     });
   });

ee/spec/frontend/vue_shared/license_compliance/components/add_license_form_spec.js

 import { GlFormRadio, GlFormRadioGroup } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import LicenseIssueBody from 'ee/vue_shared/license_compliance/components/add_license_form.vue';
 import { LICENSE_APPROVAL_STATUS } from 'ee/vue_shared/license_compliance/constants';
 
@@ -38,7 +38,7 @@ describe('AddLicenseForm', () => {
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ approvalStatus: LICENSE_APPROVAL_STATUS.ALLOWED, licenseName: name });
 
-      await Vue.nextTick();
+      await nextTick();
 
       const linkEl = findSubmitButton();
       linkEl.trigger('click');
@@ -141,7 +141,7 @@ describe('AddLicenseForm', () => {
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ licenseName: 'FOO' });
-      await Vue.nextTick();
+      await nextTick();
 
       const feedbackElement = wrapper.find('.invalid-feedback');
 
@@ -158,7 +158,7 @@ describe('AddLicenseForm', () => {
         },
       });
 
-      await Vue.nextTick();
+      await nextTick();
 
       const descriptionElement = wrapper.findAll('.text-secondary');
 
@@ -173,7 +173,7 @@ describe('AddLicenseForm', () => {
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ licenseName: '' });
-      await Vue.nextTick();
+      await nextTick();
 
       expect(vm.submitDisabled).toBe(true);
 
@@ -185,7 +185,7 @@ describe('AddLicenseForm', () => {
 
     it('disables submit and cancel while a new license is being added', async () => {
       wrapper.setProps({ loading: true });
-      await Vue.nextTick();
+      await nextTick();
 
       const submitButton = findSubmitButton();
       const cancelButton = findCancelButton();

ee/spec/frontend/vue_shared/license_compliance/components/admin_license_management_row_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import AdminLicenseManagementRow from 'ee/vue_shared/license_compliance/components/admin_license_management_row.vue';
@@ -54,9 +54,9 @@ describe('AdminLicenseManagementRow', () => {
   });
 
   describe('approved license', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       vm.license = { ...approvedLicense, approvalStatus: LICENSE_APPROVAL_STATUS.ALLOWED };
-      Vue.nextTick(done);
+      await nextTick();
     });
 
     describe('computed', () => {
@@ -89,9 +89,9 @@ describe('AdminLicenseManagementRow', () => {
   });
 
   describe('blacklisted license', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       vm.license = { ...approvedLicense, approvalStatus: LICENSE_APPROVAL_STATUS.DENIED };
-      Vue.nextTick(done);
+      await nextTick();
     });
 
     describe('computed', () => {

ee/spec/frontend/vue_shared/license_compliance/components/license_packages_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 
 import LicensePackages from 'ee/vue_shared/license_compliance/components/license_packages.vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
@@ -29,14 +29,10 @@ describe('LicensePackages', () => {
         expect(vm.remainingPackages).toBe('2 more');
       });
 
-      it('returns empty string when count of packages does not exceed `displayPackageCount` prop', (done) => {
+      it('returns empty string when count of packages does not exceed `displayPackageCount` prop', async () => {
         vm.displayPackageCount = examplePackages.length + 1;
-        Vue.nextTick()
-          .then(() => {
-            expect(vm.remainingPackages).toBe('');
-          })
-          .then(done)
-          .catch(done.fail);
+        await nextTick();
+        expect(vm.remainingPackages).toBe('');
       });
     });
   });

ee/spec/frontend/vue_shared/security_reports/components/modal_spec.js

 import { GlModal, GlAlert } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import IssueNote from 'ee/vue_shared/security_reports/components/issue_note.vue';
 import MergeRequestNote from 'ee/vue_shared/security_reports/components/merge_request_note.vue';
 import component from 'ee/vue_shared/security_reports/components/modal.vue';
@@ -132,7 +132,7 @@ describe('Security Reports modal', () => {
       describe('with merge request created', () => {
         const findActionButton = () => wrapper.find('[data-testid=create-issue-button]');
 
-        it('renders the issue button as a single button', (done) => {
+        it('renders the issue button as a single button', async () => {
           const propsData = {
             modal: createState().modal,
             canCreateIssue: true,
@@ -143,15 +143,11 @@ describe('Security Reports modal', () => {
 
           wrapper.setProps(propsData);
 
-          Vue.nextTick()
-            .then(() => {
-              expect(wrapper.find('.js-split-button').exists()).toBe(false);
-              expect(findActionButton().exists()).toBe(true);
-              expect(findActionButton().text()).not.toContain('Resolve with merge request');
-              expect(findActionButton().text()).toContain('Create issue');
-              done();
-            })
-            .catch(done.fail);
+          await nextTick();
+          expect(wrapper.find('.js-split-button').exists()).toBe(false);
+          expect(findActionButton().exists()).toBe(true);
+          expect(findActionButton().text()).not.toContain('Resolve with merge request');
+          expect(findActionButton().text()).toContain('Create issue');
         });
       });
     });
@@ -340,7 +336,7 @@ describe('Security Reports modal', () => {
       const solution = 'Upgrade to XYZ';
       propsData.modal.vulnerability.solution = solution;
       mountComponent(propsData, mount);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const solutionCard = modal.find(SolutionCard);
 
@@ -357,7 +353,7 @@ describe('Security Reports modal', () => {
       const diff = 'foo';
       propsData.modal.vulnerability.remediations = [{ summary, diff }];
       mountComponent(propsData, mount);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const solutionCard = wrapper.find(SolutionCard);
 
@@ -372,7 +368,7 @@ describe('Security Reports modal', () => {
         modal: createState().modal,
       };
       mountComponent(propsData, mount);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const solutionCard = wrapper.find(SolutionCard);
 

spec/frontend/badges/components/badge_form_spec.js

 import MockAdapter from 'axios-mock-adapter';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { DUMMY_IMAGE_URL, TEST_HOST } from 'helpers/test_constants';
 import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import BadgeForm from '~/badges/components/badge_form.vue';
@@ -74,7 +74,7 @@ describe('BadgeForm component', () => {
       expect(feedbackElement).toBeVisible();
     };
 
-    beforeEach((done) => {
+    beforeEach(async () => {
       jest.spyOn(vm, submitAction).mockReturnValue(Promise.resolve());
       store.replaceState({
         ...store.state,
@@ -83,14 +83,10 @@ describe('BadgeForm component', () => {
         isSaving: false,
       });
 
-      Vue.nextTick()
-        .then(() => {
-          setValue(nameSelector, 'TestBadge');
-          setValue(linkUrlSelector, `${TEST_HOST}/link/url`);
-          setValue(imageUrlSelector, `${window.location.origin}${DUMMY_IMAGE_URL}`);
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      setValue(nameSelector, 'TestBadge');
+      setValue(linkUrlSelector, `${TEST_HOST}/link/url`);
+      setValue(imageUrlSelector, `${window.location.origin}${DUMMY_IMAGE_URL}`);
     });
 
     it('returns immediately if imageUrl is empty', () => {

spec/frontend/badges/components/badge_list_row_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import BadgeListRow from '~/badges/components/badge_list_row.vue';
 import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
@@ -73,25 +73,21 @@ describe('BadgeListRow component', () => {
     expect(vm.editBadge).toHaveBeenCalled();
   });
 
-  it('calls updateBadgeInModal and shows modal when clicking then delete button', (done) => {
+  it('calls updateBadgeInModal and shows modal when clicking then delete button', async () => {
     jest.spyOn(vm, 'updateBadgeInModal').mockImplementation(() => {});
 
     const deleteButton = vm.$el.querySelector('.table-button-footer button:last-of-type');
     deleteButton.click();
 
-    Vue.nextTick()
-      .then(() => {
-        expect(vm.updateBadgeInModal).toHaveBeenCalled();
-      })
-      .then(done)
-      .catch(done.fail);
+    await nextTick();
+    expect(vm.updateBadgeInModal).toHaveBeenCalled();
   });
 
   describe('for a group badge', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       badge.kind = GROUP_BADGE;
 
-      Vue.nextTick().then(done).catch(done.fail);
+      await nextTick();
     });
 
     it('renders the badge kind', () => {

spec/frontend/badges/components/badge_list_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
 import BadgeList from '~/badges/components/badge_list.vue';
 import { GROUP_BADGE, PROJECT_BADGE } from '~/badges/constants';
@@ -48,46 +48,34 @@ describe('BadgeList component', () => {
     expect(rows).toHaveLength(numberOfDummyBadges);
   });
 
-  it('renders a message if no badges exist', (done) => {
+  it('renders a message if no badges exist', async () => {
     store.state.badges = [];
 
-    Vue.nextTick()
-      .then(() => {
-        expect(vm.$el.innerText).toMatch('This project has no badges');
-      })
-      .then(done)
-      .catch(done.fail);
+    await nextTick();
+    expect(vm.$el.innerText).toMatch('This project has no badges');
   });
 
-  it('shows a loading icon when loading', (done) => {
+  it('shows a loading icon when loading', async () => {
     store.state.isLoading = true;
 
-    Vue.nextTick()
-      .then(() => {
-        const loadingIcon = vm.$el.querySelector('.gl-spinner');
+    await nextTick();
+    const loadingIcon = vm.$el.querySelector('.gl-spinner');
 
-        expect(loadingIcon).toBeVisible();
-      })
-      .then(done)
-      .catch(done.fail);
+    expect(loadingIcon).toBeVisible();
   });
 
   describe('for group badges', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       store.state.kind = GROUP_BADGE;
 
-      Vue.nextTick().then(done).catch(done.fail);
+      await nextTick();
     });
 
-    it('renders a message if no badges exist', (done) => {
+    it('renders a message if no badges exist', async () => {
       store.state.badges = [];
 
-      Vue.nextTick()
-        .then(() => {
-          expect(vm.$el.innerText).toMatch('This group has no badges');
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      expect(vm.$el.innerText).toMatch('This group has no badges');
     });
   });
 });

spec/frontend/badges/components/badge_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import { DUMMY_IMAGE_URL, TEST_HOST } from 'spec/test_constants';
 import Badge from '~/badges/components/badge.vue';
@@ -27,7 +27,7 @@ describe('Badge component', () => {
       badgeImage.addEventListener('load', resolve);
       // Manually dispatch load event as it is not triggered
       badgeImage.dispatchEvent(new Event('load'));
-    }).then(() => Vue.nextTick());
+    }).then(() => nextTick());
   };
 
   afterEach(() => {
@@ -36,34 +36,25 @@ describe('Badge component', () => {
 
   describe('watchers', () => {
     describe('imageUrl', () => {
-      it('sets isLoading and resets numRetries and hasError', (done) => {
+      it('sets isLoading and resets numRetries and hasError', async () => {
         const props = { ...dummyProps };
-        createComponent(props)
-          .then(() => {
-            expect(vm.isLoading).toBe(false);
-            vm.hasError = true;
-            vm.numRetries = 42;
-
-            vm.imageUrl = `${props.imageUrl}#something/else`;
-
-            return Vue.nextTick();
-          })
-          .then(() => {
-            expect(vm.isLoading).toBe(true);
-            expect(vm.numRetries).toBe(0);
-            expect(vm.hasError).toBe(false);
-          })
-          .then(done)
-          .catch(done.fail);
+        await createComponent(props);
+        expect(vm.isLoading).toBe(false);
+        vm.hasError = true;
+        vm.numRetries = 42;
+
+        vm.imageUrl = `${props.imageUrl}#something/else`;
+        await nextTick();
+        expect(vm.isLoading).toBe(true);
+        expect(vm.numRetries).toBe(0);
+        expect(vm.hasError).toBe(false);
       });
     });
   });
 
   describe('methods', () => {
-    beforeEach((done) => {
-      createComponent({ ...dummyProps })
-        .then(done)
-        .catch(done.fail);
+    beforeEach(async () => {
+      await createComponent({ ...dummyProps });
     });
 
     it('onError resets isLoading and sets hasError', () => {
@@ -116,37 +107,29 @@ describe('Badge component', () => {
       expect(vm.$el.querySelector('.btn-group')).toBeHidden();
     });
 
-    it('shows a loading icon when loading', (done) => {
+    it('shows a loading icon when loading', async () => {
       vm.isLoading = true;
 
-      Vue.nextTick()
-        .then(() => {
-          const { badgeImage, loadingIcon, reloadButton } = findElements();
+      await nextTick();
+      const { badgeImage, loadingIcon, reloadButton } = findElements();
 
-          expect(badgeImage).toBeHidden();
-          expect(loadingIcon).toBeVisible();
-          expect(reloadButton).toBeHidden();
-          expect(vm.$el.querySelector('.btn-group')).toBeHidden();
-        })
-        .then(done)
-        .catch(done.fail);
+      expect(badgeImage).toBeHidden();
+      expect(loadingIcon).toBeVisible();
+      expect(reloadButton).toBeHidden();
+      expect(vm.$el.querySelector('.btn-group')).toBeHidden();
     });
 
-    it('shows an error and reload button if loading failed', (done) => {
+    it('shows an error and reload button if loading failed', async () => {
       vm.hasError = true;
 
-      Vue.nextTick()
-        .then(() => {
-          const { badgeImage, loadingIcon, reloadButton } = findElements();
+      await nextTick();
+      const { badgeImage, loadingIcon, reloadButton } = findElements();
 
-          expect(badgeImage).toBeHidden();
-          expect(loadingIcon).toBeHidden();
-          expect(reloadButton).toBeVisible();
-          expect(reloadButton).toHaveSpriteIcon('retry');
-          expect(vm.$el.innerText.trim()).toBe('No badge image');
-        })
-        .then(done)
-        .catch(done.fail);
+      expect(badgeImage).toBeHidden();
+      expect(loadingIcon).toBeHidden();
+      expect(reloadButton).toBeVisible();
+      expect(reloadButton).toHaveSpriteIcon('retry');
+      expect(vm.$el.innerText.trim()).toBe('No badge image');
     });
   });
 });

spec/frontend/batch_comments/components/preview_dropdown_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import PreviewDropdown from '~/batch_comments/components/preview_dropdown.vue';
@@ -49,7 +49,7 @@ describe('Batch comments preview dropdown', () => {
 
       wrapper.findByTestId('preview-item').vm.$emit('click');
 
-      await Vue.nextTick();
+      await nextTick();
 
       expect(setCurrentFileHash).toHaveBeenCalledWith(expect.anything(), 'hash');
       expect(scrollToDraft).toHaveBeenCalledWith(expect.anything(), { id: 1, file_hash: 'hash' });
@@ -63,7 +63,7 @@ describe('Batch comments preview dropdown', () => {
 
       wrapper.findByTestId('preview-item').vm.$emit('click');
 
-      await Vue.nextTick();
+      await nextTick();
 
       expect(scrollToDraft).toHaveBeenCalledWith(expect.anything(), { id: 1 });
     });

spec/frontend/confirm_modal_spec.js

-import Vue from 'vue';
+import { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import initConfirmModal from '~/confirm_modal';
 
@@ -92,10 +92,9 @@ describe('ConfirmModal', () => {
       });
 
       describe('Cancel Button', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           findModalCancelButton(findModal()).click();
-
-          return Vue.nextTick();
+          await nextTick();
         });
 
         it('closes the modal', () => {

spec/frontend/create_cluster/eks_cluster/components/eks_cluster_configuration_form_spec.js

 import { GlFormCheckbox } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import EksClusterConfigurationForm from '~/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue';
@@ -223,108 +223,98 @@ describe('EksClusterConfigurationForm', () => {
     });
   });
 
-  it('sets isLoadingRoles to RoleDropdown loading property', () => {
+  it('sets isLoadingRoles to RoleDropdown loading property', async () => {
     rolesState.isLoadingItems = true;
 
-    return Vue.nextTick().then(() => {
-      expect(findRoleDropdown().props('loading')).toBe(rolesState.isLoadingItems);
-    });
+    await nextTick();
+    expect(findRoleDropdown().props('loading')).toBe(rolesState.isLoadingItems);
   });
 
   it('sets roles to RoleDropdown items property', () => {
     expect(findRoleDropdown().props('items')).toBe(rolesState.items);
   });
 
-  it('sets RoleDropdown hasErrors to true when loading roles failed', () => {
+  it('sets RoleDropdown hasErrors to true when loading roles failed', async () => {
     rolesState.loadingItemsError = new Error();
 
-    return Vue.nextTick().then(() => {
-      expect(findRoleDropdown().props('hasErrors')).toEqual(true);
-    });
+    await nextTick();
+    expect(findRoleDropdown().props('hasErrors')).toEqual(true);
   });
 
   it('disables KeyPairDropdown when no region is selected', () => {
     expect(findKeyPairDropdown().props('disabled')).toBe(true);
   });
 
-  it('enables KeyPairDropdown when no region is selected', () => {
+  it('enables KeyPairDropdown when no region is selected', async () => {
     state.selectedRegion = { name: 'west-1 ' };
 
-    return Vue.nextTick().then(() => {
-      expect(findKeyPairDropdown().props('disabled')).toBe(false);
-    });
+    await nextTick();
+    expect(findKeyPairDropdown().props('disabled')).toBe(false);
   });
 
-  it('sets isLoadingKeyPairs to KeyPairDropdown loading property', () => {
+  it('sets isLoadingKeyPairs to KeyPairDropdown loading property', async () => {
     keyPairsState.isLoadingItems = true;
 
-    return Vue.nextTick().then(() => {
-      expect(findKeyPairDropdown().props('loading')).toBe(keyPairsState.isLoadingItems);
-    });
+    await nextTick();
+    expect(findKeyPairDropdown().props('loading')).toBe(keyPairsState.isLoadingItems);
   });
 
   it('sets keyPairs to KeyPairDropdown items property', () => {
     expect(findKeyPairDropdown().props('items')).toBe(keyPairsState.items);
   });
 
-  it('sets KeyPairDropdown hasErrors to true when loading key pairs fails', () => {
+  it('sets KeyPairDropdown hasErrors to true when loading key pairs fails', async () => {
     keyPairsState.loadingItemsError = new Error();
 
-    return Vue.nextTick().then(() => {
-      expect(findKeyPairDropdown().props('hasErrors')).toEqual(true);
-    });
+    await nextTick();
+    expect(findKeyPairDropdown().props('hasErrors')).toEqual(true);
   });
 
   it('disables VpcDropdown when no region is selected', () => {
     expect(findVpcDropdown().props('disabled')).toBe(true);
   });
 
-  it('enables VpcDropdown when no region is selected', () => {
+  it('enables VpcDropdown when no region is selected', async () => {
     state.selectedRegion = { name: 'west-1 ' };
 
-    return Vue.nextTick().then(() => {
-      expect(findVpcDropdown().props('disabled')).toBe(false);
-    });
+    await nextTick();
+    expect(findVpcDropdown().props('disabled')).toBe(false);
   });
 
-  it('sets isLoadingVpcs to VpcDropdown loading property', () => {
+  it('sets isLoadingVpcs to VpcDropdown loading property', async () => {
     vpcsState.isLoadingItems = true;
 
-    return Vue.nextTick().then(() => {
-      expect(findVpcDropdown().props('loading')).toBe(vpcsState.isLoadingItems);
-    });
+    await nextTick();
+    expect(findVpcDropdown().props('loading')).toBe(vpcsState.isLoadingItems);
   });
 
   it('sets vpcs to VpcDropdown items property', () => {
     expect(findVpcDropdown().props('items')).toBe(vpcsState.items);
   });
 
-  it('sets VpcDropdown hasErrors to true when loading vpcs fails', () => {
+  it('sets VpcDropdown hasErrors to true when loading vpcs fails', async () => {
     vpcsState.loadingItemsError = new Error();
 
-    return Vue.nextTick().then(() => {
-      expect(findVpcDropdown().props('hasErrors')).toEqual(true);
-    });
+    await nextTick();
+    expect(findVpcDropdown().props('hasErrors')).toEqual(true);
   });
 
   it('disables SubnetDropdown when no vpc is selected', () => {
     expect(findSubnetDropdown().props('disabled')).toBe(true);
   });
 
-  it('enables SubnetDropdown when a vpc is selected', () => {
+  it('enables SubnetDropdown when a vpc is selected', async () => {
     state.selectedVpc = { name: 'vpc-1 ' };
 
-    return Vue.nextTick().then(() => {
-      expect(findSubnetDropdown().props('disabled')).toBe(false);
-    });
+    await nextTick();
+    expect(findSubnetDropdown().props('disabled')).toBe(false);
   });
 
-  it('sets isLoadingSubnets to SubnetDropdown loading property', () => {
+  it('sets isLoadingSubnets to SubnetDropdown loading property', async () => {
     subnetsState.isLoadingItems = true;
 
-    return Vue.nextTick().then(() => {
-      expect(findSubnetDropdown().props('loading')).toBe(subnetsState.isLoadingItems);
-    });
+    await nextTick();
+    expect(findSubnetDropdown().props('loading')).toBe(subnetsState.isLoadingItems);
   });
 
   it('sets subnets to SubnetDropdown items property', () => {
@@ -360,32 +350,29 @@ describe('EksClusterConfigurationForm', () => {
     expect(findSecurityGroupDropdown().props('disabled')).toBe(true);
   });
 
-  it('enables SecurityGroupDropdown when a vpc is selected', () => {
+  it('enables SecurityGroupDropdown when a vpc is selected', async () => {
     state.selectedVpc = { name: 'vpc-1 ' };
 
-    return Vue.nextTick().then(() => {
-      expect(findSecurityGroupDropdown().props('disabled')).toBe(false);
-    });
+    await nextTick();
+    expect(findSecurityGroupDropdown().props('disabled')).toBe(false);
   });
 
-  it('sets isLoadingSecurityGroups to SecurityGroupDropdown loading property', () => {
+  it('sets isLoadingSecurityGroups to SecurityGroupDropdown loading property', async () => {
     securityGroupsState.isLoadingItems = true;
 
-    return Vue.nextTick().then(() => {
-      expect(findSecurityGroupDropdown().props('loading')).toBe(securityGroupsState.isLoadingItems);
-    });
+    await nextTick();
+    expect(findSecurityGroupDropdown().props('loading')).toBe(securityGroupsState.isLoadingItems);
   });
 
   it('sets securityGroups to SecurityGroupDropdown items property', () => {
     expect(findSecurityGroupDropdown().props('items')).toBe(securityGroupsState.items);
   });
 
-  it('sets SecurityGroupDropdown hasErrors to true when loading security groups fails', () => {
+  it('sets SecurityGroupDropdown hasErrors to true when loading security groups fails', async () => {
     securityGroupsState.loadingItemsError = new Error();
 
-    return Vue.nextTick().then(() => {
-      expect(findSecurityGroupDropdown().props('hasErrors')).toEqual(true);
-    });
+    await nextTick();
+    expect(findSecurityGroupDropdown().props('hasErrors')).toEqual(true);
   });
 
   it('dispatches setClusterName when cluster name input changes', () => {

spec/frontend/groups/components/group_folder_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 
 import groupFolderComponent from '~/groups/components/group_folder.vue';
 import groupItemComponent from '~/groups/components/group_item.vue';
@@ -18,13 +18,13 @@ const createComponent = (groups = mockGroups, parentGroup = mockParentGroupItem)
 describe('GroupFolderComponent', () => {
   let vm;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     Vue.component('GroupItem', groupItemComponent);
 
     vm = createComponent();
     vm.$mount();
 
-    return Vue.nextTick();
+    await nextTick();
   });
 
   afterEach(() => {

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

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import commitSidebarList from '~/ide/components/commit_sidebar/list.vue';
 import { createStore } from '~/ide/stores';
@@ -31,12 +31,11 @@ describe('Multi-file editor commit sidebar list', () => {
   });
 
   describe('with a list of files', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       const f = file('file name');
       f.changed = true;
       vm.fileList.push(f);
-
-      Vue.nextTick(done);
+      await nextTick();
     });
 
     it('renders list', () => {

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

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import radioGroup from '~/ide/components/commit_sidebar/radio_group.vue';
 import { createStore } from '~/ide/stores';
@@ -7,7 +7,7 @@ describe('IDE commit sidebar radio group', () => {
   let vm;
   let store;
 
-  beforeEach((done) => {
+  beforeEach(async () => {
     store = createStore();
 
     const Component = Vue.extend(radioGroup);
@@ -22,7 +22,7 @@ describe('IDE commit sidebar radio group', () => {
 
     vm.$mount();
 
-    Vue.nextTick(done);
+    await nextTick();
   });
 
   afterEach(() => {
@@ -33,7 +33,7 @@ describe('IDE commit sidebar radio group', () => {
     expect(vm.$el.textContent).toContain('test');
   });
 
-  it('uses slot if label is not present', (done) => {
+  it('uses slot if label is not present', async () => {
     vm.$destroy();
 
     vm = new Vue({
@@ -47,25 +47,19 @@ describe('IDE commit sidebar radio group', () => {
 
     vm.$mount();
 
-    Vue.nextTick(() => {
-      expect(vm.$el.textContent).toContain('Testing slot');
-
-      done();
-    });
+    await nextTick();
+    expect(vm.$el.textContent).toContain('Testing slot');
   });
 
-  it('updates store when changing radio button', (done) => {
+  it('updates store when changing radio button', async () => {
     vm.$el.querySelector('input').dispatchEvent(new Event('change'));
 
-    Vue.nextTick(() => {
-      expect(store.state.commit.commitAction).toBe('1');
-
-      done();
-    });
+    await nextTick();
+    expect(store.state.commit.commitAction).toBe('1');
   });
 
   describe('with input', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       vm.$destroy();
 
       const Component = Vue.extend(radioGroup);
@@ -82,32 +76,27 @@ describe('IDE commit sidebar radio group', () => {
 
       vm.$mount();
 
-      Vue.nextTick(done);
+      await nextTick();
     });
 
     it('renders input box when commitAction matches value', () => {
       expect(vm.$el.querySelector('.form-control')).not.toBeNull();
     });
 
-    it('hides input when commitAction doesnt match value', (done) => {
+    it('hides input when commitAction doesnt match value', async () => {
       store.state.commit.commitAction = '2';
 
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelector('.form-control')).toBeNull();
-        done();
-      });
+      await nextTick();
+      expect(vm.$el.querySelector('.form-control')).toBeNull();
     });
 
-    it('updates branch name in store on input', (done) => {
+    it('updates branch name in store on input', async () => {
       const input = vm.$el.querySelector('.form-control');
       input.value = 'testing-123';
       input.dispatchEvent(new Event('input'));
 
-      Vue.nextTick(() => {
-        expect(store.state.commit.newBranchName).toBe('testing-123');
-
-        done();
-      });
+      await nextTick();
+      expect(store.state.commit.newBranchName).toBe('testing-123');
     });
 
     it('renders newBranchName if present', () => {

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

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import successMessage from '~/ide/components/commit_sidebar/success_message.vue';
 import { createStore } from '~/ide/stores';
@@ -23,13 +23,10 @@ describe('IDE commit panel successful commit state', () => {
     vm.$destroy();
   });
 
-  it('renders last commit message when it exists', (done) => {
+  it('renders last commit message when it exists', async () => {
     vm.$store.state.lastCommitMsg = 'testing commit message';
 
-    Vue.nextTick(() => {
-      expect(vm.$el.textContent).toContain('testing commit message');
-
-      done();
-    });
+    await nextTick();
+    expect(vm.$el.textContent).toContain('testing commit message');
   });
 });

spec/frontend/ide/stores/actions/file_spec.js

 import MockAdapter from 'axios-mock-adapter';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import eventHub from '~/ide/eventhub';
 import { createRouter } from '~/ide/ide_router';
 import service from '~/ide/services';
@@ -68,7 +68,7 @@ describe('IDE store file actions', () => {
 
       return store
         .dispatch('closeFile', localFile)
-        .then(Vue.nextTick)
+        .then(nextTick)
         .then(() => {
           expect(store.state.openFiles.length).toBe(0);
           expect(store.state.changedFiles.length).toBe(1);
@@ -83,7 +83,7 @@ describe('IDE store file actions', () => {
 
       return store
         .dispatch('closeFile', localFile)
-        .then(Vue.nextTick)
+        .then(nextTick)
         .then(() => {
           expect(router.push).toHaveBeenCalledWith('/project/test/test/tree/main/-/newOpenFile/');
         });

spec/frontend/issuable/components/issue_milestone_spec.js

 import { GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 
 import { mockMilestone } from 'jest/boards/mock_data';
 import IssueMilestone from '~/issuable/components/issue_milestone.vue';
@@ -19,12 +19,12 @@ describe('IssueMilestoneComponent', () => {
   let wrapper;
   let vm;
 
-  beforeEach((done) => {
+  beforeEach(async () => {
     wrapper = createComponent();
 
     ({ vm } = wrapper);
 
-    Vue.nextTick(done);
+    await nextTick();
   });
 
   afterEach(() => {
@@ -37,7 +37,7 @@ describe('IssueMilestoneComponent', () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, start_date: '' },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.isMilestoneStarted).toBe(false);
       });
@@ -46,7 +46,7 @@ describe('IssueMilestoneComponent', () => {
         await wrapper.setProps({
           milestone: { ...mockMilestone, start_date: '1990-07-22' },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.isMilestoneStarted).toBe(true);
       });
@@ -57,7 +57,7 @@ describe('IssueMilestoneComponent', () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, due_date: '' },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.isMilestonePastDue).toBe(false);
       });
@@ -80,7 +80,7 @@ describe('IssueMilestoneComponent', () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, due_date: '' },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.milestoneDatesAbsolute).toBe('(January 1, 2018)');
       });
@@ -89,7 +89,7 @@ describe('IssueMilestoneComponent', () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, start_date: '', due_date: '' },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.milestoneDatesAbsolute).toBe('');
       });
@@ -100,7 +100,7 @@ describe('IssueMilestoneComponent', () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, due_date: `${new Date().getFullYear() + 10}-01-01` },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.milestoneDatesHuman).toContain('years remaining');
       });
@@ -109,7 +109,7 @@ describe('IssueMilestoneComponent', () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, start_date: '1990-07-22', due_date: '' },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.milestoneDatesHuman).toContain('Started');
       });
@@ -122,7 +122,7 @@ describe('IssueMilestoneComponent', () => {
             due_date: '',
           },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.milestoneDatesHuman).toContain('Starts');
       });
@@ -131,7 +131,7 @@ describe('IssueMilestoneComponent', () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, start_date: '', due_date: '' },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.milestoneDatesHuman).toBe('');
       });

spec/frontend/issues/list/components/jira_issues_import_status_app_spec.js

 import { GlAlert, GlLabel } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import JiraIssuesImportStatus from '~/issues/list/components/jira_issues_import_status_app.vue';
 
 describe('JiraIssuesImportStatus', () => {
@@ -100,7 +100,7 @@ describe('JiraIssuesImportStatus', () => {
   });
 
   describe('alert message', () => {
-    it('is hidden when dismissed', () => {
+    it('is hidden when dismissed', async () => {
       wrapper = mountComponent({
         shouldShowInProgressAlert: true,
       });
@@ -109,9 +109,8 @@ describe('JiraIssuesImportStatus', () => {
 
       findAlert().vm.$emit('dismiss');
 
-      return Vue.nextTick(() => {
-        expect(wrapper.find(GlAlert).exists()).toBe(false);
-      });
+      await nextTick();
+      expect(wrapper.find(GlAlert).exists()).toBe(false);
     });
   });
 });

spec/frontend/issues/show/components/title_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import titleComponent from '~/issues/show/components/title.vue';
 import eventHub from '~/issues/show/event_hub';
 import Store from '~/issues/show/stores';
@@ -29,36 +29,33 @@ describe('Title component', () => {
     expect(vm.$el.querySelector('.title').innerHTML.trim()).toBe('Testing <img>');
   });
 
-  it('updates page title when changing titleHtml', () => {
+  it('updates page title when changing titleHtml', async () => {
     const spy = jest.spyOn(vm, 'setPageTitle');
     vm.titleHtml = 'test';
 
-    return vm.$nextTick().then(() => {
-      expect(spy).toHaveBeenCalled();
-    });
+    await nextTick();
+    expect(spy).toHaveBeenCalled();
   });
 
-  it('animates title changes', () => {
+  it('animates title changes', async () => {
     vm.titleHtml = 'test';
-    return vm
-      .$nextTick()
-      .then(() => {
-        expect(vm.$el.querySelector('.title').classList).toContain('issue-realtime-pre-pulse');
-        jest.runAllTimers();
-        return vm.$nextTick();
-      })
-      .then(() => {
-        expect(vm.$el.querySelector('.title').classList).toContain('issue-realtime-trigger-pulse');
-      });
+
+    await nextTick();
+
+    expect(vm.$el.querySelector('.title').classList).toContain('issue-realtime-pre-pulse');
+    jest.runAllTimers();
+
+    await nextTick();
+
+    expect(vm.$el.querySelector('.title').classList).toContain('issue-realtime-trigger-pulse');
   });
 
-  it('updates page title after changing title', () => {
+  it('updates page title after changing title', async () => {
     vm.titleHtml = 'changed';
     vm.titleText = 'changed';
 
-    return vm.$nextTick().then(() => {
-      expect(document.querySelector('title').textContent.trim()).toContain('changed');
-    });
+    await nextTick();
+    expect(document.querySelector('title').textContent.trim()).toContain('changed');
   });
 
   describe('inline edit button', () => {
@@ -80,16 +77,15 @@ describe('Title component', () => {
       expect(vm.$el.querySelector('.btn-edit')).toBeDefined();
     });
 
-    it('should trigger open.form event when clicked', () => {
+    it('should trigger open.form event when clicked', async () => {
       jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
       vm.showInlineEditButton = true;
       vm.canUpdate = true;
 
-      Vue.nextTick(() => {
-        vm.$el.querySelector('.btn-edit').click();
+      await nextTick();
+      vm.$el.querySelector('.btn-edit').click();
 
-        expect(eventHub.$emit).toHaveBeenCalledWith('open.form');
-      });
+      expect(eventHub.$emit).toHaveBeenCalledWith('open.form');
     });
   });
 });

spec/frontend/jira_import/components/jira_import_app_spec.js

 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import JiraImportApp from '~/jira_import/components/jira_import_app.vue';
 import JiraImportForm from '~/jira_import/components/jira_import_form.vue';
 import JiraImportProgress from '~/jira_import/components/jira_import_progress.vue';
@@ -230,7 +230,7 @@ describe('JiraImportApp', () => {
 
       getFormComponent().vm.$emit('error', 'There was an error');
 
-      await Vue.nextTick();
+      await nextTick();
 
       expect(getAlert().exists()).toBe(true);
     });
@@ -248,7 +248,7 @@ describe('JiraImportApp', () => {
 
       getAlert().vm.$emit('dismiss');
 
-      await Vue.nextTick();
+      await nextTick();
 
       expect(getAlert().exists()).toBe(false);
     });

spec/frontend/notes/components/note_actions_spec.js

 import { mount, createWrapper } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import { TEST_HOST } from 'spec/test_constants';
 import axios from '~/lib/utils/axios_utils';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
@@ -76,15 +76,14 @@ describe('noteActions', () => {
       expect(findUserAccessRoleBadgeText(1)).toBe(props.accessLevel);
     });
 
-    it('should render contributor badge', () => {
+    it('should render contributor badge', async () => {
       wrapper.setProps({
         accessLevel: null,
         isContributor: true,
       });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findUserAccessRoleBadgeText(1)).toBe('Contributor');
-      });
+      await nextTick();
+      expect(findUserAccessRoleBadgeText(1)).toBe('Contributor');
     });
 
     it('should render emoji link', () => {
@@ -105,7 +104,7 @@ describe('noteActions', () => {
         expect(wrapper.find('.js-btn-copy-note-link').exists()).toBe(true);
       });
 
-      it('should not show copy link action when `noteUrl` prop is empty', (done) => {
+      it('should not show copy link action when `noteUrl` prop is empty', async () => {
         wrapper.setProps({
           ...props,
           author: {
@@ -119,30 +118,23 @@ describe('noteActions', () => {
           noteUrl: '',
         });
 
-        Vue.nextTick()
-          .then(() => {
-            expect(wrapper.find('.js-btn-copy-note-link').exists()).toBe(false);
-          })
-          .then(done)
-          .catch(done.fail);
+        await nextTick();
+        expect(wrapper.find('.js-btn-copy-note-link').exists()).toBe(false);
       });
 
       it('should be possible to delete comment', () => {
         expect(wrapper.find('.js-note-delete').exists()).toBe(true);
       });
 
-      it('closes tooltip when dropdown opens', (done) => {
+      it('closes tooltip when dropdown opens', async () => {
         wrapper.find('.more-actions-toggle').trigger('click');
 
         const rootWrapper = createWrapper(wrapper.vm.$root);
-        Vue.nextTick()
-          .then(() => {
-            const emitted = Object.keys(rootWrapper.emitted());
-
-            expect(emitted).toEqual([BV_HIDE_TOOLTIP]);
-            done();
-          })
-          .catch(done.fail);
+
+        await nextTick();
+        const emitted = Object.keys(rootWrapper.emitted());
+
+        expect(emitted).toEqual([BV_HIDE_TOOLTIP]);
       });
 
       it('should not be possible to assign or unassign the comment author in a merge request', () => {

spec/frontend/notes/components/note_body_spec.js

 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import { suggestionCommitMessage } from '~/diffs/store/getters';
@@ -46,9 +46,9 @@ describe('issue_note_body component', () => {
   });
 
   describe('isEditing', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       vm.isEditing = true;
-      Vue.nextTick(done);
+      await nextTick();
     });
 
     it('renders edit form', () => {

spec/frontend/notes/components/notes_app_spec.js

 import { mount, shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import $ from 'jquery';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { setTestTimeout } from 'helpers/timeout';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -294,24 +294,22 @@ describe('note_app', () => {
       return waitForDiscussionsRequest();
     });
 
-    it('should render markdown docs url', () => {
+    it('should render markdown docs url', async () => {
       wrapper.find('.js-note-edit').trigger('click');
       const { markdownDocsPath } = mockData.notesDataMock;
 
-      return Vue.nextTick().then(() => {
-        expect(wrapper.find(`.edit-note a[href="${markdownDocsPath}"]`).text().trim()).toEqual(
-          'Markdown is supported',
-        );
-      });
+      await nextTick();
+      expect(wrapper.find(`.edit-note a[href="${markdownDocsPath}"]`).text().trim()).toEqual(
+        'Markdown is supported',
+      );
     });
 
-    it('should not render quick actions docs url', () => {
+    it('should not render quick actions docs url', async () => {
       wrapper.find('.js-note-edit').trigger('click');
       const { quickActionsDocsPath } = mockData.notesDataMock;
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(`.edit-note a[href="${quickActionsDocsPath}"]`).exists()).toBe(false);
-      });
+      await nextTick();
+      expect(wrapper.find(`.edit-note a[href="${quickActionsDocsPath}"]`).exists()).toBe(false);
     });
   });
 

spec/frontend/profile/account/components/delete_account_modal_spec.js

 import { mount } from '@vue/test-utils';
 import { merge } from 'lodash';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 
 import { TEST_HOST } from 'helpers/test_constants';
 import deleteAccountModal from '~/profile/account/components/delete_account_modal.vue';
@@ -56,7 +56,7 @@ describe('DeleteAccountModal component', () => {
   const findModal = () => wrapper.find(GlModalStub);
 
   describe('with password confirmation', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       createWrapper({
         propsData: {
           confirmWithPassword: true,
@@ -65,48 +65,40 @@ describe('DeleteAccountModal component', () => {
 
       vm.isOpen = true;
 
-      Vue.nextTick().then(done).catch(done.fail);
+      await nextTick();
     });
 
-    it('does not accept empty password', (done) => {
+    it('does not accept empty password', async () => {
       const { form, input } = findElements();
       jest.spyOn(form, 'submit').mockImplementation(() => {});
       input.value = '';
       input.dispatchEvent(new Event('input'));
 
-      Vue.nextTick()
-        .then(() => {
-          expect(vm.enteredPassword).toBe(input.value);
-          expect(findModal().attributes('ok-disabled')).toBe('true');
-          findModal().vm.$emit('primary');
+      await nextTick();
+      expect(vm.enteredPassword).toBe(input.value);
+      expect(findModal().attributes('ok-disabled')).toBe('true');
+      findModal().vm.$emit('primary');
 
-          expect(form.submit).not.toHaveBeenCalled();
-        })
-        .then(done)
-        .catch(done.fail);
+      expect(form.submit).not.toHaveBeenCalled();
     });
 
-    it('submits form with password', (done) => {
+    it('submits form with password', async () => {
       const { form, input } = findElements();
       jest.spyOn(form, 'submit').mockImplementation(() => {});
       input.value = 'anything';
       input.dispatchEvent(new Event('input'));
 
-      Vue.nextTick()
-        .then(() => {
-          expect(vm.enteredPassword).toBe(input.value);
-          expect(findModal().attributes('ok-disabled')).toBeUndefined();
-          findModal().vm.$emit('primary');
+      await nextTick();
+      expect(vm.enteredPassword).toBe(input.value);
+      expect(findModal().attributes('ok-disabled')).toBeUndefined();
+      findModal().vm.$emit('primary');
 
-          expect(form.submit).toHaveBeenCalled();
-        })
-        .then(done)
-        .catch(done.fail);
+      expect(form.submit).toHaveBeenCalled();
     });
   });
 
   describe('with username confirmation', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       createWrapper({
         propsData: {
           confirmWithPassword: false,
@@ -115,43 +107,35 @@ describe('DeleteAccountModal component', () => {
 
       vm.isOpen = true;
 
-      Vue.nextTick().then(done).catch(done.fail);
+      await nextTick();
     });
 
-    it('does not accept wrong username', (done) => {
+    it('does not accept wrong username', async () => {
       const { form, input } = findElements();
       jest.spyOn(form, 'submit').mockImplementation(() => {});
       input.value = 'this is wrong';
       input.dispatchEvent(new Event('input'));
 
-      Vue.nextTick()
-        .then(() => {
-          expect(vm.enteredUsername).toBe(input.value);
-          expect(findModal().attributes('ok-disabled')).toBe('true');
-          findModal().vm.$emit('primary');
+      await nextTick();
+      expect(vm.enteredUsername).toBe(input.value);
+      expect(findModal().attributes('ok-disabled')).toBe('true');
+      findModal().vm.$emit('primary');
 
-          expect(form.submit).not.toHaveBeenCalled();
-        })
-        .then(done)
-        .catch(done.fail);
+      expect(form.submit).not.toHaveBeenCalled();
     });
 
-    it('submits form with correct username', (done) => {
+    it('submits form with correct username', async () => {
       const { form, input } = findElements();
       jest.spyOn(form, 'submit').mockImplementation(() => {});
       input.value = username;
       input.dispatchEvent(new Event('input'));
 
-      Vue.nextTick()
-        .then(() => {
-          expect(vm.enteredUsername).toBe(input.value);
-          expect(findModal().attributes('ok-disabled')).toBeUndefined();
-          findModal().vm.$emit('primary');
+      await nextTick();
+      expect(vm.enteredUsername).toBe(input.value);
+      expect(findModal().attributes('ok-disabled')).toBeUndefined();
+      findModal().vm.$emit('primary');
 
-          expect(form.submit).toHaveBeenCalled();
-        })
-        .then(done)
-        .catch(done.fail);
+      expect(form.submit).toHaveBeenCalled();
     });
   });
 });

spec/frontend/reports/components/report_section_spec.js

 import { mount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import mountComponent, { mountComponentWithSlots } from 'helpers/vue_mount_component_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import reportSection from '~/reports/components/report_section.vue';
@@ -71,16 +71,12 @@ describe('Report section', () => {
         const issues = hasIssues ? 'has issues' : 'has no issues';
         const open = alwaysOpen ? 'is always open' : 'is not always open';
 
-        it(`is ${isCollapsible}, if the report ${issues} and ${open}`, (done) => {
+        it(`is ${isCollapsible}, if the report ${issues} and ${open}`, async () => {
           vm.hasIssues = hasIssues;
           vm.alwaysOpen = alwaysOpen;
 
-          Vue.nextTick()
-            .then(() => {
-              expect(vm.isCollapsible).toBe(isCollapsible);
-            })
-            .then(done)
-            .catch(done.fail);
+          await nextTick();
+          expect(vm.isCollapsible).toBe(isCollapsible);
         });
       });
     });
@@ -97,16 +93,12 @@ describe('Report section', () => {
         const issues = isCollapsed ? 'is collapsed' : 'is not collapsed';
         const open = alwaysOpen ? 'is always open' : 'is not always open';
 
-        it(`is ${isExpanded}, if the report ${issues} and ${open}`, (done) => {
+        it(`is ${isExpanded}, if the report ${issues} and ${open}`, async () => {
           vm.isCollapsed = isCollapsed;
           vm.alwaysOpen = alwaysOpen;
 
-          Vue.nextTick()
-            .then(() => {
-              expect(vm.isExpanded).toBe(isExpanded);
-            })
-            .then(done)
-            .catch(done.fail);
+          await nextTick();
+          expect(vm.isExpanded).toBe(isExpanded);
         });
       });
     });
@@ -148,79 +140,55 @@ describe('Report section', () => {
     describe('toggleCollapsed', () => {
       const hiddenCss = { display: 'none' };
 
-      it('toggles issues', (done) => {
+      it('toggles issues', async () => {
         vm.$el.querySelector('button').click();
 
-        Vue.nextTick()
-          .then(() => {
-            expect(vm.$el.querySelector('.js-report-section-container')).not.toHaveCss(hiddenCss);
-            expect(vm.$el.querySelector('button').textContent.trim()).toEqual('Collapse');
-
-            vm.$el.querySelector('button').click();
-          })
-          .then(Vue.nextTick)
-          .then(() => {
-            expect(vm.$el.querySelector('.js-report-section-container')).toHaveCss(hiddenCss);
-            expect(vm.$el.querySelector('button').textContent.trim()).toEqual('Expand');
-          })
-          .then(done)
-          .catch(done.fail);
+        await nextTick();
+        expect(vm.$el.querySelector('.js-report-section-container')).not.toHaveCss(hiddenCss);
+        expect(vm.$el.querySelector('button').textContent.trim()).toEqual('Collapse');
+
+        vm.$el.querySelector('button').click();
+
+        await nextTick();
+        expect(vm.$el.querySelector('.js-report-section-container')).toHaveCss(hiddenCss);
+        expect(vm.$el.querySelector('button').textContent.trim()).toEqual('Expand');
       });
 
-      it('is always expanded, if always-open is set to true', (done) => {
+      it('is always expanded, if always-open is set to true', async () => {
         vm.alwaysOpen = true;
-        Vue.nextTick()
-          .then(() => {
-            expect(vm.$el.querySelector('.js-report-section-container')).not.toHaveCss(hiddenCss);
-            expect(vm.$el.querySelector('button')).toBeNull();
-          })
-          .then(done)
-          .catch(done.fail);
+        await nextTick();
+        expect(vm.$el.querySelector('.js-report-section-container')).not.toHaveCss(hiddenCss);
+        expect(vm.$el.querySelector('button')).toBeNull();
       });
     });
   });
 
   describe('snowplow events', () => {
-    it('does emit an event on issue toggle if the shouldEmitToggleEvent prop does exist', (done) => {
+    it('does emit an event on issue toggle if the shouldEmitToggleEvent prop does exist', async () => {
       createComponent({ hasIssues: true, shouldEmitToggleEvent: true });
 
       expect(wrapper.emitted().toggleEvent).toBeUndefined();
 
       findCollapseButton().trigger('click');
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          expect(wrapper.emitted().toggleEvent).toHaveLength(1);
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      expect(wrapper.emitted().toggleEvent).toHaveLength(1);
     });
 
-    it('does not emit an event on issue toggle if the shouldEmitToggleEvent prop does not exist', (done) => {
+    it('does not emit an event on issue toggle if the shouldEmitToggleEvent prop does not exist', async () => {
       createComponent({ hasIssues: true });
 
       expect(wrapper.emitted().toggleEvent).toBeUndefined();
 
       findCollapseButton().trigger('click');
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          expect(wrapper.emitted().toggleEvent).toBeUndefined();
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      expect(wrapper.emitted().toggleEvent).toBeUndefined();
     });
 
-    it('does not emit an event if always-open is set to true', (done) => {
+    it('does not emit an event if always-open is set to true', async () => {
       createComponent({ alwaysOpen: true, hasIssues: true, shouldEmitToggleEvent: true });
 
-      wrapper.vm
-        .$nextTick()
-        .then(() => {
-          expect(wrapper.emitted().toggleEvent).toBeUndefined();
-        })
-        .then(done)
-        .catch(done.fail);
+      await nextTick();
+      expect(wrapper.emitted().toggleEvent).toBeUndefined();
     });
   });
 

spec/frontend/sidebar/participants_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import Participants from '~/sidebar/components/participants/participants.vue';
 
 const PARTICIPANT = {
@@ -77,7 +77,7 @@ describe('Participants', () => {
       expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
     });
 
-    it('when only showing visible participants, shows an avatar only for each participant under the limit', () => {
+    it('when only showing visible participants, shows an avatar only for each participant under the limit', async () => {
       const numberOfLessParticipants = 2;
       wrapper = mountComponent({
         loading: false,
@@ -91,12 +91,11 @@ describe('Participants', () => {
         isShowingMoreParticipants: false,
       });
 
-      return Vue.nextTick().then(() => {
-        expect(wrapper.findAll('.participants-author')).toHaveLength(numberOfLessParticipants);
-      });
+      await nextTick();
+      expect(wrapper.findAll('.participants-author')).toHaveLength(numberOfLessParticipants);
     });
 
-    it('when only showing all participants, each has an avatar', () => {
+    it('when only showing all participants, each has an avatar', async () => {
       wrapper = mountComponent({
         loading: false,
         participants: PARTICIPANT_LIST,
@@ -109,9 +108,8 @@ describe('Participants', () => {
         isShowingMoreParticipants: true,
       });
 
-      return Vue.nextTick().then(() => {
-        expect(wrapper.findAll('.participants-author')).toHaveLength(PARTICIPANT_LIST.length);
-      });
+      await nextTick();
+      expect(wrapper.findAll('.participants-author')).toHaveLength(PARTICIPANT_LIST.length);
     });
 
     it('does not have more participants link when they can all be shown', () => {
@@ -126,7 +124,7 @@ describe('Participants', () => {
       expect(getMoreParticipantsButton().exists()).toBe(false);
     });
 
-    it('when too many participants, has more participants link to show more', () => {
+    it('when too many participants, has more participants link to show more', async () => {
       wrapper = mountComponent({
         loading: false,
         participants: PARTICIPANT_LIST,
@@ -139,12 +137,11 @@ describe('Participants', () => {
         isShowingMoreParticipants: false,
       });
 
-      return Vue.nextTick().then(() => {
-        expect(getMoreParticipantsButton().text()).toBe('+ 1 more');
-      });
+      await nextTick();
+      expect(getMoreParticipantsButton().text()).toBe('+ 1 more');
     });
 
-    it('when too many participants and already showing them, has more participants link to show less', () => {
+    it('when too many participants and already showing them, has more participants link to show less', async () => {
       wrapper = mountComponent({
         loading: false,
         participants: PARTICIPANT_LIST,
@@ -157,9 +154,8 @@ describe('Participants', () => {
         isShowingMoreParticipants: true,
       });
 
-      return Vue.nextTick().then(() => {
-        expect(getMoreParticipantsButton().text()).toBe('- show less');
-      });
+      await nextTick();
+      expect(getMoreParticipantsButton().text()).toBe('- show less');
     });
 
     it('clicking more participants link emits event', () => {
@@ -176,7 +172,7 @@ describe('Participants', () => {
       expect(wrapper.vm.isShowingMoreParticipants).toBe(true);
     });
 
-    it('clicking on participants icon emits `toggleSidebar` event', () => {
+    it('clicking on participants icon emits `toggleSidebar` event', async () => {
       wrapper = mountComponent({
         loading: false,
         participants: PARTICIPANT_LIST,
@@ -187,11 +183,9 @@ describe('Participants', () => {
 
       wrapper.find('.sidebar-collapsed-icon').trigger('click');
 
-      return Vue.nextTick(() => {
-        expect(spy).toHaveBeenCalledWith('toggleSidebar');
-
-        spy.mockRestore();
-      });
+      await nextTick();
+      expect(spy).toHaveBeenCalledWith('toggleSidebar');
+      spy.mockRestore();
     });
   });
 

spec/frontend/user_lists/components/user_lists_spec.js

 import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
 import { mount, createWrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import waitForPromises from 'helpers/wait_for_promises';
 import Api from '~/api';
@@ -82,7 +82,7 @@ describe('~/user_lists/components/user_lists.vue', () => {
 
         factory();
         await waitForPromises();
-        await Vue.nextTick();
+        await nextTick();
 
         emptyState = wrapper.findComponent(GlEmptyState);
       });
@@ -130,7 +130,7 @@ describe('~/user_lists/components/user_lists.vue', () => {
 
         factory();
         jest.spyOn(store, 'dispatch');
-        await Vue.nextTick();
+        await nextTick();
         table = wrapper.findComponent(UserListsTable);
       });
 
@@ -171,7 +171,7 @@ describe('~/user_lists/components/user_lists.vue', () => {
       Api.fetchFeatureFlagUserLists.mockRejectedValue();
       factory();
 
-      await Vue.nextTick();
+      await nextTick();
     });
 
     it('should render error state', () => {

spec/frontend/vue_alerts_spec.js

-import Vue from 'vue';
+import { nextTick } from 'vue';
 import { setHTMLFixture } from 'helpers/fixtures';
 import { TEST_HOST } from 'helpers/test_constants';
 import initVueAlerts from '~/vue_alerts';
@@ -75,10 +75,9 @@ describe('VueAlerts', () => {
     });
 
     describe('when dismissed', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         findAlertDismiss(findAlerts()[0]).click();
-
-        return Vue.nextTick();
+        await nextTick();
       });
 
       it('hides the alert', () => {

spec/frontend/vue_mr_widget/components/mr_widget_memory_usage_spec.js

 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import MemoryUsage from '~/vue_merge_request_widget/components/deployment/memory_usage.vue';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
 
@@ -184,7 +184,7 @@ describe('MemoryUsage', () => {
       vm.hasMetrics = false;
       vm.loadFailed = false;
 
-      Vue.nextTick(() => {
+      nextTick(() => {
         expect(el.querySelector('.js-usage-info.usage-info-loading')).toBeDefined();
 
         expect(el.querySelector('.js-usage-info .usage-info-load-spinner')).toBeDefined();
@@ -203,7 +203,7 @@ describe('MemoryUsage', () => {
       vm.loadFailed = false;
       vm.memoryMetrics = metricsMockData.metrics.memory_values[0].values;
 
-      Vue.nextTick(() => {
+      nextTick(() => {
         expect(el.querySelector('.memory-graph-container')).toBeDefined();
         expect(el.querySelector('.js-usage-info').innerText).toContain(messages.hasMetrics);
         done();
@@ -215,7 +215,7 @@ describe('MemoryUsage', () => {
       vm.hasMetrics = false;
       vm.loadFailed = true;
 
-      Vue.nextTick(() => {
+      nextTick(() => {
         expect(el.querySelector('.js-usage-info.usage-info-failed')).toBeDefined();
 
         expect(el.querySelector('.js-usage-info').innerText).toContain(messages.loadFailed);
@@ -228,7 +228,7 @@ describe('MemoryUsage', () => {
       vm.hasMetrics = false;
       vm.loadFailed = false;
 
-      Vue.nextTick(() => {
+      nextTick(() => {
         expect(el.querySelector('.js-usage-info.usage-info-unavailable')).toBeDefined();
 
         expect(el.querySelector('.js-usage-info').innerText).toContain(messages.metricsUnavailable);

spec/frontend/vue_mr_widget/components/states/mr_widget_merged_spec.js

 import { getByRole } from '@testing-library/dom';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import { OPEN_REVERT_MODAL, OPEN_CHERRY_PICK_MODAL } from '~/projects/commit/constants';
 import modalEventHub from '~/projects/commit/event_hub';
@@ -200,7 +200,7 @@ describe('MRWidgetMerged', () => {
   it('hides button to copy commit SHA if SHA does not exist', (done) => {
     vm.mr.mergeCommitSha = null;
 
-    Vue.nextTick(() => {
+    nextTick(() => {
       expect(selectors.copyMergeShaButton).toBe(null);
       expect(vm.$el.querySelector('.mr-info-list').innerText).not.toContain('with');
       done();
@@ -216,7 +216,7 @@ describe('MRWidgetMerged', () => {
   it('should not show source branch deleted text', (done) => {
     vm.mr.sourceBranchRemoved = false;
 
-    Vue.nextTick(() => {
+    nextTick(() => {
       expect(vm.$el.innerText).not.toContain('The source branch has been deleted');
       done();
     });
@@ -226,7 +226,7 @@ describe('MRWidgetMerged', () => {
     vm.mr.isRemovingSourceBranch = true;
     vm.mr.sourceBranchRemoved = false;
 
-    Vue.nextTick(() => {
+    nextTick(() => {
       expect(vm.$el.innerText).toContain('The source branch is being deleted');
       expect(vm.$el.innerText).not.toContain('The source branch has been deleted');
       done();

spec/frontend/vue_mr_widget/components/states/mr_widget_nothing_to_merge_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import NothingToMerge from '~/vue_merge_request_widget/components/states/nothing_to_merge.vue';
 
 describe('NothingToMerge', () => {
@@ -20,7 +20,7 @@ describe('NothingToMerge', () => {
 
     it('should not show new blob link if there is no link available', () => {
       vm.mr.newBlobPath = null;
-      Vue.nextTick(() => {
+      nextTick(() => {
         expect(vm.$el.querySelector('[data-testid="createFileButton"]')).toEqual(null);
       });
     });

spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js

 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import { GlSprintf } from '@gitlab/ui';
 import simplePoll from '~/lib/utils/simple_poll';
 import CommitEdit from '~/vue_merge_request_widget/components/states/commit_edit.vue';
@@ -196,7 +196,7 @@ describe('ReadyToMerge', () => {
         // eslint-disable-next-line no-restricted-syntax
         wrapper.setData({ isMergingImmediately: true });
 
-        await Vue.nextTick();
+        await nextTick();
 
         expect(wrapper.vm.mergeButtonText).toEqual('Merge in progress');
       });
@@ -266,7 +266,7 @@ describe('ReadyToMerge', () => {
         // eslint-disable-next-line no-restricted-syntax
         wrapper.setData({ isMakingRequest: true });
 
-        await Vue.nextTick();
+        await nextTick();
 
         expect(wrapper.vm.isMergeButtonDisabled).toBe(true);
       });

spec/frontend/vue_mr_widget/components/states/mr_widget_wip_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import WorkInProgress from '~/vue_merge_request_widget/components/states/work_in_progress.vue';
 import toast from '~/vue_shared/plugins/global_toast';
 import eventHub from '~/vue_merge_request_widget/event_hub';
@@ -94,7 +94,7 @@ describe('Wip', () => {
     it('should not show removeWIP button is user cannot update MR', (done) => {
       vm.mr.removeWIPPath = '';
 
-      Vue.nextTick(() => {
+      nextTick(() => {
         expect(el.querySelector('.js-remove-draft')).toEqual(null);
         done();
       });

spec/frontend/vue_shared/components/expand_button_spec.js

 import { mount } from '@vue/test-utils';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import ExpandButton from '~/vue_shared/components/expand_button.vue';
 
 const text = {
@@ -66,9 +66,9 @@ describe('Expand button', () => {
   });
 
   describe('on click', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       expanderPrependEl().trigger('click');
-      Vue.nextTick(done);
+      await nextTick();
     });
 
     afterEach(() => {
@@ -85,7 +85,7 @@ describe('Expand button', () => {
     });
 
     describe('when short text is provided', () => {
-      beforeEach((done) => {
+      beforeEach(async () => {
         factory({
           slots: {
             expanded: `<p>${text.expanded}</p>`,
@@ -94,7 +94,7 @@ describe('Expand button', () => {
         });
 
         expanderPrependEl().trigger('click');
-        Vue.nextTick(done);
+        await nextTick();
       });
 
       it('only renders expanded text', () => {
@@ -110,31 +110,29 @@ describe('Expand button', () => {
   });
 
   describe('append button', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       expanderPrependEl().trigger('click');
-      Vue.nextTick(done);
+      await nextTick();
     });
 
-    it('clicking hides itself and shows prepend', () => {
+    it('clicking hides itself and shows prepend', async () => {
       expect(expanderAppendEl().isVisible()).toBe(true);
       expanderAppendEl().trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(expanderPrependEl().isVisible()).toBe(true);
-      });
+      await nextTick();
+      expect(expanderPrependEl().isVisible()).toBe(true);
     });
 
-    it('clicking hides expanded text', () => {
+    it('clicking hides expanded text', async () => {
       expect(wrapper.find(ExpandButton).text().trim()).toBe(text.expanded);
       expanderAppendEl().trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(ExpandButton).text().trim()).not.toBe(text.expanded);
-      });
+      await nextTick();
+      expect(wrapper.find(ExpandButton).text().trim()).not.toBe(text.expanded);
     });
 
     describe('when short text is provided', () => {
-      beforeEach((done) => {
+      beforeEach(async () => {
         factory({
           slots: {
             expanded: `<p>${text.expanded}</p>`,
@@ -143,16 +141,15 @@ describe('Expand button', () => {
         });
 
         expanderPrependEl().trigger('click');
-        Vue.nextTick(done);
+        await nextTick();
       });
 
-      it('clicking reveals short text', () => {
+      it('clicking reveals short text', async () => {
         expect(wrapper.find(ExpandButton).text().trim()).toBe(text.expanded);
         expanderAppendEl().trigger('click');
 
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.find(ExpandButton).text().trim()).toBe(text.short);
-        });
+        await nextTick();
+        expect(wrapper.find(ExpandButton).text().trim()).toBe(text.short);
       });
     });
   });

spec/frontend/vue_shared/components/gl_countdown_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import mountComponent from 'helpers/vue_mount_component_helper';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 
@@ -17,38 +17,34 @@ describe('GlCountdown', () => {
   });
 
   describe('when there is time remaining', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       vm = mountComponent(Component, {
         endDateString: '2000-01-01T01:02:03Z',
       });
 
-      Vue.nextTick().then(done).catch(done.fail);
+      await nextTick();
     });
 
     it('displays remaining time', () => {
       expect(vm.$el.textContent).toContain('01:02:03');
     });
 
-    it('updates remaining time', (done) => {
+    it('updates remaining time', async () => {
       now = '2000-01-01T00:00:01Z';
       jest.advanceTimersByTime(1000);
 
-      Vue.nextTick()
-        .then(() => {
-          expect(vm.$el.textContent).toContain('01:02:02');
-          done();
-        })
-        .catch(done.fail);
+      await nextTick();
+      expect(vm.$el.textContent).toContain('01:02:02');
     });
   });
 
   describe('when there is no time remaining', () => {
-    beforeEach((done) => {
+    beforeEach(async () => {
       vm = mountComponent(Component, {
         endDateString: '1900-01-01T00:00:00Z',
       });
 
-      Vue.nextTick().then(done).catch(done.fail);
+      await nextTick();
     });
 
     it('displays 00:00:00', () => {

spec/frontend/vue_shared/components/markdown/suggestions_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import SuggestionsComponent from '~/vue_shared/components/markdown/suggestions.vue';
 
 const MOCK_DATA = {
@@ -51,7 +51,7 @@ describe('Suggestion component', () => {
   let vm;
   let diffTable;
 
-  beforeEach((done) => {
+  beforeEach(async () => {
     const Component = Vue.extend(SuggestionsComponent);
 
     vm = new Component({
@@ -62,7 +62,7 @@ describe('Suggestion component', () => {
 
     jest.spyOn(vm, 'renderSuggestions').mockImplementation(() => {});
     vm.renderSuggestions();
-    Vue.nextTick(done);
+    await nextTick();
   });
 
   describe('mounted', () => {

spec/frontend/vue_shared/components/resizable_chart/resizable_chart_container_spec.js

 import { mount } from '@vue/test-utils';
 import $ from 'jquery';
-import Vue from 'vue';
+import { nextTick } from 'vue';
 import ResizableChartContainer from '~/vue_shared/components/resizable_chart/resizable_chart_container.vue';
 
 jest.mock('~/lib/utils/common_utils', () => ({
@@ -35,7 +35,7 @@ describe('Resizable Chart Container', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('updates the slot width and height props', () => {
+  it('updates the slot width and height props', async () => {
     const width = 1920;
     const height = 1080;
 
@@ -44,13 +44,12 @@ describe('Resizable Chart Container', () => {
 
     $(document).trigger('content.resize');
 
-    return Vue.nextTick().then(() => {
-      const widthNode = wrapper.find('.slot > .width');
-      const heightNode = wrapper.find('.slot > .height');
+    await nextTick();
+    const widthNode = wrapper.find('.slot > .width');
+    const heightNode = wrapper.find('.slot > .height');
 
-      expect(parseInt(widthNode.text(), 10)).toEqual(width);
-      expect(parseInt(heightNode.text(), 10)).toEqual(height);
-    });
+    expect(parseInt(widthNode.text(), 10)).toEqual(width);
+    expect(parseInt(heightNode.text(), 10)).toEqual(height);
   });
 
   it('calls onResize on manual resize', () => {