Refactor nextTick to use direct import from Vue package

RFC: https://gitlab.com/gitlab-org/frontend/rfcs/-/issues/47

spec/frontend/vue_mr_widget/components/mr_collapsible_extension_spec.js

 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import MrCollapsibleSection from '~/vue_merge_request_widget/components/mr_collapsible_extension.vue';
 
 describe('Merge Request Collapsible Extension', () => {
@@ -46,9 +47,9 @@ describe('Merge Request Collapsible Extension', () => {
     });
 
     describe('onClick', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         wrapper.find('button').trigger('click');
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('rendes the provided slot', () => {

spec/frontend/vue_mr_widget/components/mr_widget_author_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import MrWidgetAuthor from '~/vue_merge_request_widget/components/mr_widget_author.vue';
 
 window.gl = window.gl || {};
@@ -50,7 +51,7 @@ describe('MrWidgetAuthor', () => {
       },
     });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.find('img').attributes('src')).toBe('no_avatar.png');
   });

spec/frontend/vue_mr_widget/components/mr_widget_expandable_section_spec.js

 import { GlButton, GlCollapse, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import MrCollapsibleSection from '~/vue_merge_request_widget/components/mr_widget_expandable_section.vue';
 
 describe('MrWidgetExpanableSection', () => {
@@ -43,9 +44,9 @@ describe('MrWidgetExpanableSection', () => {
   });
 
   describe('when collapse section is open', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       findButton().vm.$emit('click');
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders button with collapse text', () => {

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

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import CommitEdit from '~/vue_merge_request_widget/components/states/commit_edit.vue';
 
 const testCommitMessage = 'Test commit message';
@@ -46,18 +47,17 @@ describe('Commits edit component', () => {
       expect(findTextarea().element.value).toBe(testCommitMessage);
     });
 
-    it('emits an input event and receives changed value', () => {
+    it('emits an input event and receives changed value', async () => {
       const changedCommitMessage = 'Changed commit message';
 
       findTextarea().element.value = changedCommitMessage;
       findTextarea().trigger('input');
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted().input[0]).toEqual([changedCommitMessage]);
       expect(findTextarea().element.value).toBe(changedCommitMessage);
     });
   });
-  });
 
   describe('when slots are present', () => {
     beforeEach(() => {

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

 import { GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import CommitMessageDropdown from '~/vue_merge_request_widget/components/states/commit_message_dropdown.vue';
 
 const commits = [
@@ -51,11 +52,10 @@ describe('Commits message dropdown component', () => {
     expect(findFirstDropdownElement().text()).toContain('Commit 1');
   });
 
-  it('should emit a commit title on selecting commit', () => {
+  it('should emit a commit title on selecting commit', async () => {
     findFirstDropdownElement().vm.$emit('click');
 
-    return wrapper.vm.$nextTick().then(() => {
+    await nextTick();
     expect(wrapper.emitted().input[0]).toEqual(['Update test.txt']);
   });
-  });
 });

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

 import { mount } from '@vue/test-utils';
 import { GlSprintf } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import CommitsHeader from '~/vue_merge_request_widget/components/states/commits_header.vue';
 
 describe('Commits header component', () => {
@@ -58,16 +59,15 @@ describe('Commits header component', () => {
       expect(findCommitToggle().attributes('aria-label')).toBe('Expand');
     });
 
-    it('has a chevron-right icon', () => {
+    it('has a chevron-right icon', async () => {
       createComponent();
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ expanded: false });
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(findCommitToggle().props('icon')).toBe('chevron-right');
     });
-    });
 
     describe('when squash is disabled', () => {
       beforeEach(() => {
@@ -118,25 +118,19 @@ describe('Commits header component', () => {
       wrapper.setData({ expanded: true });
     });
 
-    it('toggle has aria-label equal to collapse', (done) => {
-      wrapper.vm.$nextTick(() => {
+    it('toggle has aria-label equal to collapse', async () => {
+      await nextTick();
       expect(findCommitToggle().attributes('aria-label')).toBe('Collapse');
-        done();
-      });
     });
 
-    it('has a chevron-down icon', (done) => {
-      wrapper.vm.$nextTick(() => {
+    it('has a chevron-down icon', async () => {
+      await nextTick();
       expect(findCommitToggle().props('icon')).toBe('chevron-down');
-        done();
-      });
     });
 
-    it('has a collapse text', (done) => {
-      wrapper.vm.$nextTick(() => {
+    it('has a collapse text', async () => {
+      await nextTick();
       expect(findHeaderWrapper().text()).toBe('Collapse');
-        done();
-      });
     });
   });
 });

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

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import { removeBreakLine } from 'helpers/text_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -20,7 +21,7 @@ describe('MRWidgetConflicts', () => {
   const resolveConflictsBtnText = 'Resolve conflicts';
   const mergeLocallyBtnText = 'Merge locally';
 
-  function createComponent(propsData = {}) {
+  async function createComponent(propsData = {}) {
     wrapper = extendedWrapper(
       shallowMount(ConflictsComponent, {
         propsData,
@@ -55,7 +56,7 @@ describe('MRWidgetConflicts', () => {
       });
     }
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   }
 
   afterEach(() => {

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

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import MissingBranchComponent from '~/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue';
 
 let wrapper;
 
-function factory(sourceBranchRemoved, mergeRequestWidgetGraphql) {
+async function factory(sourceBranchRemoved, mergeRequestWidgetGraphql) {
   wrapper = shallowMount(MissingBranchComponent, {
     propsData: {
       mr: { sourceBranchRemoved },
@@ -19,7 +20,7 @@ function factory(sourceBranchRemoved, mergeRequestWidgetGraphql) {
     wrapper.setData({ state: { sourceBranchExists: !sourceBranchRemoved } });
   }
 
-  return wrapper.vm.$nextTick();
+  await nextTick();
 }
 
 describe('MRWidgetMissingBranch', () => {

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

@@ -710,7 +710,7 @@ describe('ReadyToMerge', () => {
             commitsWithoutMergeCommits: {},
           },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findCommitEditElements().length).toBe(2);
       });

spec/frontend/vue_mr_widget/components/terraform/mr_widget_terraform_container_spec.js

 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import axios from '~/lib/utils/axios_utils';
 import Poll from '~/lib/utils/poll';
 import MrWidgetExpanableSection from '~/vue_merge_request_widget/components/mr_widget_expandable_section.vue';
@@ -39,15 +40,14 @@ describe('MrWidgetTerraformConainer', () => {
   });
 
   describe('when data is loading', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       mockPollingApi(200, plans, {});
 
-      return mountWrapper().then(() => {
+      await mountWrapper();
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ loading: true });
-        return wrapper.vm.$nextTick();
-      });
+      await nextTick();
     });
 
     it('diplays loading skeleton', () => {

spec/frontend/vue_shared/alert_details/alert_details_spec.js

@@ -2,6 +2,7 @@ import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { joinPaths } from '~/lib/utils/url_utility';
@@ -216,18 +217,17 @@ describe('AlertDetails', () => {
         expect(findCreateIncidentBtn().exists()).toBe(false);
       });
 
-      it('should display "Create incident" button when incident doesn\'t exist yet', () => {
+      it('should display "Create incident" button when incident doesn\'t exist yet', async () => {
         const issue = null;
         mountComponent({
           mountMethod: mount,
           data: { alert: { ...mockAlert, issue } },
         });
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         expect(findViewIncidentBtn().exists()).toBe(false);
         expect(findCreateIncidentBtn().exists()).toBe(true);
       });
-      });
 
       it('calls `$apollo.mutate` with `createIssueQuery`', () => {
         const issueIid = '10';

spec/frontend/vue_shared/alert_details/alert_management_sidebar_todo_spec.js

 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql';
 import SidebarTodo from '~/vue_shared/alert_details/components/sidebar/sidebar_todo.vue';
 import createAlertTodoMutation from '~/vue_shared/alert_details/graphql/mutations/alert_todo_create.mutation.graphql';
@@ -57,7 +58,7 @@ describe('Alert Details Sidebar To Do', () => {
       });
 
       it('renders a button for adding a To-Do', async () => {
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findToDoButton().text()).toBe('Add a to do');
       });
@@ -66,7 +67,7 @@ describe('Alert Details Sidebar To Do', () => {
         jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
 
         findToDoButton().trigger('click');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
           mutation: createAlertTodoMutation,
@@ -88,7 +89,7 @@ describe('Alert Details Sidebar To Do', () => {
       });
 
       it('renders a Mark As Done button when todo is present', async () => {
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findToDoButton().text()).toBe('Mark as done');
       });
@@ -97,7 +98,7 @@ describe('Alert Details Sidebar To Do', () => {
         jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(mockUpdatedMutationResult);
 
         findToDoButton().trigger('click');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
           mutation: todoMarkDoneMutation,

spec/frontend/vue_shared/alert_details/alert_metrics_spec.js

 import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
 import AlertMetrics from '~/vue_shared/alert_details/components/alert_metrics.vue';
@@ -53,7 +54,7 @@ describe('Alert Metrics', () => {
       mountComponent({ props: { dashboardUrl: 'metrics.url' } });
 
       await waitForPromises();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findEmptyState().exists()).toBe(false);
       expect(findChart().exists()).toBe(true);

spec/frontend/vue_shared/alert_details/alert_status_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import updateAlertStatusMutation from '~/graphql_shared//mutations/alert_status_update.mutation.graphql';
@@ -121,7 +122,7 @@ describe('AlertManagementStatus', () => {
 
       it('emits an error when triggered a second time', async () => {
         await selectFirstStatusOption();
-        await wrapper.vm.$nextTick();
+        await nextTick();
         await selectFirstStatusOption();
         // Should emit two errors [0,1]
         expect(wrapper.emitted('alert-error').length > 1).toBe(true);

spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_assignees_spec.js

 import { GlDropdownItem } from '@gitlab/ui';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import SidebarAssignee from '~/vue_shared/alert_details/components/sidebar/sidebar_assignee.vue';
 import SidebarAssignees from '~/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue';
@@ -112,7 +113,7 @@ describe('Alert Details Sidebar Assignees', () => {
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ isDropdownSearching: false });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findDropdown().text()).toBe('Unassigned');
     });
 
@@ -126,7 +127,7 @@ describe('Alert Details Sidebar Assignees', () => {
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ isDropdownSearching: false });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       wrapper.find(SidebarAssignee).vm.$emit('update-alert-assignees', 'root');
 
       expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
@@ -139,7 +140,7 @@ describe('Alert Details Sidebar Assignees', () => {
       });
     });
 
-    it('emits an error when request contains error messages', () => {
+    it('emits an error when request contains error messages', async () => {
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ isDropdownSearching: false });
@@ -153,16 +154,12 @@ describe('Alert Details Sidebar Assignees', () => {
       };
 
       jest.spyOn(wrapper.vm.$apollo, 'mutate').mockResolvedValue(errorMutationResult);
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
+
+      await nextTick();
       const SideBarAssigneeItem = wrapper.findAll(SidebarAssignee).at(0);
-          SideBarAssigneeItem.vm.$emit('update-alert-assignees');
-        })
-        .then(() => {
+      await SideBarAssigneeItem.vm.$emit('update-alert-assignees');
       expect(wrapper.emitted('alert-error')).toBeDefined();
     });
-    });
 
     it('stops updating and cancels loading when the request fails', () => {
       jest.spyOn(wrapper.vm.$apollo, 'mutate').mockReturnValue(Promise.reject(new Error()));

spec/frontend/vue_shared/alert_details/sidebar/alert_sidebar_status_spec.js

 import { GlDropdown, GlLoadingIcon } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import AlertStatus from '~/vue_shared/alert_details/components/alert_status.vue';
 import AlertSidebarStatus from '~/vue_shared/alert_details/components/sidebar/sidebar_status.vue';
@@ -75,7 +76,7 @@ describe('Alert Details Sidebar Status', () => {
           loading: false,
         });
         findAlertStatus().vm.$emit('handle-updating', true);
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(findStatusLoadingIcon().exists()).toBe(true);
       });
 

spec/frontend/vue_shared/components/blob_viewers/simple_viewer_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { HIGHLIGHT_CLASS_NAME } from '~/vue_shared/components/blob_viewers/constants';
 import SimpleViewer from '~/vue_shared/components/blob_viewers/simple_viewer.vue';
 
@@ -69,7 +70,7 @@ describe('Blob Simple Viewer component', () => {
       expect(linetoBeHighlighted.classes()).toContain(HIGHLIGHT_CLASS_NAME);
     });
 
-    it('switches highlighting when another line is selected', () => {
+    it('switches highlighting when another line is selected', async () => {
       const currentlyHighlighted = wrapper.find('#LC2');
       const hash = '#LC3';
       const linetoBeHighlighted = wrapper.find(hash);
@@ -78,11 +79,10 @@ describe('Blob Simple Viewer component', () => {
 
       wrapper.vm.scrollToLine(hash);
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(wrapper.vm.highlightedLine).toBe(linetoBeHighlighted.element);
       expect(currentlyHighlighted.classes()).not.toContain(HIGHLIGHT_CLASS_NAME);
       expect(linetoBeHighlighted.classes()).toContain(HIGHLIGHT_CLASS_NAME);
     });
   });
-  });
 });

spec/frontend/vue_shared/components/chronic_duration_input_spec.js

 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import ChronicDurationInput from '~/vue_shared/components/chronic_duration_input.vue';
 
 const MOCK_VALUE = 2 * 3600 + 20 * 60;
@@ -48,7 +49,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
   describe('change', () => {
     const createAndDispatch = async (initialValue, humanReadableInput) => {
       createComponent({ value: initialValue });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       textElement.value = humanReadableInput;
       textElement.dispatchEvent(new Event('input'));
     };
@@ -118,7 +119,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
       it('emits valid with user input', async () => {
         textElement.value = '1m10s';
         textElement.dispatchEvent(new Event('input'));
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.emitted('valid')).toEqual([
           [{ valid: true, feedback: '' }],
@@ -133,7 +134,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
 
         textElement.value = '';
         textElement.dispatchEvent(new Event('input'));
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.emitted('valid')).toEqual([
           [{ valid: true, feedback: '' }],
@@ -151,7 +152,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
       it('emits invalid with user input', async () => {
         textElement.value = 'gobbledygook';
         textElement.dispatchEvent(new Event('input'));
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.emitted('valid')).toEqual([
           [{ valid: true, feedback: '' }],
@@ -186,7 +187,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
 
       it('emits valid with updated value', async () => {
         wrapper.setProps({ value: MOCK_VALUE });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.emitted('valid')).toEqual([
           [{ valid: null, feedback: '' }],
@@ -210,7 +211,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
         it('emits valid when input is integer', async () => {
           textElement.value = '2hr20min';
           textElement.dispatchEvent(new Event('input'));
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.emitted('change')).toEqual([[MOCK_VALUE]]);
           expect(wrapper.emitted('valid')).toEqual([
@@ -228,7 +229,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
         it('emits valid when input is decimal', async () => {
           textElement.value = '1.5s';
           textElement.dispatchEvent(new Event('input'));
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.emitted('change')).toEqual([[1.5]]);
           expect(wrapper.emitted('valid')).toEqual([
@@ -252,7 +253,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
         it('emits valid when input is integer', async () => {
           textElement.value = '2hr20min';
           textElement.dispatchEvent(new Event('input'));
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.emitted('change')).toEqual([[MOCK_VALUE]]);
           expect(wrapper.emitted('valid')).toEqual([
@@ -270,7 +271,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
         it('emits invalid when input is decimal', async () => {
           textElement.value = '1.5s';
           textElement.dispatchEvent(new Event('input'));
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.emitted('change')).toBeUndefined();
           expect(wrapper.emitted('valid')).toEqual([
@@ -318,7 +319,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
         wrapper.setData({ value: MOCK_VALUE });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(textElement.value).toBe('2 hrs 20 mins');
         expect(hiddenElement.value).toBe(MOCK_VALUE.toString());
@@ -329,7 +330,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
       it('passes user input to parent via v-model', async () => {
         textElement.value = '2hr20min';
         textElement.dispatchEvent(new Event('input'));
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.findComponent(ChronicDurationInput).props('value')).toBe(MOCK_VALUE);
         expect(textElement.value).toBe('2hr20min');
@@ -377,7 +378,7 @@ describe('vue_shared/components/chronic_duration_input', () => {
     it('creates form data with user-specified value', async () => {
       textElement.value = '1m10s';
       textElement.dispatchEvent(new Event('input'));
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const formData = new FormData(wrapper.find('[data-testid=myForm]').element);
       const iter = formData.entries();

spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js

 import { mount } from '@vue/test-utils';
 import timezoneMock from 'timezone-mock';
+import { nextTick } from 'vue';
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 import {
   defaultTimeRanges,
@@ -29,27 +30,24 @@ describe('DateTimePicker', () => {
     wrapper.destroy();
   });
 
-  it('renders dropdown toggle button with selected text', () => {
+  it('renders dropdown toggle button with selected text', async () => {
     createComponent();
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     expect(dropdownToggle().text()).toBe(defaultTimeRange.label);
   });
-  });
 
-  it('renders dropdown toggle button with selected text and utc label', () => {
+  it('renders dropdown toggle button with selected text and utc label', async () => {
     createComponent({ utc: true });
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     expect(dropdownToggle().text()).toContain(defaultTimeRange.label);
     expect(dropdownToggle().text()).toContain('UTC');
   });
-  });
 
-  it('renders dropdown with 2 custom time range inputs', () => {
+  it('renders dropdown with 2 custom time range inputs', async () => {
     createComponent();
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     expect(wrapper.findAll('input').length).toBe(2);
   });
-  });
 
   describe('renders label with h/m/s truncated if possible', () => {
     [
@@ -80,34 +78,31 @@ describe('DateTimePicker', () => {
         label: '2019-10-10 00:00:01 to 2019-10-10 00:00:01 UTC',
       },
     ].forEach(({ start, end, utc, label }) => {
-      it(`for start ${start}, end ${end}, and utc ${utc}, label is ${label}`, () => {
+      it(`for start ${start}, end ${end}, and utc ${utc}, label is ${label}`, async () => {
         createComponent({
           value: { start, end },
           utc,
         });
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(dropdownToggle().text()).toBe(label);
       });
     });
   });
-  });
 
-  it(`renders dropdown with ${optionsCount} (default) items in quick range`, () => {
+  it(`renders dropdown with ${optionsCount} (default) items in quick range`, async () => {
     createComponent();
     dropdownToggle().trigger('click');
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     expect(findQuickRangeItems().length).toBe(optionsCount);
   });
-  });
 
-  it('renders dropdown with a default quick range item selected', () => {
+  it('renders dropdown with a default quick range item selected', async () => {
     createComponent();
     dropdownToggle().trigger('click');
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     expect(wrapper.find('.dropdown-item.active').exists()).toBe(true);
     expect(wrapper.find('.dropdown-item.active').text()).toBe(defaultTimeRange.label);
   });
-  });
 
   it('renders a disabled apply button on wrong input', () => {
     createComponent({
@@ -118,48 +113,40 @@ describe('DateTimePicker', () => {
   });
 
   describe('user input', () => {
-    const fillInputAndBlur = (input, val) => {
+    const fillInputAndBlur = async (input, val) => {
       wrapper.find(input).setValue(val);
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       wrapper.find(input).trigger('blur');
-        return wrapper.vm.$nextTick();
-      });
+      await nextTick();
     };
 
-    beforeEach(() => {
+    beforeEach(async () => {
       createComponent();
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
-    it('displays inline error message if custom time range inputs are invalid', () => {
-      return fillInputAndBlur('#custom-time-from', '2019-10-01abc')
-        .then(() => fillInputAndBlur('#custom-time-to', '2019-10-10abc'))
-        .then(() => {
+    it('displays inline error message if custom time range inputs are invalid', async () => {
+      await fillInputAndBlur('#custom-time-from', '2019-10-01abc');
+      await fillInputAndBlur('#custom-time-to', '2019-10-10abc');
       expect(wrapper.findAll('.invalid-feedback').length).toBe(2);
     });
-    });
 
-    it('keeps apply button disabled with invalid custom time range inputs', () => {
-      return fillInputAndBlur('#custom-time-from', '2019-10-01abc')
-        .then(() => fillInputAndBlur('#custom-time-to', '2019-09-19'))
-        .then(() => {
+    it('keeps apply button disabled with invalid custom time range inputs', async () => {
+      await fillInputAndBlur('#custom-time-from', '2019-10-01abc');
+      await fillInputAndBlur('#custom-time-to', '2019-09-19');
       expect(applyButtonElement().getAttribute('disabled')).toBe('disabled');
     });
-    });
 
-    it('enables apply button with valid custom time range inputs', () => {
-      return fillInputAndBlur('#custom-time-from', '2019-10-01')
-        .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19'))
-        .then(() => {
+    it('enables apply button with valid custom time range inputs', async () => {
+      await fillInputAndBlur('#custom-time-from', '2019-10-01');
+      await fillInputAndBlur('#custom-time-to', '2019-10-19');
       expect(applyButtonElement().getAttribute('disabled')).toBeNull();
     });
-    });
 
     describe('when "apply" is clicked', () => {
-      it('emits iso dates', () => {
-        return fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00')
-          .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19 00:00:00'))
-          .then(() => {
+      it('emits iso dates', async () => {
+        await fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00');
+        await fillInputAndBlur('#custom-time-to', '2019-10-19 00:00:00');
         applyButtonElement().click();
 
         expect(wrapper.emitted().input).toHaveLength(1);
@@ -170,12 +157,10 @@ describe('DateTimePicker', () => {
           },
         ]);
       });
-      });
 
-      it('emits iso dates, for dates without time of day', () => {
-        return fillInputAndBlur('#custom-time-from', '2019-10-01')
-          .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19'))
-          .then(() => {
+      it('emits iso dates, for dates without time of day', async () => {
+        await fillInputAndBlur('#custom-time-from', '2019-10-01');
+        await fillInputAndBlur('#custom-time-to', '2019-10-19');
         applyButtonElement().click();
 
         expect(wrapper.emitted().input).toHaveLength(1);
@@ -186,7 +171,6 @@ describe('DateTimePicker', () => {
           },
         ]);
       });
-      });
 
       describe('when timezone is different', () => {
         beforeAll(() => {
@@ -196,10 +180,9 @@ describe('DateTimePicker', () => {
           timezoneMock.unregister();
         });
 
-        it('emits iso dates', () => {
-          return fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00')
-            .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00'))
-            .then(() => {
+        it('emits iso dates', async () => {
+          await fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00');
+          await fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00');
           applyButtonElement().click();
 
           expect(wrapper.emitted().input).toHaveLength(1);
@@ -210,15 +193,12 @@ describe('DateTimePicker', () => {
             },
           ]);
         });
-        });
 
-        it('emits iso dates with utc format', () => {
+        it('emits iso dates with utc format', async () => {
           wrapper.setProps({ utc: true });
-          return wrapper.vm
-            .$nextTick()
-            .then(() => fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00'))
-            .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00'))
-            .then(() => {
+          await nextTick();
+          await fillInputAndBlur('#custom-time-from', '2019-10-01 00:00:00');
+          await fillInputAndBlur('#custom-time-to', '2019-10-19 12:00:00');
           applyButtonElement().click();
 
           expect(wrapper.emitted().input).toHaveLength(1);
@@ -231,18 +211,16 @@ describe('DateTimePicker', () => {
         });
       });
     });
-    });
 
-    it('unchecks quick range when text is input is clicked', () => {
+    it('unchecks quick range when text is input is clicked', async () => {
       const findActiveItems = () =>
         findQuickRangeItems().filter((w) => w.classes().includes('active'));
 
       expect(findActiveItems().length).toBe(1);
 
-      return fillInputAndBlur('#custom-time-from', '2019-10-01').then(() => {
+      await fillInputAndBlur('#custom-time-from', '2019-10-01');
       expect(findActiveItems().length).toBe(0);
     });
-    });
 
     it('emits dates in an object when a  is clicked', () => {
       findQuickRangeItems()
@@ -257,18 +235,16 @@ describe('DateTimePicker', () => {
       });
     });
 
-    it('hides the popover with cancel button', () => {
+    it('hides the popover with cancel button', async () => {
       dropdownToggle().trigger('click');
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       cancelButton().trigger('click');
 
-        return wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(dropdownMenu().classes('show')).toBe(false);
     });
   });
-    });
-  });
 
   describe('when using non-default time windows', () => {
     const MOCK_NOW = Date.UTC(2020, 0, 23, 20);
@@ -293,7 +269,7 @@ describe('DateTimePicker', () => {
       jest.spyOn(Date, 'now').mockImplementation(() => MOCK_NOW);
     });
 
-    it('renders dropdown with a label in the quick range', () => {
+    it('renders dropdown with a label in the quick range', async () => {
       createComponent({
         value: {
           duration: { seconds: 60 * 5 },
@@ -301,12 +277,11 @@ describe('DateTimePicker', () => {
         options: otherTimeRanges,
       });
       dropdownToggle().trigger('click');
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(dropdownToggle().text()).toBe('5 minutes');
     });
-    });
 
-    it('renders dropdown with a label in the quick range and utc label', () => {
+    it('renders dropdown with a label in the quick range and utc label', async () => {
       createComponent({
         value: {
           duration: { seconds: 60 * 5 },
@@ -315,12 +290,11 @@ describe('DateTimePicker', () => {
         options: otherTimeRanges,
       });
       dropdownToggle().trigger('click');
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(dropdownToggle().text()).toBe('5 minutes UTC');
     });
-    });
 
-    it('renders dropdown with quick range items', () => {
+    it('renders dropdown with quick range items', async () => {
       createComponent({
         value: {
           duration: { seconds: 60 * 2 },
@@ -328,7 +302,7 @@ describe('DateTimePicker', () => {
         options: otherTimeRanges,
       });
       dropdownToggle().trigger('click');
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const items = findQuickRangeItems();
 
       expect(items.length).toBe(Object.keys(otherTimeRanges).length);
@@ -341,18 +315,16 @@ describe('DateTimePicker', () => {
       expect(items.at(2).text()).toBe('5 minutes');
       expect(items.at(2).classes()).not.toContain('active');
     });
-    });
 
-    it('renders dropdown with a label not in the quick range', () => {
+    it('renders dropdown with a label not in the quick range', async () => {
       createComponent({
         value: {
           duration: { seconds: 60 * 4 },
         },
       });
       dropdownToggle().trigger('click');
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(dropdownToggle().text()).toBe('2020-01-23 19:56:00 to 2020-01-23 20:00:00');
     });
   });
-  });
 });

spec/frontend/vue_shared/components/deployment_instance/deployment_instance_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DeployBoardInstance from '~/vue_shared/components/deployment_instance.vue';
 import { folder } from './mock_data';
 
@@ -28,17 +29,15 @@ describe('Deploy Board Instance', () => {
       expect(wrapper.attributes('title')).toEqual('This is a pod');
     });
 
-    it('should render a div without tooltip data', (done) => {
+    it('should render a div without tooltip data', async () => {
       wrapper = createComponent({
         status: 'deploying',
         tooltipText: '',
       });
 
-      wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(wrapper.classes('deployment-instance-deploying')).toBe(true);
       expect(wrapper.attributes('title')).toEqual('');
-        done();
-      });
     });
 
     it('should have a log path computed with a pod name as a parameter', () => {
@@ -58,15 +57,13 @@ describe('Deploy Board Instance', () => {
       wrapper.destroy();
     });
 
-    it('should render a div with canary class when stable prop is provided as false', (done) => {
+    it('should render a div with canary class when stable prop is provided as false', async () => {
       wrapper = createComponent({
         stable: false,
       });
 
-      wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(wrapper.classes('deployment-instance-canary')).toBe(true);
-        done();
-      });
     });
   });
 
@@ -75,17 +72,15 @@ describe('Deploy Board Instance', () => {
       wrapper.destroy();
     });
 
-    it('should not be a link without a logsPath prop', (done) => {
+    it('should not be a link without a logsPath prop', async () => {
       wrapper = createComponent({
         stable: false,
         logsPath: '',
       });
 
-      wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(wrapper.vm.computedLogPath).toBeNull();
       expect(wrapper.vm.isLink).toBeFalsy();
-        done();
-      });
     });
 
     it('should render a link without href if path is not passed', () => {

spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import {
   TRANSITION_LOAD_START,
@@ -126,17 +126,16 @@ describe('Renamed Diff Viewer', () => {
       store = null;
     });
 
-    it('calls the switchToFullDiffFromRenamedFile action when the method is triggered', () => {
+    it('calls the switchToFullDiffFromRenamedFile action when the method is triggered', async () => {
       store.dispatch.mockResolvedValue();
 
       wrapper.vm.switchToFull();
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(store.dispatch).toHaveBeenCalledWith('diffs/switchToFullDiffFromRenamedFile', {
         diffFile,
       });
     });
-    });
 
     it.each`
       after            | resolvePromise         | resolution
@@ -144,7 +143,7 @@ describe('Renamed Diff Viewer', () => {
       ${STATE_ERRORED} | ${'mockRejectedValue'} | ${'rejected'}
     `(
       'moves through the correct states during a $resolution request',
-      ({ after, resolvePromise }) => {
+      async ({ after, resolvePromise }) => {
         store.dispatch[resolvePromise]();
 
         expect(wrapper.vm.state).toEqual(STATE_IDLING);
@@ -153,16 +152,9 @@ describe('Renamed Diff Viewer', () => {
 
         expect(wrapper.vm.state).toEqual(STATE_LOADING);
 
-        return (
-          wrapper.vm
-            // This tick is needed for when the action (promise) finishes
-            .$nextTick()
-            // This tick waits for the state change in the promise .then/.catch to bubble into the component
-            .then(() => wrapper.vm.$nextTick())
-            .then(() => {
+        await nextTick(); // This tick is needed for when the action (promise) finishes
+        await nextTick(); // This tick waits for the state change in the promise .then/.catch to bubble into the component
         expect(wrapper.vm.state).toEqual(after);
-            })
-        );
       },
     );
   });

spec/frontend/vue_shared/components/dismissible_feedback_alert_spec.js

 import { GlAlert, GlSprintf } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import Component from '~/vue_shared/components/dismissible_feedback_alert.vue';
 
@@ -64,7 +65,7 @@ describe('Dismissible Feedback Alert', () => {
       it('should not show the alert once dismissed', async () => {
         localStorage.setItem(STORAGE_DISMISSAL_KEY, 'true');
         createFullComponent();
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findAlert().exists()).toBe(false);
       });

spec/frontend/vue_shared/components/dropdown/dropdown_search_input_spec.js

 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DropdownSearchInputComponent from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
 
 describe('DropdownSearchInputComponent', () => {
@@ -36,16 +37,15 @@ describe('DropdownSearchInputComponent', () => {
       expect(findInputEl().attributes('placeholder')).toBe(defaultProps.placeholderText);
     });
 
-    it('focuses input element when focused property equals true', () => {
+    it('focuses input element when focused property equals true', async () => {
       const inputEl = findInputEl().element;
 
       jest.spyOn(inputEl, 'focus');
 
       wrapper.setProps({ focused: true });
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(inputEl.focus).toHaveBeenCalled();
     });
   });
-  });
 });

spec/frontend/vue_shared/components/dropdown/dropdown_widget_spec.js

 import { GlDropdown, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import DropdownWidget from '~/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue';
 
 describe('DropdownWidget component', () => {
@@ -53,7 +54,7 @@ describe('DropdownWidget component', () => {
   describe('when dropdown is open', () => {
     beforeEach(async () => {
       findDropdown().vm.$emit('show');
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('emits search event when typing in search box', () => {
@@ -69,7 +70,7 @@ describe('DropdownWidget component', () => {
 
     it('emits set-option event when clicking on an option', async () => {
       wrapper.findAll('[data-testid="unselected-option"]').at(1).trigger('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted('set-option')).toEqual([[wrapper.props().options[1]]]);
     });

spec/frontend/vue_shared/components/dropdown_keyboard_navigation_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DropdownKeyboardNavigation from '~/vue_shared/components/dropdown_keyboard_navigation.vue';
 import { UP_KEY_CODE, DOWN_KEY_CODE, TAB_KEY_CODE } from '~/lib/utils/keycodes';
 
@@ -53,7 +54,7 @@ describe('DropdownKeyboardNavigation', () => {
 
     it('should $emit @change with the default index when max changes', async () => {
       wrapper.setProps({ max: 20 });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       // The first @change`call happens on created() so we test for the second [1]
       expect(wrapper.emitted('change')[1]).toStrictEqual([MOCK_DEFAULT_INDEX]);
     });

spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js

@@ -8,6 +8,7 @@ import {
 } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import RecentSearchesService from '~/filtered_search/services/recent_searches_service';
 import RecentSearchesStore from '~/filtered_search/stores/recent_searches_store';
 import { SortDirection } from '~/vue_shared/components/filtered_search_bar/constants';
@@ -172,7 +173,7 @@ describe('FilteredSearchBarRoot', () => {
           recentSearches: [{ foo: 'bar' }, 'foo'],
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.filteredRecentSearches).toHaveLength(1);
         expect(wrapper.vm.filteredRecentSearches[0]).toEqual({ foo: 'bar' });
@@ -188,7 +189,7 @@ describe('FilteredSearchBarRoot', () => {
           ],
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.filteredRecentSearches).toHaveLength(2);
         expect(uniqueTokens).toHaveBeenCalled();
@@ -199,7 +200,7 @@ describe('FilteredSearchBarRoot', () => {
           recentSearchesStorageKey: '',
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.filteredRecentSearches).not.toBeDefined();
       });
@@ -208,7 +209,7 @@ describe('FilteredSearchBarRoot', () => {
 
   describe('watchers', () => {
     describe('filterValue', () => {
-      it('emits component event `onFilter` with empty array and false when filter was never selected', () => {
+      it('emits component event `onFilter` with empty array and false when filter was never selected', async () => {
         wrapper = createComponent({ initialFilterValue: [tokenValueEmpty] });
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -217,12 +218,11 @@ describe('FilteredSearchBarRoot', () => {
           filterValue: [tokenValueEmpty],
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.emitted('onFilter')[0]).toEqual([[], false]);
       });
-      });
 
-      it('emits component event `onFilter` with empty array and true when initially selected filter value was cleared', () => {
+      it('emits component event `onFilter` with empty array and true when initially selected filter value was cleared', async () => {
         wrapper = createComponent({ initialFilterValue: [tokenValueLabel] });
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -231,12 +231,11 @@ describe('FilteredSearchBarRoot', () => {
           filterValue: [tokenValueEmpty],
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.emitted('onFilter')[0]).toEqual([[], true]);
       });
     });
   });
-  });
 
   describe('methods', () => {
     describe('setupRecentSearch', () => {
@@ -336,7 +335,7 @@ describe('FilteredSearchBarRoot', () => {
           filterValue: mockFilters,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('calls `uniqueTokens` on `filterValue` prop to remove duplicates', () => {
@@ -395,7 +394,7 @@ describe('FilteredSearchBarRoot', () => {
   });
 
   describe('template', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({
@@ -404,7 +403,7 @@ describe('FilteredSearchBarRoot', () => {
         recentSearches: mockHistoryItems,
       });
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders gl-filtered-search component', () => {
@@ -439,7 +438,7 @@ describe('FilteredSearchBarRoot', () => {
       const wrapperFullMount = createComponent({ sortOptions: mockSortOptions, shallow: false });
       wrapperFullMount.vm.recentSearchesStore.addRecentSearch(mockHistoryItems[0]);
 
-      await wrapperFullMount.vm.$nextTick();
+      await nextTick();
 
       const searchHistoryItemsEl = wrapperFullMount.findAll(
         '.gl-search-box-by-click-menu .gl-search-box-by-click-history-item',
@@ -462,7 +461,7 @@ describe('FilteredSearchBarRoot', () => {
 
         wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
 
-        await wrapperFullMount.vm.$nextTick();
+        await nextTick();
 
         expect(wrapperFullMount.find(GlDropdownItem).text()).toBe('Membership := Direct');
 
@@ -480,7 +479,7 @@ describe('FilteredSearchBarRoot', () => {
 
         wrapperFullMount.vm.recentSearchesStore.addRecentSearch([tokenValueMembership]);
 
-        await wrapperFullMount.vm.$nextTick();
+        await nextTick();
 
         expect(wrapperFullMount.find(GlDropdownItem).text()).toBe('Membership := exclude');
 

spec/frontend/vue_shared/components/filtered_search_bar/tokens/author_token_spec.js

@@ -6,6 +6,7 @@ import {
 } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -167,7 +168,7 @@ describe('AuthorToken', () => {
       const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
     };
 
     it('renders base-token component', () => {
@@ -185,14 +186,14 @@ describe('AuthorToken', () => {
       });
     });
 
-    it('renders token item when value is selected', () => {
+    it('renders token item when value is selected', async () => {
       wrapper = createComponent({
         value: { data: mockAuthors[0].username },
         data: { authors: mockAuthors },
         stubs: { Portal: true },
       });
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
 
       expect(tokenSegments).toHaveLength(3); // Author, =, "Administrator"
@@ -202,7 +203,6 @@ describe('AuthorToken', () => {
       expect(tokenValue.findComponent(GlAvatar).props('src')).toBe(mockAuthors[0].avatar_url);
       expect(tokenValue.text()).toBe(mockAuthors[0].name); // "Administrator"
     });
-    });
 
     it('renders token value with correct avatarUrl from author object', async () => {
       const getAvatarEl = () =>
@@ -220,7 +220,7 @@ describe('AuthorToken', () => {
         stubs: { Portal: true },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(getAvatarEl().props('src')).toBe(mockAuthors[0].avatar_url);
 
@@ -236,7 +236,7 @@ describe('AuthorToken', () => {
         ],
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(getAvatarEl().props('src')).toBe(mockAuthors[0].avatar_url);
     });
@@ -268,7 +268,7 @@ describe('AuthorToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
     });
@@ -323,7 +323,7 @@ describe('AuthorToken', () => {
       it('does not show current user while searching', async () => {
         wrapper.findComponent(BaseToken).vm.handleInput({ data: 'foo' });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.findComponent(GlFilteredSearchSuggestion).exists()).toBe(false);
       });

spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js

 import { GlFilteredSearchToken, GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import {
   mockRegularLabel,
   mockLabels,
@@ -202,7 +203,7 @@ describe('BaseToken', () => {
           jest.useFakeTimers();
 
           findGlFilteredSearchToken().vm.$emit('input', { data: 'foo' });
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           jest.runAllTimers();
 
@@ -221,7 +222,7 @@ describe('BaseToken', () => {
           jest.useFakeTimers();
 
           findGlFilteredSearchToken().vm.$emit('input', { data: 'foo' });
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           jest.runAllTimers();
 

spec/frontend/vue_shared/components/filtered_search_bar/tokens/branch_token_spec.js

@@ -6,6 +6,7 @@ import {
 } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 
 import createFlash from '~/flash';
@@ -115,7 +116,7 @@ describe('BranchToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
     }
 
     beforeEach(async () => {
@@ -127,7 +128,7 @@ describe('BranchToken', () => {
         branches: mockBranches,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders gl-filtered-search-token component', () => {

spec/frontend/vue_shared/components/filtered_search_bar/tokens/emoji_token_spec.js

@@ -6,6 +6,7 @@ import {
 } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -129,7 +130,7 @@ describe('EmojiToken', () => {
         emojis: mockEmojis,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders gl-filtered-search-token component', () => {
@@ -152,7 +153,7 @@ describe('EmojiToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
 
@@ -171,7 +172,7 @@ describe('EmojiToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
       expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
@@ -186,7 +187,7 @@ describe('EmojiToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
 

spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js

@@ -5,6 +5,7 @@ import {
 } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import {
   mockRegularLabel,
@@ -150,7 +151,7 @@ describe('LabelToken', () => {
         labels: mockLabels,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders base-token component', () => {
@@ -182,7 +183,7 @@ describe('LabelToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
 
@@ -201,7 +202,7 @@ describe('LabelToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
       expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);

spec/frontend/vue_shared/components/filtered_search_bar/tokens/milestone_token_spec.js

@@ -6,6 +6,7 @@ import {
 } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -127,7 +128,7 @@ describe('MilestoneToken', () => {
         milestones: mockMilestones,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders gl-filtered-search-token component', () => {
@@ -150,7 +151,7 @@ describe('MilestoneToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
 
@@ -169,7 +170,7 @@ describe('MilestoneToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlFilteredSearchSuggestion).exists()).toBe(false);
       expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
@@ -184,7 +185,7 @@ describe('MilestoneToken', () => {
       const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
       const suggestionsSegment = tokenSegments.at(2);
       suggestionsSegment.vm.$emit('activate');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
 

spec/frontend/vue_shared/components/filtered_search_bar/tokens/release_token_spec.js

 import { GlFilteredSearchToken, GlFilteredSearchTokenSegment } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import ReleaseToken from '~/vue_shared/components/filtered_search_bar/tokens/release_token.vue';
@@ -31,7 +32,7 @@ describe('ReleaseToken', () => {
 
   it('renders release value', async () => {
     wrapper = createComponent({ value: { data: id } });
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
 

spec/frontend/vue_shared/components/local_storage_sync_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 
 describe('Local Storage Sync', () => {
@@ -49,7 +50,7 @@ describe('Local Storage Sync', () => {
 
     it.each('foo', 3, true, ['foo', 'bar'], { foo: 'bar' })(
       'saves updated value to localStorage',
-      (newValue) => {
+      async (newValue) => {
         createComponent({
           props: {
             storageKey,
@@ -59,9 +60,8 @@ describe('Local Storage Sync', () => {
 
         wrapper.setProps({ value: newValue });
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         expect(localStorage.getItem(storageKey)).toBe(String(newValue));
-        });
       },
     );
 
@@ -109,7 +109,7 @@ describe('Local Storage Sync', () => {
       expect(localStorage.getItem(storageKey)).toBe(savedValue);
     });
 
-    it('updating the value updates localStorage', () => {
+    it('updating the value updates localStorage', async () => {
       createComponent({
         props: {
           storageKey,
@@ -122,10 +122,9 @@ describe('Local Storage Sync', () => {
         value: newValue,
       });
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(localStorage.getItem(storageKey)).toBe(newValue);
     });
-    });
 
     it('persists the value by default', async () => {
       const persistedValue = 'persisted';
@@ -137,7 +136,7 @@ describe('Local Storage Sync', () => {
       });
 
       wrapper.setProps({ value: persistedValue });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(localStorage.getItem(storageKey)).toBe(persistedValue);
     });
 
@@ -151,7 +150,7 @@ describe('Local Storage Sync', () => {
       });
 
       wrapper.setProps({ persist: false, value: notPersistedValue });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(localStorage.getItem(storageKey)).not.toBe(notPersistedValue);
     });
   });
@@ -172,7 +171,7 @@ describe('Local Storage Sync', () => {
       ${{ foo: 'bar' }} | ${'{"foo":"bar"}'}
     `('given $value', ({ value, serializedValue }) => {
       describe('is a new value', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           createComponent({
             props: {
               storageKey,
@@ -183,7 +182,7 @@ describe('Local Storage Sync', () => {
 
           wrapper.setProps({ value });
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('serializes the value correctly to localStorage', () => {
@@ -253,7 +252,7 @@ describe('Local Storage Sync', () => {
       value,
     });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(localStorage.getItem(storageKey)).toBe(value);
 
@@ -261,7 +260,7 @@ describe('Local Storage Sync', () => {
       clear: true,
     });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(localStorage.getItem(storageKey)).toBe(null);
   });

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

 import { shallowMount } from '@vue/test-utils';
 import $ from 'jquery';
+import { nextTick } from 'vue';
 import HeaderComponent from '~/vue_shared/components/markdown/header.vue';
 import ToolbarButton from '~/vue_shared/components/markdown/toolbar_button.vue';
 
@@ -84,21 +85,17 @@ describe('Markdown field header component', () => {
     expect(wrapper.find('li:nth-child(2)').classes()).toContain('active');
   });
 
-  it('emits toggle markdown event when clicking preview', () => {
+  it('emits toggle markdown event when clicking preview', async () => {
     wrapper.find('.js-preview-link').trigger('click');
 
-    return wrapper.vm
-      .$nextTick()
-      .then(() => {
+    await nextTick();
     expect(wrapper.emitted('preview-markdown').length).toEqual(1);
 
     wrapper.find('.js-write-link').trigger('click');
-        return wrapper.vm.$nextTick();
-      })
-      .then(() => {
+
+    await nextTick();
     expect(wrapper.emitted('write-markdown').length).toEqual(1);
   });
-  });
 
   it('does not emit toggle markdown event when triggered from another form', () => {
     $(document).triggerHandler('markdown-preview:show', [

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

 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import ApplySuggestion from '~/vue_shared/components/markdown/apply_suggestion.vue';
 import SuggestionDiffHeader from '~/vue_shared/components/markdown/suggestion_diff_header.vue';
@@ -103,17 +104,16 @@ describe('Suggestion Diff component', () => {
       expect(wrapper.text()).toContain('Applying suggestion...');
     });
 
-    it('when callback of apply is called, hides loading', () => {
+    it('when callback of apply is called, hides loading', async () => {
       const [callback] = wrapper.emitted().apply[0];
 
       callback();
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(findApplyButton().exists()).toBe(true);
       expect(findLoading().exists()).toBe(false);
     });
   });
-  });
 
   describe('when add to batch is clicked', () => {
     it('emits addToBatch', () => {

spec/frontend/vue_shared/components/modal_copy_button_spec.js

 import { shallowMount, createWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 
@@ -20,7 +21,7 @@ describe('modal copy button', () => {
   });
 
   describe('clipboard', () => {
-    it('should fire a `success` event on click', () => {
+    it('should fire a `success` event on click', async () => {
       const root = createWrapper(wrapper.vm.$root);
       document.execCommand = jest.fn(() => true);
       window.getSelection = jest.fn(() => ({
@@ -29,20 +30,18 @@ describe('modal copy button', () => {
       }));
       wrapper.trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted().success).not.toBeEmpty();
       expect(document.execCommand).toHaveBeenCalledWith('copy');
       expect(root.emitted(BV_HIDE_TOOLTIP)).toEqual([['test-id']]);
     });
-    });
-    it("should propagate the clipboard error event if execCommand doesn't work", () => {
+    it("should propagate the clipboard error event if execCommand doesn't work", async () => {
       document.execCommand = jest.fn(() => false);
       wrapper.trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted().error).not.toBeEmpty();
       expect(document.execCommand).toHaveBeenCalledWith('copy');
     });
   });
-  });
 });

spec/frontend/vue_shared/components/notes/noteable_warning_spec.js

 import { GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import NoteableWarning from '~/vue_shared/components/notes/noteable_warning.vue';
 
 describe('Issue Warning Component', () => {
@@ -64,7 +65,7 @@ describe('Issue Warning Component', () => {
       expect(findConfidentialBlock().exists()).toBe(true);
       expect(findConfidentialBlock().element).toMatchSnapshot();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findConfidentialBlock(wrapper).text()).toContain('This is a confidential issue.');
     });
 
@@ -154,15 +155,15 @@ describe('Issue Warning Component', () => {
         noteableType: 'Epic',
       });
 
-      await wrapperLocked.vm.$nextTick();
+      await nextTick();
       expect(findLockedBlock(wrapperLocked).text()).toContain('This epic is locked.');
 
-      await wrapperConfidential.vm.$nextTick();
+      await nextTick();
       expect(findConfidentialBlock(wrapperConfidential).text()).toContain(
         'This is a confidential epic.',
       );
 
-      await wrapperLockedAndConfidential.vm.$nextTick();
+      await nextTick();
       expect(findLockedAndConfidentialBlock(wrapperLockedAndConfidential).text()).toContain(
         'This epic is confidential and locked.',
       );
@@ -179,15 +180,15 @@ describe('Issue Warning Component', () => {
         noteableType: 'MergeRequest',
       });
 
-      await wrapperLocked.vm.$nextTick();
+      await nextTick();
       expect(findLockedBlock(wrapperLocked).text()).toContain('This merge request is locked.');
 
-      await wrapperConfidential.vm.$nextTick();
+      await nextTick();
       expect(findConfidentialBlock(wrapperConfidential).text()).toContain(
         'This is a confidential merge request.',
       );
 
-      await wrapperLockedAndConfidential.vm.$nextTick();
+      await nextTick();
       expect(findLockedAndConfidentialBlock(wrapperLockedAndConfidential).text()).toContain(
         'This merge request is confidential and locked.',
       );

spec/frontend/vue_shared/components/paginated_table_with_search_and_tabs/paginated_table_with_search_and_tabs_spec.js

 import { GlAlert, GlBadge, GlPagination, GlTabs, GlTab } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Tracking from '~/tracking';
 import { OPERATOR_IS_ONLY } from '~/vue_shared/components/filtered_search_bar/constants';
 import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
@@ -219,21 +220,21 @@ describe('AlertManagementEmptyState', () => {
       it('returns prevPage button', async () => {
         findPagination().vm.$emit('input', 3);
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(findPagination().findAll('.page-item').at(0).text()).toBe('Prev');
       });
 
       it('returns prevPage number', async () => {
         findPagination().vm.$emit('input', 3);
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.vm.previousPage).toBe(2);
       });
 
       it('returns 0 when it is the first page', async () => {
         findPagination().vm.$emit('input', 1);
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.vm.previousPage).toBe(0);
       });
     });
@@ -242,7 +243,7 @@ describe('AlertManagementEmptyState', () => {
       it('returns nextPage button', async () => {
         findPagination().vm.$emit('input', 3);
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(findPagination().findAll('.page-item').at(1).text()).toBe('Next');
       });
 
@@ -257,14 +258,14 @@ describe('AlertManagementEmptyState', () => {
         });
         findPagination().vm.$emit('input', 1);
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.vm.nextPage).toBe(2);
       });
 
       it('returns `null` when currentPage is already last page', async () => {
         findStatusTabs().vm.$emit('input', 1);
         findPagination().vm.$emit('input', 1);
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.vm.nextPage).toBeNull();
       });
     });
@@ -319,7 +320,7 @@ describe('AlertManagementEmptyState', () => {
         searchTerm,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.vm.filteredSearchValue).toEqual([searchTerm]);
     });
 

spec/frontend/vue_shared/components/project_selector/project_selector_spec.js

 import { GlSearchBoxByType, GlInfiniteScroll } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { head } from 'lodash';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import mockProjects from 'test_fixtures_static/projects.json';
 import { trimText } from 'helpers/text_helper';
 import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue';
@@ -77,32 +77,30 @@ describe('ProjectSelector component', () => {
     expect(vm.$emit).toHaveBeenCalledWith('projectClicked', head(searchResults));
   });
 
-  it(`shows a "no results" message if showNoResultsMessage === true`, () => {
+  it(`shows a "no results" message if showNoResultsMessage === true`, async () => {
     wrapper.setProps({ showNoResultsMessage: true });
 
-    return vm.$nextTick().then(() => {
+    await nextTick();
     const noResultsEl = wrapper.find('.js-no-results-message');
 
     expect(noResultsEl.exists()).toBe(true);
     expect(trimText(noResultsEl.text())).toEqual('Sorry, no projects matched your search');
   });
-  });
 
-  it(`shows a "minimum search query" message if showMinimumSearchQueryMessage === true`, () => {
+  it(`shows a "minimum search query" message if showMinimumSearchQueryMessage === true`, async () => {
     wrapper.setProps({ showMinimumSearchQueryMessage: true });
 
-    return vm.$nextTick().then(() => {
+    await nextTick();
     const minimumSearchEl = wrapper.find('.js-minimum-search-query-message');
 
     expect(minimumSearchEl.exists()).toBe(true);
     expect(trimText(minimumSearchEl.text())).toEqual('Enter at least three characters to search');
   });
-  });
 
-  it(`shows a error message if showSearchErrorMessage === true`, () => {
+  it(`shows a error message if showSearchErrorMessage === true`, async () => {
     wrapper.setProps({ showSearchErrorMessage: true });
 
-    return vm.$nextTick().then(() => {
+    await nextTick();
     const errorMessageEl = wrapper.find('.js-search-error-message');
 
     expect(errorMessageEl.exists()).toBe(true);
@@ -110,7 +108,6 @@ describe('ProjectSelector component', () => {
       'Something went wrong, unable to search projects',
     );
   });
-  });
 
   describe('the search results legend', () => {
     it.each`
@@ -121,7 +118,7 @@ describe('ProjectSelector component', () => {
       ${2}  | ${3}  | ${'Showing 2 of 3 projects'}
     `(
       'is "$expected" given $count results are showing out of $total',
-      ({ count, total, expected }) => {
+      async ({ count, total, expected }) => {
         search('gitlab ui');
 
         wrapper.setProps({
@@ -129,9 +126,8 @@ describe('ProjectSelector component', () => {
           totalResults: total,
         });
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         expect(findLegendText()).toBe(expected);
-        });
       },
     );
 

spec/frontend/vue_shared/components/registry/list_item_spec.js

 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import component from '~/vue_shared/components/registry/list_item.vue';
 
 describe('list item', () => {
@@ -70,10 +71,10 @@ describe('list item', () => {
     it('are visible when details is shown', async () => {
       mountComponent({}, slotMocks);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       findToggleDetailsButton().vm.$emit('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       slotNames.forEach((name) => {
         expect(findDetailsSlot(name).exists()).toBe(true);
       });
@@ -90,7 +91,7 @@ describe('list item', () => {
   describe('details toggle button', () => {
     it('is visible when at least one details slot exists', async () => {
       mountComponent({}, { 'details-foo': '<span></span>' });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findToggleDetailsButton().exists()).toBe(true);
     });
 

spec/frontend/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlIcon } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 import CollapsedCalendarIcon from '~/vue_shared/components/sidebar/collapsed_calendar_icon.vue';
@@ -61,7 +62,7 @@ describe('CollapsedCalendarIcon', () => {
   it('emits click event when container is clicked', async () => {
     wrapper.trigger('click');
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.emitted('click')[0]).toBeDefined();
   });

spec/frontend/vue_shared/components/sidebar/date_picker_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DatePicker from '~/vue_shared/components/pikaday.vue';
 import SidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue';
 
@@ -79,7 +80,7 @@ describe('SidebarDatePicker', () => {
     it('should enable editing when edit button is clicked', async () => {
       findEditButton().trigger('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.vm.editing).toBe(true);
     });

spec/frontend/vue_shared/components/sidebar/issuable_move_dropdown_spec.js

@@ -10,6 +10,7 @@ import {
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 
+import { nextTick } from 'vue';
 import axios from '~/lib/utils/axios_utils';
 import IssuableMoveDropdown from '~/vue_shared/components/sidebar/issuable_move_dropdown.vue';
 
@@ -74,7 +75,7 @@ describe('IssuableMoveDropdown', () => {
           searchKey: 'foo',
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.fetchProjects).toHaveBeenCalledWith('foo');
       });
@@ -151,7 +152,7 @@ describe('IssuableMoveDropdown', () => {
             selectedProject,
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.vm.isSelectedProject(project)).toBe(returnValue);
         },
@@ -164,7 +165,7 @@ describe('IssuableMoveDropdown', () => {
           selectedProject: null,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.isSelectedProject(mockProjects[0])).toBe(false);
       });
@@ -218,7 +219,7 @@ describe('IssuableMoveDropdown', () => {
           projectsListLoading: true,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findDropdownEl().find(GlLoadingIcon).exists()).toBe(true);
       });
@@ -231,7 +232,7 @@ describe('IssuableMoveDropdown', () => {
           selectedProject: mockProjects[0],
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         const dropdownItems = wrapper.findAll(GlDropdownItem);
 
@@ -251,7 +252,7 @@ describe('IssuableMoveDropdown', () => {
         });
 
         // Wait for `searchKey` watcher to run.
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -260,7 +261,7 @@ describe('IssuableMoveDropdown', () => {
           projectsListLoading: false,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         const dropdownContentEl = wrapper.find('[data-testid="content"]');
 
@@ -276,7 +277,7 @@ describe('IssuableMoveDropdown', () => {
           projectsListLoadFailed: true,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         const dropdownContentEl = wrapper.find('[data-testid="content"]');
 
@@ -295,7 +296,7 @@ describe('IssuableMoveDropdown', () => {
           selectedProject: mockProjects[0],
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(
           wrapper.find('[data-testid="footer"]').find(GlButton).attributes('disabled'),
@@ -352,7 +353,7 @@ describe('IssuableMoveDropdown', () => {
           projects: mockProjects,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         wrapper.findAll(GlDropdownItem).at(0).vm.$emit('click', mockEvent);
 
@@ -366,7 +367,7 @@ describe('IssuableMoveDropdown', () => {
           selectedProject: mockProjects[0],
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         wrapper.find('[data-testid="footer"]').find(GlButton).vm.$emit('click');
 

spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js

 import { GlIcon, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import DropdownButton from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue';
@@ -71,14 +71,13 @@ describe('DropdownButton', () => {
       expect(dropdownTextEl.text()).toBe('Label');
     });
 
-    it('renders provided button text element', () => {
+    it('renders provided button text element', async () => {
       store.state.dropdownButtonText = 'Custom label';
       const dropdownTextEl = findDropdownText();
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(dropdownTextEl.text()).toBe('Custom label');
     });
-    });
 
     it('renders chevron icon element', () => {
       const iconEl = findDropdownIcon();

spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view_spec.js

 import { GlButton, GlFormInput, GlLink, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import DropdownContentsCreateView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue';
@@ -42,7 +42,7 @@ describe('DropdownContentsCreateView', () => {
         expect(wrapper.vm.disableCreate).toBe(true);
       });
 
-      it('returns `true` when `labelCreateInProgress` is true', () => {
+      it('returns `true` when `labelCreateInProgress` is true', async () => {
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
         wrapper.setData({
@@ -51,12 +51,11 @@ describe('DropdownContentsCreateView', () => {
         });
         wrapper.vm.$store.dispatch('requestCreateLabel');
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.disableCreate).toBe(true);
       });
-      });
 
-      it('returns `false` when label title and color is defined and create request is not already in progress', () => {
+      it('returns `false` when label title and color is defined and create request is not already in progress', async () => {
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
         wrapper.setData({
@@ -64,11 +63,10 @@ describe('DropdownContentsCreateView', () => {
           selectedColor: '#ff0000',
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.disableCreate).toBe(false);
       });
     });
-    });
 
     describe('suggestedColors', () => {
       it('returns array of color objects containing color code and name', () => {
@@ -101,7 +99,7 @@ describe('DropdownContentsCreateView', () => {
     });
 
     describe('handleCreateClick', () => {
-      it('calls action `createLabel` with object containing `labelTitle` & `selectedColor`', () => {
+      it('calls action `createLabel` with object containing `labelTitle` & `selectedColor`', async () => {
         jest.spyOn(wrapper.vm, 'createLabel').mockImplementation();
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -112,7 +110,7 @@ describe('DropdownContentsCreateView', () => {
 
         wrapper.vm.handleCreateClick();
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.createLabel).toHaveBeenCalledWith(
           expect.objectContaining({
             title: 'Foo',
@@ -122,7 +120,6 @@ describe('DropdownContentsCreateView', () => {
       });
     });
   });
-  });
 
   describe('template', () => {
     it('renders component container element with class "labels-select-contents-create"', () => {
@@ -169,17 +166,15 @@ describe('DropdownContentsCreateView', () => {
       });
     });
 
-    it('renders color input element', () => {
+    it('renders color input element', async () => {
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({
         selectedColor: '#ff0000',
       });
 
-      return wrapper.vm.$nextTick(() => {
-        const colorPreviewEl = wrapper.find(
-          '.color-input-container > .dropdown-label-color-preview',
-        );
+      await nextTick();
+      const colorPreviewEl = wrapper.find('.color-input-container > .dropdown-label-color-preview');
       const colorInputEl = wrapper.find('.color-input-container').find(GlFormInput);
 
       expect(colorPreviewEl.exists()).toBe(true);
@@ -188,7 +183,6 @@ describe('DropdownContentsCreateView', () => {
       expect(colorInputEl.attributes('placeholder')).toBe('Use custom color #FF0000');
       expect(colorInputEl.attributes('value')).toBe('#ff0000');
     });
-    });
 
     it('renders create button element', () => {
       const createBtnEl = wrapper.find('.dropdown-actions').findAll(GlButton).at(0);
@@ -197,16 +191,15 @@ describe('DropdownContentsCreateView', () => {
       expect(createBtnEl.text()).toContain('Create');
     });
 
-    it('shows gl-loading-icon within create button element when `labelCreateInProgress` is `true`', () => {
+    it('shows gl-loading-icon within create button element when `labelCreateInProgress` is `true`', async () => {
       wrapper.vm.$store.dispatch('requestCreateLabel');
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const loadingIconEl = wrapper.find('.dropdown-actions').find(GlLoadingIcon);
 
       expect(loadingIconEl.exists()).toBe(true);
       expect(loadingIconEl.isVisible()).toBe(true);
     });
-    });
 
     it('renders cancel button element', () => {
       const cancelBtnEl = wrapper.find('.dropdown-actions').findAll(GlButton).at(1);

spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js

@@ -6,7 +6,7 @@ import {
   GlLink,
 } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 import DropdownContentsLabelsView from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue';
@@ -114,7 +114,7 @@ describe('DropdownContentsLabelsView', () => {
 
           wrapper.vm.$store.dispatch('receiveLabelsSuccess', labels);
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.vm.showNoMatchingResultsMessage).toBe(returnValue);
         },
@@ -249,7 +249,7 @@ describe('DropdownContentsLabelsView', () => {
         expect(wrapper.vm.toggleDropdownContents).toHaveBeenCalled();
       });
 
-      it('calls action `scrollIntoViewIfNeeded` in next tick when any key is pressed', () => {
+      it('calls action `scrollIntoViewIfNeeded` in next tick when any key is pressed', async () => {
         jest.spyOn(wrapper.vm, 'scrollIntoViewIfNeeded').mockImplementation();
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
@@ -261,11 +261,10 @@ describe('DropdownContentsLabelsView', () => {
           keyCode: DOWN_KEY_CODE,
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.scrollIntoViewIfNeeded).toHaveBeenCalled();
       });
     });
-    });
 
     describe('handleLabelClick', () => {
       beforeEach(() => {
@@ -294,16 +293,15 @@ describe('DropdownContentsLabelsView', () => {
       expect(wrapper.find(GlIntersectionObserver).exists()).toBe(true);
     });
 
-    it('renders gl-loading-icon component when `labelsFetchInProgress` prop is true', () => {
+    it('renders gl-loading-icon component when `labelsFetchInProgress` prop is true', async () => {
       wrapper.vm.$store.dispatch('requestLabels');
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const loadingIconEl = findLoadingIcon();
 
       expect(loadingIconEl.exists()).toBe(true);
       expect(loadingIconEl.attributes('class')).toContain('labels-fetch-loading');
     });
-    });
 
     it('renders dropdown title element', () => {
       const titleEl = findDropdownTitle();
@@ -339,39 +337,37 @@ describe('DropdownContentsLabelsView', () => {
       expect(wrapper.findAll(LabelItem)).toHaveLength(mockLabels.length);
     });
 
-    it('renders label element with `highlight` set to true when value of `currentHighlightItem` is more than -1', () => {
+    it('renders label element with `highlight` set to true when value of `currentHighlightItem` is more than -1', async () => {
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({
         currentHighlightItem: 0,
       });
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const labelItemEl = findDropdownContent().find(LabelItem);
 
       expect(labelItemEl.attributes('highlight')).toBe('true');
     });
-    });
 
-    it('renders element containing "No matching results" when `searchKey` does not match with any label', () => {
+    it('renders element containing "No matching results" when `searchKey` does not match with any label', async () => {
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({
         searchKey: 'abc',
       });
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const noMatchEl = findDropdownContent().find('li');
 
       expect(noMatchEl.isVisible()).toBe(true);
       expect(noMatchEl.text()).toContain('No matching results');
     });
-    });
 
-    it('renders empty content while loading', () => {
+    it('renders empty content while loading', async () => {
       wrapper.vm.$store.state.labelsFetchInProgress = true;
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const dropdownContent = findDropdownContent();
       const loadingIcon = findLoadingIcon();
 
@@ -380,7 +376,6 @@ describe('DropdownContentsLabelsView', () => {
       expect(loadingIcon.exists()).toBe(true);
       expect(loadingIcon.isVisible()).toBe(true);
     });
-    });
 
     it('renders footer list items', () => {
       const footerLinks = findDropdownFooter().findAll(GlLink);
@@ -393,15 +388,14 @@ describe('DropdownContentsLabelsView', () => {
       expect(manageLabelsLink.text()).toBe('Manage labels');
     });
 
-    it('does not render "Create label" footer link when `state.allowLabelCreate` is `false`', () => {
+    it('does not render "Create label" footer link when `state.allowLabelCreate` is `false`', async () => {
       wrapper.vm.$store.state.allowLabelCreate = false;
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const createLabelLink = findDropdownFooter().findAll(GlLink).at(0);
 
       expect(createLabelLink.text()).not.toBe('Create label');
     });
-    });
 
     it('does not render footer list items when `state.variant` is "standalone"', () => {
       createComponent({ ...mockConfig, variant: 'standalone' });

spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_title_spec.js

 import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import DropdownTitle from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue';
@@ -47,14 +47,13 @@ describe('DropdownTitle', () => {
       expect(editBtnEl.text()).toBe('Edit');
     });
 
-    it('renders loading icon element when `labelsSelectInProgress` prop is true', () => {
+    it('renders loading icon element when `labelsSelectInProgress` prop is true', async () => {
       wrapper.setProps({
         labelsSelectInProgress: true,
       });
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true);
     });
   });
-  });
 });

spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlIcon } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import DropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue';
 
@@ -42,7 +43,7 @@ describe('DropdownValueCollapsedComponent', () => {
 
       wrapper.trigger('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted('onValueClick')[0]).toBeDefined();
     });

spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js

 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import { isInViewport } from '~/lib/utils/common_utils';
@@ -139,27 +139,26 @@ describe('LabelsSelectRoot', () => {
       ${'embedded'}   | ${'is-embedded'}
     `(
       'renders component root element with CSS class `$cssClass` when `state.variant` is "$variant"',
-      ({ variant, cssClass }) => {
+      async ({ variant, cssClass }) => {
         createComponent({
           ...mockConfig,
           variant,
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.classes()).toContain(cssClass);
-        });
       },
     );
 
     it('renders `dropdown-value-collapsed` component when `allowLabelCreate` prop is `true`', async () => {
       createComponent();
-      await wrapper.vm.$nextTick;
+      await nextTick;
       expect(wrapper.find(DropdownValueCollapsed).exists()).toBe(true);
     });
 
     it('renders `dropdown-title` component', async () => {
       createComponent();
-      await wrapper.vm.$nextTick;
+      await nextTick;
       expect(wrapper.find(DropdownTitle).exists()).toBe(true);
     });
 
@@ -167,7 +166,7 @@ describe('LabelsSelectRoot', () => {
       createComponent(mockConfig, {
         default: 'None',
       });
-      await wrapper.vm.$nextTick;
+      await nextTick;
 
       const valueComp = wrapper.find(DropdownValue);
 
@@ -178,14 +177,14 @@ describe('LabelsSelectRoot', () => {
     it('renders `dropdown-button` component when `showDropdownButton` prop is `true`', async () => {
       createComponent();
       wrapper.vm.$store.dispatch('toggleDropdownButton');
-      await wrapper.vm.$nextTick;
+      await nextTick;
       expect(wrapper.find(DropdownButton).exists()).toBe(true);
     });
 
     it('renders `dropdown-contents` component when `showDropdownButton` & `showDropdownContents` prop is `true`', async () => {
       createComponent();
       wrapper.vm.$store.dispatch('toggleDropdownContents');
-      await wrapper.vm.$nextTick;
+      await nextTick;
       expect(wrapper.find(DropdownContents).exists()).toBe(true);
     });
 
@@ -198,23 +197,21 @@ describe('LabelsSelectRoot', () => {
             wrapper.vm.$store.dispatch('toggleDropdownContents');
           });
 
-          it('set direction when out of viewport', () => {
+          it('set direction when out of viewport', async () => {
             isInViewport.mockImplementation(() => false);
             wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state);
 
-            return wrapper.vm.$nextTick().then(() => {
+            await nextTick();
             expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(true);
           });
-          });
 
-          it('does not set direction when inside of viewport', () => {
+          it('does not set direction when inside of viewport', async () => {
             isInViewport.mockImplementation(() => true);
             wrapper.vm.setContentIsOnViewport(wrapper.vm.$store.state);
 
-            return wrapper.vm.$nextTick().then(() => {
+            await nextTick();
             expect(wrapper.find(DropdownContents).props('renderOnTop')).toBe(false);
           });
-          });
         },
       );
     });

spec/frontend/vue_shared/components/sidebar/toggle_sidebar_spec.js

 import { GlButton } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import ToggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
 
 describe('ToggleSidebar', () => {
@@ -38,7 +39,7 @@ describe('ToggleSidebar', () => {
     createComponent({ mountFn: mount });
 
     findGlButton().trigger('click');
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.emitted('toggle')[0]).toBeDefined();
   });

spec/frontend/vue_shared/components/split_button_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import SplitButton from '~/vue_shared/components/split_button.vue';
 
 const mockActionItems = [
@@ -27,15 +28,15 @@ describe('SplitButton', () => {
 
   const findDropdown = () => wrapper.find(GlDropdown);
   const findDropdownItem = (index = 0) => findDropdown().findAll(GlDropdownItem).at(index);
-  const selectItem = (index) => {
+  const selectItem = async (index) => {
     findDropdownItem(index).vm.$emit('click');
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
-  const clickToggleButton = () => {
+  const clickToggleButton = async () => {
     findDropdown().vm.$emit('click');
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   it('fails for empty actionItems', () => {

spec/frontend/vue_shared/components/upload_dropzone/upload_dropzone_spec.js

 import { GlIcon, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
 
 jest.mock('~/flash');
@@ -84,49 +85,42 @@ describe('Upload dropzone component', () => {
       ${'contains text'}           | ${mockDragEvent({ types: ['text'] })}
       ${'contains files and text'} | ${mockDragEvent({ types: ['Files', 'text'] })}
       ${'contains files'}          | ${mockDragEvent({ types: ['Files'] })}
-    `('renders correct template when drag event $description', ({ eventPayload }) => {
+    `('renders correct template when drag event $description', async ({ eventPayload }) => {
       createComponent();
 
       wrapper.trigger('dragenter', eventPayload);
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.element).toMatchSnapshot();
     });
-    });
 
-    it('renders correct template when dragging stops', () => {
+    it('renders correct template when dragging stops', async () => {
       createComponent();
 
       wrapper.trigger('dragenter');
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
+
+      await nextTick();
       wrapper.trigger('dragleave');
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
+
+      await nextTick();
       expect(wrapper.element).toMatchSnapshot();
     });
   });
-  });
 
   describe('when dropping', () => {
-    it('emits upload event', () => {
+    it('emits upload event', async () => {
       createComponent();
       const mockFile = { name: 'test', type: 'image/jpg' };
       const mockEvent = mockDragEvent({ files: [mockFile] });
 
       wrapper.trigger('dragenter', mockEvent);
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
+
+      await nextTick();
       wrapper.trigger('drop', mockEvent);
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
+
+      await nextTick();
       expect(wrapper.emitted().change[0]).toEqual([[mockFile]]);
     });
   });
-  });
 
   describe('ondrop', () => {
     const mockData = { dragCounter: 1, isDragDataValid: true };

spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js

 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { TEST_HOST } from 'spec/test_constants';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue';
@@ -142,15 +143,14 @@ describe('UserAvatarList', () => {
         expect(links.length).toEqual(props.items.length);
       });
 
-      it('with collapse clicked, it renders avatars up to breakpoint', () => {
+      it('with collapse clicked, it renders avatars up to breakpoint', async () => {
         clickButton();
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         const links = wrapper.findAll(UserAvatarLink);
 
         expect(links.length).toEqual(TEST_BREAKPOINT);
       });
     });
   });
-  });
 });

spec/frontend/vue_shared/components/web_ide_link_spec.js

@@ -213,7 +213,7 @@ describe('Web IDE link component', () => {
 
       findLocalStorageSync().vm.$emit('input', ACTION_GITPOD.key);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findActionsButton().props('selectedKey')).toBe(ACTION_GITPOD.key);
     });
@@ -223,7 +223,7 @@ describe('Web IDE link component', () => {
 
       findActionsButton().vm.$emit('select', ACTION_GITPOD.key);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findActionsButton().props('selectedKey')).toBe(ACTION_GITPOD.key);
       expect(findLocalStorageSync().props('value')).toBe(ACTION_GITPOD.key);

spec/frontend/vue_shared/directives/track_event_spec.js

 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Tracking from '~/tracking';
 import TrackEvent from '~/vue_shared/directives/track_event';
 
@@ -31,7 +31,7 @@ describe('Error Tracking directive', () => {
     expect(Tracking.event).not.toHaveBeenCalled();
   });
 
-  it('should track event on click if tracking info provided', () => {
+  it('should track event on click if tracking info provided', async () => {
     const trackingOptions = {
       category: 'Tracking',
       action: 'click_trackable_btn',
@@ -43,9 +43,8 @@ describe('Error Tracking directive', () => {
     wrapper.setData({ trackingOptions });
     const { category, action, label, property, value } = trackingOptions;
 
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     button.trigger('click');
     expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property, value });
   });
-  });
 });

spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js

 import { GlLink, GlLabel, GlIcon, GlFormCheckbox, GlSprintf } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { useFakeDate } from 'helpers/fake_date';
 import { shallowMountExtended as shallowMount } from 'helpers/vue_test_utils_helper';
 import IssuableItem from '~/vue_shared/issuable/list/components/issuable_item.vue';
@@ -76,7 +77,7 @@ describe('IssuableItem', () => {
             },
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.vm.authorId).toBe(returnValue);
         },
@@ -100,7 +101,7 @@ describe('IssuableItem', () => {
             },
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.vm.isIssuableUrlExternal).toBe(returnValue);
         },
@@ -122,7 +123,7 @@ describe('IssuableItem', () => {
           },
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.labels).toEqual(mockLabels);
       });
@@ -135,7 +136,7 @@ describe('IssuableItem', () => {
           },
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.labels).toEqual([]);
       });
@@ -224,7 +225,7 @@ describe('IssuableItem', () => {
           enableLabelPermalinks: false,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.labelTarget(mockRegularLabel)).toBe('#');
       });
@@ -248,7 +249,7 @@ describe('IssuableItem', () => {
           },
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         const titleEl = wrapper.find('[data-testid="issuable-title"]');
 
@@ -264,7 +265,7 @@ describe('IssuableItem', () => {
         showCheckbox: true,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlFormCheckbox).exists()).toBe(true);
       expect(wrapper.find(GlFormCheckbox).attributes('checked')).not.toBeDefined();
@@ -273,7 +274,7 @@ describe('IssuableItem', () => {
         checked: true,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlFormCheckbox).attributes('checked')).toBe('true');
     });
@@ -286,7 +287,7 @@ describe('IssuableItem', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find('[data-testid="issuable-title"]').find(GlLink).attributes('target')).toBe(
         '_blank',
@@ -301,7 +302,7 @@ describe('IssuableItem', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const confidentialEl = wrapper.find('[data-testid="issuable-title"]').find(GlIcon);
 

spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js

@@ -2,6 +2,7 @@ import { GlAlert, GlKeysetPagination, GlSkeletonLoading, GlPagination } from '@g
 import { shallowMount } from '@vue/test-utils';
 import VueDraggable from 'vuedraggable';
 
+import { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 
 import IssuableItem from '~/vue_shared/issuable/list/components/issuable_item.vue';
@@ -77,7 +78,7 @@ describe('IssuableListRoot', () => {
             currentPage,
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.vm.skeletonItemCount).toBe(returnValue);
         },
@@ -96,7 +97,7 @@ describe('IssuableListRoot', () => {
             issuables,
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
           // eslint-disable-next-line no-restricted-syntax
@@ -104,7 +105,7 @@ describe('IssuableListRoot', () => {
             checkedIssuables,
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.vm.allIssuablesChecked).toBe(returnValue);
         },
@@ -119,7 +120,7 @@ describe('IssuableListRoot', () => {
           checkedIssuables: mockCheckedIssuables,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.bulkEditIssuables).toHaveLength(mIssuables.length);
       });
@@ -137,7 +138,7 @@ describe('IssuableListRoot', () => {
           issuables: [mockIssuables[0]],
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(Object.keys(wrapper.vm.checkedIssuables)).toHaveLength(1);
         expect(wrapper.vm.checkedIssuables[mockIssuables[0].iid]).toEqual({
@@ -160,7 +161,7 @@ describe('IssuableListRoot', () => {
           urlParams,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(global.window.location.href).toBe(
           `${TEST_HOST}/?state=${urlParams.state}&sort=${urlParams.sort}&page=${urlParams.page}&search=${urlParams.search}`,
@@ -192,7 +193,7 @@ describe('IssuableListRoot', () => {
           },
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.issuableChecked(mockIssuables[0])).toBe(true);
       });

spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { useFakeDate } from 'helpers/fake_date';
 
 import IssuableBody from '~/vue_shared/issuable/show/components/issuable_body.vue';
@@ -68,7 +69,7 @@ describe('IssuableBody', () => {
             },
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.vm.isUpdated).toBe(returnValue);
         },
@@ -90,13 +91,13 @@ describe('IssuableBody', () => {
           editFormVisible: true,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         wrapper.setProps({
           editFormVisible: false,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.initTaskList).toHaveBeenCalled();
       });
@@ -182,7 +183,7 @@ describe('IssuableBody', () => {
         editFormVisible: true,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const editFormEl = wrapper.find(IssuableEditForm);
       expect(editFormEl.exists()).toBe(true);
@@ -221,7 +222,7 @@ describe('IssuableBody', () => {
             editFormVisible: true,
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           const issuableEditForm = wrapper.find(IssuableEditForm);
 

spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js

 import { GlFormInput } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import IssuableEditForm from '~/vue_shared/issuable/show/components/issuable_edit_form.vue';
 import IssuableEventHub from '~/vue_shared/issuable/show/event_hub';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
@@ -52,7 +53,7 @@ describe('IssuableEditForm', () => {
           },
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.title).toBe('Foo');
         expect(wrapper.vm.description).toBe('Foobar');
@@ -67,7 +68,7 @@ describe('IssuableEditForm', () => {
           },
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.title).toBe('');
         expect(wrapper.vm.description).toBe('');

spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js

 import { GlIcon, GlAvatarLabeled } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
 import IssuableHeader from '~/vue_shared/issuable/show/components/issuable_header.vue';
@@ -78,7 +79,7 @@ describe('IssuableHeader', () => {
         blocked: true,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const blockedEl = wrapper.findByTestId('blocked');
 
@@ -91,7 +92,7 @@ describe('IssuableHeader', () => {
         confidential: true,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const confidentialEl = wrapper.findByTestId('confidential');
 

spec/frontend/vue_shared/issuable/show/components/issuable_title_spec.js

 import { GlIcon, GlButton, GlIntersectionObserver } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 import IssuableTitle from '~/vue_shared/issuable/show/components/issuable_title.vue';
@@ -64,7 +65,7 @@ describe('IssuableTitle', () => {
         },
       });
 
-      await wrapperWithTitle.vm.$nextTick();
+      await nextTick();
       const titleEl = wrapperWithTitle.find('h2');
 
       expect(titleEl.exists()).toBe(true);
@@ -90,7 +91,7 @@ describe('IssuableTitle', () => {
         stickyTitleVisible: true,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       const stickyHeaderEl = wrapper.find('[data-testid="header"]');
 
       expect(stickyHeaderEl.exists()).toBe(true);

spec/frontend/vue_shared/issuable/sidebar/components/issuable_sidebar_root_spec.js

 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import Cookies from 'js-cookie';
+import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 import IssuableSidebarRoot from '~/vue_shared/issuable/sidebar/components/issuable_sidebar_root.vue';
@@ -88,7 +89,7 @@ describe('IssuableSidebarRoot', () => {
           jest.spyOn(bp, 'isDesktop').mockReturnValue(breakpoint === 'lg' || breakpoint === 'xl');
 
           window.dispatchEvent(new Event('resize'));
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           assertPageLayoutClasses({ isExpanded: isExpandedValue });
         },

spec/frontend/vue_shared/new_namespace/components/welcome_spec.js

@@ -37,10 +37,9 @@ describe('Welcome page', () => {
     const link = wrapper.find('a');
     link.trigger('click');
     await nextTick();
-    return wrapper.vm.$nextTick().then(() => {
+    await nextTick();
     expect(trackingSpy).toHaveBeenCalledWith(undefined, 'click_tab', { label: 'test' });
   });
-  });
 
   it('renders footer slot if provided', () => {
     const DUMMY = 'Test message';