Refactor nextTick to use direct import from Vue package

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

spec/frontend/performance_bar/components/add_request_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import AddRequest from '~/performance_bar/components/add_request.vue';
 
 describe('add request form', () => {
@@ -17,9 +18,9 @@ describe('add request form', () => {
   });
 
   describe('when clicking the button', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       wrapper.find('button').trigger('click');
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('shows the form', () => {
@@ -27,9 +28,9 @@ describe('add request form', () => {
     });
 
     describe('when pressing escape', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         wrapper.find('input').trigger('keyup.esc');
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('hides the input', () => {
@@ -38,12 +39,11 @@ describe('add request form', () => {
     });
 
     describe('when submitting the form', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         wrapper.find('input').setValue('http://gitlab.example.com/users/root/calendar.json');
-        return wrapper.vm.$nextTick().then(() => {
-          wrapper.find('input').trigger('keyup.enter');
-          return wrapper.vm.$nextTick();
-        });
+        await nextTick();
+        wrapper.find('input').trigger('keyup.enter');
+        await nextTick();
       });
 
       it('emits an event to add the request', () => {
@@ -57,11 +57,10 @@ describe('add request form', () => {
         expect(wrapper.find('input').exists()).toBe(false);
       });
 
-      it('clears the value for next time', () => {
+      it('clears the value for next time', async () => {
         wrapper.find('button').trigger('click');
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.find('input').text()).toEqual('');
-        });
+        await nextTick();
+        expect(wrapper.find('input').text()).toEqual('');
       });
     });
   });

spec/frontend/pipeline_new/components/pipeline_new_form_spec.js

 import { GlForm, GlSprintf, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import CreditCardValidationRequiredAlert from 'ee_component/billings/components/cc_validation_required_alert.vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -122,7 +123,7 @@ describe('Pipeline New Form', () => {
     it('removes ci variable row on remove icon button click', async () => {
       findRemoveIcons().at(1).trigger('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findVariableRows()).toHaveLength(2);
     });
@@ -132,7 +133,7 @@ describe('Pipeline New Form', () => {
       input.element.value = 'test_var_2';
       input.trigger('change');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findVariableRows()).toHaveLength(4);
       expect(findKeyInputs().at(3).element.value).toBe('');
@@ -205,7 +206,7 @@ describe('Pipeline New Form', () => {
       mainInput.element.value = 'build_var';
       mainInput.trigger('change');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       selectBranch('branch-1');
 
@@ -215,7 +216,7 @@ describe('Pipeline New Form', () => {
       branchOneInput.element.value = 'deploy_var';
       branchOneInput.trigger('change');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       selectBranch('main');
 
@@ -309,7 +310,7 @@ describe('Pipeline New Form', () => {
         findKeyInputs().at(0).element.value = 'yml_var_modified';
         findKeyInputs().at(0).trigger('change');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findVariableRows().at(0).text()).not.toContain(mockYmlDesc);
       });
@@ -418,7 +419,7 @@ describe('Pipeline New Form', () => {
 
           findCCAlert().vm.$emit('dismiss');
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(findCCAlert().exists()).toBe(false);
           expect(wrapper.vm.$data.error).toBe(null);

spec/frontend/pipelines/components/dag/dag_annotations_spec.js

 import { GlButton } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DagAnnotations from '~/pipelines/components/dag/dag_annotations.vue';
 import { singleNote, multiNote } from './mock_data';
 
@@ -82,26 +83,24 @@ describe('The DAG annotations', () => {
     });
 
     describe('clicking hide', () => {
-      it('hides listed items and changes text to show', () => {
+      it('hides listed items and changes text to show', async () => {
         expect(getAllTextBlocks().length).toBe(Object.keys(multiNote).length);
         expect(getToggleButton().text()).toBe('Hide list');
         getToggleButton().trigger('click');
-        return wrapper.vm.$nextTick().then(() => {
-          expect(getAllTextBlocks().length).toBe(0);
-          expect(getToggleButton().text()).toBe('Show list');
-        });
+        await nextTick();
+        expect(getAllTextBlocks().length).toBe(0);
+        expect(getToggleButton().text()).toBe('Show list');
       });
     });
 
     describe('clicking show', () => {
-      it('shows listed items and changes text to hide', () => {
+      it('shows listed items and changes text to hide', async () => {
         getToggleButton().trigger('click');
         getToggleButton().trigger('click');
 
-        return wrapper.vm.$nextTick().then(() => {
-          expect(getAllTextBlocks().length).toBe(Object.keys(multiNote).length);
-          expect(getToggleButton().text()).toBe('Hide list');
-        });
+        await nextTick();
+        expect(getAllTextBlocks().length).toBe(Object.keys(multiNote).length);
+        expect(getToggleButton().text()).toBe('Hide list');
       });
     });
   });

spec/frontend/pipelines/components/dag/dag_spec.js

 import { GlAlert, GlEmptyState } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { ADD_NOTE, REMOVE_NOTE, REPLACE_NOTES } from '~/pipelines/components/dag/constants';
 import Dag from '~/pipelines/components/dag/dag.vue';
 import DagAnnotations from '~/pipelines/components/dag/dag_annotations.vue';
@@ -153,11 +154,11 @@ describe('Pipeline DAG graph wrapper', () => {
       expect(getNotes().exists()).toBe(false);
 
       getGraph().vm.$emit('update-annotation', { type: ADD_NOTE, data: currentNote });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(getNotes().exists()).toBe(true);
 
       getGraph().vm.$emit('update-annotation', { type: REMOVE_NOTE, data: currentNote });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(getNotes().exists()).toBe(false);
     });
 
@@ -165,11 +166,11 @@ describe('Pipeline DAG graph wrapper', () => {
       expect(getNotes().exists()).toBe(false);
 
       getGraph().vm.$emit('update-annotation', { type: REPLACE_NOTES, data: multiNote });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(getNotes().exists()).toBe(true);
 
       getGraph().vm.$emit('update-annotation', { type: REPLACE_NOTES, data: {} });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(getNotes().exists()).toBe(false);
     });
   });

spec/frontend/pipelines/components/pipelines_filtered_search_spec.js

 import { GlFilteredSearch } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import Api from '~/api';
 import axios from '~/lib/utils/axios_utils';
 import PipelinesFilteredSearch from '~/pipelines/components/pipelines_list/pipelines_filtered_search.vue';
@@ -103,46 +104,42 @@ describe('Pipelines filtered search', () => {
     expect(wrapper.emitted('filterPipelines')[0]).toEqual([mockSearch]);
   });
 
-  it('disables tag name token when branch name token is active', () => {
+  it('disables tag name token when branch name token is active', async () => {
     findFilteredSearch().vm.$emit('input', [
       { type: 'ref', value: { data: 'branch-1', operator: '=' } },
       { type: 'filtered-search-term', value: { data: '' } },
     ]);
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(findBranchToken().disabled).toBe(false);
-      expect(findTagToken().disabled).toBe(true);
-    });
+    await nextTick();
+    expect(findBranchToken().disabled).toBe(false);
+    expect(findTagToken().disabled).toBe(true);
   });
 
-  it('disables branch name token when tag name token is active', () => {
+  it('disables branch name token when tag name token is active', async () => {
     findFilteredSearch().vm.$emit('input', [
       { type: 'tag', value: { data: 'tag-1', operator: '=' } },
       { type: 'filtered-search-term', value: { data: '' } },
     ]);
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(findBranchToken().disabled).toBe(true);
-      expect(findTagToken().disabled).toBe(false);
-    });
+    await nextTick();
+    expect(findBranchToken().disabled).toBe(true);
+    expect(findTagToken().disabled).toBe(false);
   });
 
-  it('resets tokens disabled state on clear', () => {
+  it('resets tokens disabled state on clear', async () => {
     findFilteredSearch().vm.$emit('clearInput');
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(findBranchToken().disabled).toBe(false);
-      expect(findTagToken().disabled).toBe(false);
-    });
+    await nextTick();
+    expect(findBranchToken().disabled).toBe(false);
+    expect(findTagToken().disabled).toBe(false);
   });
 
-  it('resets tokens disabled state when clearing tokens by backspace', () => {
+  it('resets tokens disabled state when clearing tokens by backspace', async () => {
     findFilteredSearch().vm.$emit('input', [{ type: 'filtered-search-term', value: { data: '' } }]);
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(findBranchToken().disabled).toBe(false);
-      expect(findTagToken().disabled).toBe(false);
-    });
+    await nextTick();
+    expect(findBranchToken().disabled).toBe(false);
+    expect(findTagToken().disabled).toBe(false);
   });
 
   describe('Url query params', () => {

spec/frontend/pipelines/graph/action_component_spec.js

 import { GlButton } 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 axios from '~/lib/utils/axios_utils';
 import ActionComponent from '~/pipelines/components/jobs_shared/action_component.vue';
@@ -33,16 +34,11 @@ describe('pipeline graph action component', () => {
     expect(wrapper.attributes('title')).toBe('bar');
   });
 
-  it('should update bootstrap tooltip when title changes', (done) => {
+  it('should update bootstrap tooltip when title changes', async () => {
     wrapper.setProps({ tooltipText: 'changed' });
 
-    wrapper.vm
-      .$nextTick()
-      .then(() => {
-        expect(wrapper.attributes('title')).toBe('changed');
-      })
-      .then(done)
-      .catch(done.fail);
+    await nextTick();
+    expect(wrapper.attributes('title')).toBe('changed');
   });
 
   it('should render an svg', () => {
@@ -64,13 +60,11 @@ describe('pipeline graph action component', () => {
         .catch(done.fail);
     });
 
-    it('renders a loading icon while waiting for request', (done) => {
+    it('renders a loading icon while waiting for request', async () => {
       findButton().trigger('click');
 
-      wrapper.vm.$nextTick(() => {
-        expect(wrapper.find('.js-action-icon-loading').exists()).toBe(true);
-        done();
-      });
+      await nextTick();
+      expect(wrapper.find('.js-action-icon-loading').exists()).toBe(true);
     });
   });
 });

spec/frontend/pipelines/graph/job_item_spec.js

 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import JobItem from '~/pipelines/components/graph/job_item.vue';
 
 describe('pipeline graph job item', () => {
@@ -74,22 +75,19 @@ describe('pipeline graph job item', () => {
   });
 
   describe('name with link', () => {
-    it('should render the job name and status with a link', (done) => {
+    it('should render the job name and status with a link', async () => {
       createWrapper({ job: mockJob });
 
-      wrapper.vm.$nextTick(() => {
-        const link = wrapper.find('a');
+      await nextTick();
+      const link = wrapper.find('a');
 
-        expect(link.attributes('href')).toBe(mockJob.status.detailsPath);
+      expect(link.attributes('href')).toBe(mockJob.status.detailsPath);
 
-        expect(link.attributes('title')).toBe(`${mockJob.name} - ${mockJob.status.label}`);
+      expect(link.attributes('title')).toBe(`${mockJob.name} - ${mockJob.status.label}`);
 
-        expect(wrapper.find('.ci-status-icon-success').exists()).toBe(true);
-
-        expect(wrapper.text()).toBe(mockJob.name);
+      expect(wrapper.find('.ci-status-icon-success').exists()).toBe(true);
 
-        done();
-      });
+      expect(wrapper.text()).toBe(mockJob.name);
     });
   });
 

spec/frontend/pipelines/graph/linked_pipelines_column_spec.js

 import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
@@ -108,7 +109,7 @@ describe('Linked Pipelines Column', () => {
         expect(layersFn).not.toHaveBeenCalled();
         await clickExpandButtonAndAwaitTimers();
         await wrapper.setProps({ viewType: LAYER_VIEW });
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(layersFn).toHaveBeenCalledTimes(1);
         await wrapper.setProps({ viewType: STAGE_VIEW });
         await wrapper.setProps({ viewType: LAYER_VIEW });

spec/frontend/pipelines/pipeline_triggerer_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import pipelineTriggerer from '~/pipelines/components/pipelines_list/pipeline_triggerer.vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 
@@ -47,15 +48,14 @@ describe('Pipelines Triggerer', () => {
     });
   });
 
-  it('should render "API" when no triggerer is provided', () => {
+  it('should render "API" when no triggerer is provided', async () => {
     wrapper.setProps({
       pipeline: {
         user: null,
       },
     });
 
-    return wrapper.vm.$nextTick(() => {
-      expect(wrapper.find('.js-pipeline-url-api').text()).toEqual('API');
-    });
+    await nextTick();
+    expect(wrapper.find('.js-pipeline-url-api').text()).toEqual('API');
   });
 });

spec/frontend/pipelines/pipelines_actions_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import { TEST_HOST } from 'spec/test_constants';
 import createFlash from '~/flash';
@@ -68,7 +69,7 @@ describe('Pipelines Actions dropdown', () => {
 
         findAllDropdownItems().at(0).vm.$emit('click');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(findDropdown().props('loading')).toBe(true);
 
         await waitForPromises();
@@ -80,7 +81,7 @@ describe('Pipelines Actions dropdown', () => {
 
         findAllDropdownItems().at(0).vm.$emit('click');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(findDropdown().props('loading')).toBe(true);
 
         await waitForPromises();

spec/frontend/popovers/components/popovers_spec.js

 import { GlPopover } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { useMockMutationObserver } from 'helpers/mock_dom_observer';
 import Popovers from '~/popovers/components/popovers.vue';
 
@@ -7,10 +8,10 @@ describe('popovers/components/popovers.vue', () => {
   const { trigger: triggerMutate } = useMockMutationObserver();
   let wrapper;
 
-  const buildWrapper = (...targets) => {
+  const buildWrapper = async (...targets) => {
     wrapper = shallowMount(Popovers);
     wrapper.vm.addPopovers(targets);
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const createPopoverTarget = (options = {}) => {
@@ -49,7 +50,7 @@ describe('popovers/components/popovers.vue', () => {
       buildWrapper(target);
       wrapper.vm.addPopovers([target]);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findAll(GlPopover)).toHaveLength(1);
     });
@@ -86,7 +87,7 @@ describe('popovers/components/popovers.vue', () => {
       await buildWrapper(createPopoverTarget(), createPopoverTarget());
 
       wrapper.vm.dispose();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(allPopovers()).toHaveLength(0);
     });
@@ -97,7 +98,7 @@ describe('popovers/components/popovers.vue', () => {
       await buildWrapper(target, createPopoverTarget());
 
       wrapper.vm.dispose(target);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(allPopovers()).toHaveLength(1);
     });
@@ -109,13 +110,13 @@ describe('popovers/components/popovers.vue', () => {
       await buildWrapper(target);
 
       wrapper.vm.addPopovers([target, createPopoverTarget()]);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       triggerMutate(document.body, {
         entry: { removedNodes: [target] },
         options: { childList: true },
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(allPopovers()).toHaveLength(1);
     });

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

 import { GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -58,7 +59,7 @@ describe('UpdateUsername component', () => {
   it('has a disabled button if the username was not changed', async () => {
     const { openModalBtn } = findElements();
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(openModalBtn.props('disabled')).toBe(true);
   });
@@ -69,7 +70,7 @@ describe('UpdateUsername component', () => {
     input.element.value = 'newUsername';
     input.trigger('input');
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(openModalBtn.props('disabled')).toBe(false);
   });
@@ -83,7 +84,7 @@ describe('UpdateUsername component', () => {
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ newUsername });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('confirmation modal contains proper header and body', async () => {
@@ -100,7 +101,7 @@ describe('UpdateUsername component', () => {
       jest.spyOn(axios, 'put');
 
       await wrapper.vm.onConfirm();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(axios.put).toHaveBeenCalledWith(actionUrl, { user: { username: newUsername } });
     });
@@ -117,7 +118,7 @@ describe('UpdateUsername component', () => {
       });
 
       await wrapper.vm.onConfirm();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(input.attributes('disabled')).toBe(undefined);
       expect(openModalBtn.props('disabled')).toBe(true);

spec/frontend/projects/commit/components/branches_dropdown_spec.js

 import { GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
@@ -115,7 +115,7 @@ describe('BranchesDropdown', () => {
 
       findSearchBoxByType().vm.$emit('input', '_anything_');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(spy).toHaveBeenCalledWith('_anything_');
       expect(wrapper.vm.searchTerm).toBe('_anything_');

spec/frontend/projects/commit/components/form_modal_spec.js

@@ -2,6 +2,7 @@ import { GlModal, GlForm, GlFormCheckbox, GlSprintf } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
 import { shallowMount, mount, createWrapper } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import api from '~/api';
 import axios from '~/lib/utils/axios_utils';
@@ -156,7 +157,7 @@ describe('CommitFormModal', () => {
     it('Changes the start_branch input value', async () => {
       findBranchesDropdown().vm.$emit('selectBranch', '_changed_branch_value_');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findStartBranch().attributes('value')).toBe('_changed_branch_value_');
     });
@@ -165,7 +166,7 @@ describe('CommitFormModal', () => {
       createComponent(shallowMount, {}, {}, { isCherryPick: true });
       findProjectsDropdown().vm.$emit('selectProject', '_changed_project_value_');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findTargetProject().attributes('value')).toBe('_changed_project_value_');
     });
@@ -174,7 +175,7 @@ describe('CommitFormModal', () => {
   it('action primary button triggers Redis HLL tracking api call', async () => {
     createComponent(mount, {}, {}, { primaryActionEventName: 'test_event' });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     jest.spyOn(findForm().element, 'submit');
 

spec/frontend/projects/commits/components/author_select_spec.js

 import { GlDropdown, GlDropdownSectionHeader, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import * as urlUtility from '~/lib/utils/url_utility';
 import AuthorSelect from '~/projects/commits/components/author_select.vue';
@@ -63,36 +63,33 @@ describe('Author Select', () => {
   const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
 
   describe('user is searching via "filter by commit message"', () => {
-    it('disables dropdown container', () => {
+    it('disables dropdown container', 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({ hasSearchParam: true });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdownContainer().attributes('disabled')).toBeFalsy();
-      });
+      await nextTick();
+      expect(findDropdownContainer().attributes('disabled')).toBeFalsy();
     });
 
-    it('has correct tooltip message', () => {
+    it('has correct tooltip message', 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({ hasSearchParam: true });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdownContainer().attributes('title')).toBe(
-          'Searching by both author and message is currently not supported.',
-        );
-      });
+      await nextTick();
+      expect(findDropdownContainer().attributes('title')).toBe(
+        'Searching by both author and message is currently not supported.',
+      );
     });
 
-    it('disables dropdown', () => {
+    it('disables dropdown', 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({ hasSearchParam: false });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdown().attributes('disabled')).toBeFalsy();
-      });
+      await nextTick();
+      expect(findDropdown().attributes('disabled')).toBeFalsy();
     });
 
     it('hasSearchParam if user types a truthy string', () => {
@@ -107,14 +104,13 @@ describe('Author Select', () => {
       expect(findDropdown().attributes('text')).toBe('Author');
     });
 
-    it('displays the current selected author', () => {
+    it('displays the current selected author', 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({ currentAuthor });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdown().attributes('text')).toBe(currentAuthor);
-      });
+      await nextTick();
+      expect(findDropdown().attributes('text')).toBe(currentAuthor);
     });
 
     it('displays correct header text', () => {
@@ -149,13 +145,12 @@ describe('Author Select', () => {
       expect(findDropdownItems().at(0).text()).toBe('Any Author');
     });
 
-    it('displays the project authors', () => {
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdownItems()).toHaveLength(authors.length + 1);
-      });
+    it('displays the project authors', async () => {
+      await nextTick();
+      expect(findDropdownItems()).toHaveLength(authors.length + 1);
     });
 
-    it('has the correct props', () => {
+    it('has the correct props', async () => {
       const [{ avatar_url, username }] = authors;
       const result = {
         avatarUrl: avatar_url,
@@ -167,15 +162,13 @@ describe('Author Select', () => {
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ currentAuthor });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdownItems().at(1).props()).toEqual(expect.objectContaining(result));
-      });
+      await nextTick();
+      expect(findDropdownItems().at(1).props()).toEqual(expect.objectContaining(result));
     });
 
-    it("display the author's name", () => {
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdownItems().at(1).text()).toBe(currentAuthor);
-      });
+    it("display the author's name", async () => {
+      await nextTick();
+      expect(findDropdownItems().at(1).text()).toBe(currentAuthor);
     });
 
     it('passes selected author to redirectPath', () => {

spec/frontend/projects/compare/components/app_spec.js

 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import CompareApp from '~/projects/compare/components/app.vue';
 import RevisionCard from '~/projects/compare/components/revision_card.vue';
 import { appDefaultProps as defaultProps } from './mock_data';
@@ -91,7 +92,7 @@ describe('CompareApp component', () => {
       project,
     });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(findTargetRevisionCard().props('selectedProject')).toEqual(
       expect.objectContaining(project),
@@ -106,7 +107,7 @@ describe('CompareApp component', () => {
       revision,
     });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(findSourceRevisionCard().props('paramsBranch')).toBe(revision);
   });
@@ -125,7 +126,7 @@ describe('CompareApp component', () => {
     it('swaps revisions when clicked', async () => {
       findSwapRevisionsButton().vm.$emit('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findTargetRevisionCard().props('paramsBranch')).toBe(defaultProps.paramsTo);
       expect(findSourceRevisionCard().props('paramsBranch')).toBe(defaultProps.paramsFrom);

spec/frontend/projects/compare/components/repo_dropdown_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import RepoDropdown from '~/projects/compare/components/repo_dropdown.vue';
 import { revisionCardDefaultProps as defaultProps } from './mock_data';
 
@@ -39,7 +40,7 @@ describe('RepoDropdown component', () => {
 
     it('does not emit `changeTargetProject` event', async () => {
       wrapper.vm.emitTargetProject('foo');
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.emitted('changeTargetProject')).toBeUndefined();
     });
   });
@@ -67,13 +68,13 @@ describe('RepoDropdown component', () => {
     it('updates the hidden input value when onClick method is triggered', async () => {
       const repoId = '1';
       wrapper.vm.onClick({ id: repoId });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findHiddenInput().attributes('value')).toBe(repoId);
     });
 
     it('emits `selectProject` event when another target project is selected', async () => {
       findGlDropdown().findAll(GlDropdownItem).at(0).vm.$emit('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted('selectProject')[0][0]).toEqual({
         direction: 'from',

spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import RevisionDropdown from '~/projects/compare/components/revision_dropdown_legacy.vue';
@@ -105,7 +106,7 @@ describe('RevisionDropdown component', () => {
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ branches: ['some-branch'] });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       findFirstGlDropdownItem().vm.$emit('click');
 

spec/frontend/projects/compare/components/revision_dropdown_spec.js

 import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import RevisionDropdown from '~/projects/compare/components/revision_dropdown.vue';
@@ -141,7 +142,7 @@ describe('RevisionDropdown component', () => {
   it('emits `selectRevision` event when another revision is selected', async () => {
     createComponent();
     wrapper.vm.branches = ['some-branch'];
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     findGlDropdown().findAll(GlDropdownItem).at(0).vm.$emit('click');
 

spec/frontend/projects/new/components/new_project_url_select_spec.js

@@ -6,7 +6,7 @@ import {
   GlSearchBoxByType,
 } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -95,7 +95,7 @@ describe('NewProjectUrlSelect component', () => {
 
   const clickDropdownItem = async () => {
     wrapper.findComponent(GlDropdownItem).vm.$emit('click');
-    await wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const showDropdown = async () => {

spec/frontend/projects/pipelines/charts/components/app_spec.js

 import { GlTabs, GlTab } from '@gitlab/ui';
 import { merge } from 'lodash';
+import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
@@ -99,7 +100,7 @@ describe('ProjectsPipelinesChartsApp', () => {
 
       tabs.vm.$emit('input', 1);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(tabs.attributes('value')).toBe('1');
     });
@@ -115,7 +116,7 @@ describe('ProjectsPipelinesChartsApp', () => {
 
       tabs.vm.$emit('input', 0);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(updateHistory).not.toHaveBeenCalled();
     });
@@ -183,7 +184,7 @@ describe('ProjectsPipelinesChartsApp', () => {
 
       popstateHandler();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findGlTabs().attributes('value')).toBe('1');
     });

spec/frontend/projects/settings/components/shared_runners_toggle_spec.js

 import { GlAlert, GlToggle, GlTooltip } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAxiosAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
 import SharedRunnersToggleComponent from '~/projects/settings/components/shared_runners_toggle.vue';
@@ -121,7 +122,7 @@ describe('projects/settings/components/shared_runners', () => {
         expect(isToggleLoading()).toBe(false);
 
         findSharedRunnersToggle().vm.$emit('change', true);
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(isToggleLoading()).toBe(true);
 
         await waitForPromises();

spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js

@@ -139,7 +139,7 @@ describe('ServiceDeskSetting', () => {
           input.setValue('abc_A.');
           input.trigger('blur');
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           const errorText = wrapper.find('.invalid-feedback');
           expect(errorText.exists()).toBe(true);

spec/frontend/ref/components/ref_selector_spec.js

@@ -137,19 +137,19 @@ describe('Ref selector component', () => {
     findSearchBox().vm.$emit('input', newQuery);
   };
 
-  const selectFirstBranch = () => {
+  const selectFirstBranch = async () => {
     findFirstBranchDropdownItem().vm.$emit('click');
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
-  const selectFirstTag = () => {
+  const selectFirstTag = async () => {
     findFirstTagDropdownItem().vm.$emit('click');
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
-  const selectFirstCommit = () => {
+  const selectFirstCommit = async () => {
     findFirstCommitDropdownItem().vm.$emit('click');
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const waitForRequests = ({ andClearMocks } = { andClearMocks: false }) =>
@@ -219,12 +219,11 @@ describe('Ref selector component', () => {
         return waitForRequests();
       });
 
-      it('renders the updated ref name', () => {
+      it('renders the updated ref name', async () => {
         wrapper.setProps({ value: updatedRef });
 
-        return nextTick().then(() => {
-          expect(findButtonContent().text()).toBe(updatedRef);
-        });
+        await nextTick();
+        expect(findButtonContent().text()).toBe(updatedRef);
       });
     });
 
@@ -546,9 +545,8 @@ describe('Ref selector component', () => {
 
           await selectFirstBranch();
 
-          return nextTick().then(() => {
-            expect(findButtonContent().text()).toBe(fixtures.branches[0].name);
-          });
+          await nextTick();
+          expect(findButtonContent().text()).toBe(fixtures.branches[0].name);
         });
 
         it("updates the v-model binding with the branch's name", async () => {
@@ -566,9 +564,8 @@ describe('Ref selector component', () => {
 
           await selectFirstTag();
 
-          return nextTick().then(() => {
-            expect(findButtonContent().text()).toBe(fixtures.tags[0].name);
-          });
+          await nextTick();
+          expect(findButtonContent().text()).toBe(fixtures.tags[0].name);
         });
 
         it("updates the v-model binding with the tag's name", async () => {
@@ -586,9 +583,8 @@ describe('Ref selector component', () => {
 
           await selectFirstCommit();
 
-          return nextTick().then(() => {
-            expect(findButtonContent().text()).toBe(fixtures.commit.id);
-          });
+          await nextTick();
+          expect(findButtonContent().text()).toBe(fixtures.commit.id);
         });
 
         it("updates the v-model binding with the commit's full SHA", async () => {

spec/frontend/related_issues/components/related_issuable_input_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import RelatedIssuableInput from '~/related_issues/components/related_issuable_input.vue';
 import { issuableTypesMap, PathIdSeparator } from '~/related_issues/constants';
@@ -82,7 +83,7 @@ describe('RelatedIssuableInput', () => {
 
       wrapper.find('li').trigger('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(document.activeElement).toBe(wrapper.find({ ref: 'input' }).element);
     });

spec/frontend/releases/components/app_edit_new_spec.js

@@ -3,6 +3,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { merge } from 'lodash';
 import Vuex from 'vuex';
+import { nextTick } from 'vue';
 import originalRelease from 'test_fixtures/api/releases/release.json';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import { TEST_HOST } from 'helpers/test_constants';
@@ -71,7 +72,7 @@ describe('Release edit/new component', () => {
       },
     });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     wrapper.element.querySelectorAll('input').forEach((input) => jest.spyOn(input, 'focus'));
   };

spec/frontend/releases/components/app_index_apollo_client_spec.js

 import { cloneDeep } from 'lodash';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import originalAllReleasesQueryResponse from 'test_fixtures/graphql/releases/graphql/queries/all_releases.query.graphql.json';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -296,7 +296,7 @@ describe('app_index_apollo_client.vue', () => {
       mockQueryParams = { after };
       findPagination().vm.$emit('next', after);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(queryMock.mock.calls).toEqual([
         [expect.objectContaining({ before })],
@@ -321,7 +321,7 @@ describe('app_index_apollo_client.vue', () => {
     it('requeries the GraphQL endpoint and updates the URL when the sort is changed', async () => {
       findSort().vm.$emit('input', CREATED_ASC);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(queryMock.mock.calls).toEqual([
         [expect.objectContaining({ sort: DEFAULT_SORT })],
@@ -337,7 +337,7 @@ describe('app_index_apollo_client.vue', () => {
     it('does not requery the GraphQL endpoint or update the URL if the sort is updated to the same value', async () => {
       findSort().vm.$emit('input', DEFAULT_SORT);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(queryMock.mock.calls).toEqual([
         [expect.objectContaining({ sort: DEFAULT_SORT })],
@@ -370,7 +370,7 @@ describe('app_index_apollo_client.vue', () => {
 
           findSort().vm.$emit('input', CREATED_ASC);
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it(`resets the page's "${paramName}" pagination cursor when the sort is changed`, () => {

spec/frontend/releases/components/evidence_block_spec.js

 import { GlLink, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import originalRelease from 'test_fixtures/api/releases/release.json';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { truncateSha } from '~/lib/utils/text_utility';
@@ -51,12 +52,11 @@ describe('Evidence Block', () => {
       expect(wrapper.find('.js-short').text()).toBe(truncateSha(release.evidences[0].sha));
     });
 
-    it('renders the long sha after expansion', () => {
+    it('renders the long sha after expansion', async () => {
       wrapper.find('.js-text-expander-prepend').trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find('.js-expanded').text()).toBe(release.evidences[0].sha);
-      });
+      await nextTick();
+      expect(wrapper.find('.js-expanded').text()).toBe(release.evidences[0].sha);
     });
   });
 

spec/frontend/releases/components/release_block_footer_spec.js

 import { GlLink, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { cloneDeep } from 'lodash';
+import { nextTick } from 'vue';
 import originalRelease from 'test_fixtures/api/releases/release.json';
 import { trimText } from 'helpers/text_helper';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
@@ -14,7 +15,7 @@ describe('Release block footer', () => {
   let wrapper;
   let release;
 
-  const factory = (props = {}) => {
+  const factory = async (props = {}) => {
     wrapper = mount(ReleaseBlockFooter, {
       propsData: {
         ...convertObjectPropsToCamelCase(release, { deep: true }),
@@ -22,7 +23,7 @@ describe('Release block footer', () => {
       },
     });
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   beforeEach(() => {

spec/frontend/releases/components/release_block_milestone_info_spec.js

 import { GlProgressBar, GlLink, GlBadge, GlButton } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import originalRelease from 'test_fixtures/api/releases/release.json';
 import { trimText } from 'helpers/text_helper';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
@@ -12,12 +13,12 @@ describe('Release block milestone info', () => {
   let wrapper;
   let milestones;
 
-  const factory = (props) => {
+  const factory = async (props) => {
     wrapper = mount(ReleaseBlockMilestoneInfo, {
       propsData: props,
     });
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   beforeEach(() => {
@@ -105,10 +106,10 @@ describe('Release block milestone info', () => {
       return factory({ milestones: lotsOfMilestones });
     });
 
-    const clickShowMoreFewerButton = () => {
+    const clickShowMoreFewerButton = async () => {
       milestoneListContainer().find(GlButton).trigger('click');
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     };
 
     const milestoneListText = () => trimText(milestoneListContainer().text());
@@ -117,19 +118,16 @@ describe('Release block milestone info', () => {
       expect(milestoneListText()).toContain(`Milestones ${abbreviatedListString} • show 10 more`);
     });
 
-    it('renders all milestones when "show more" is clicked', () =>
-      clickShowMoreFewerButton().then(() => {
-        expect(milestoneListText()).toContain(`Milestones ${fullListString} • show fewer`);
-      }));
+    it('renders all milestones when "show more" is clicked', async () => {
+      await clickShowMoreFewerButton();
+      expect(milestoneListText()).toContain(`Milestones ${fullListString} • show fewer`);
+    });
 
-    it('returns to the original view when "show fewer" is clicked', () =>
-      clickShowMoreFewerButton()
-        .then(clickShowMoreFewerButton)
-        .then(() => {
-          expect(milestoneListText()).toContain(
-            `Milestones ${abbreviatedListString} • show 10 more`,
-          );
-        }));
+    it('returns to the original view when "show fewer" is clicked', async () => {
+      await clickShowMoreFewerButton();
+      await clickShowMoreFewerButton();
+      expect(milestoneListText()).toContain(`Milestones ${abbreviatedListString} • show 10 more`);
+    });
   });
 
   const expectAllZeros = () => {

spec/frontend/releases/components/release_block_spec.js

 import { mount } from '@vue/test-utils';
 import $ from 'jquery';
+import { nextTick } from 'vue';
 import originalRelease from 'test_fixtures/api/releases/release.json';
 import * as commonUtils from '~/lib/utils/common_utils';
 import * as urlUtility from '~/lib/utils/url_utility';
@@ -13,7 +14,7 @@ describe('Release block', () => {
   let wrapper;
   let release;
 
-  const factory = (releaseProp, featureFlags = {}) => {
+  const factory = async (releaseProp, featureFlags = {}) => {
     wrapper = mount(ReleaseBlock, {
       propsData: {
         release: releaseProp,
@@ -25,7 +26,7 @@ describe('Release block', () => {
       },
     });
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const milestoneListLabel = () => wrapper.find('.js-milestone-list-label');

spec/frontend/releases/components/tag_field_new_spec.js

 import { GlDropdownItem } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { __ } from '~/locale';
 import TagFieldNew from '~/releases/components/tag_field_new.vue';
 import createStore from '~/releases/stores';
@@ -153,7 +153,7 @@ describe('releases/components/tag_field_new', () => {
        * Should be passed either 'shown' or 'hidden'
        */
       const expectValidationMessageToBe = async (state) => {
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findTagNameFormGroup().element).toHaveClass(
           state === 'shown' ? 'is-invalid' : 'is-valid',

spec/frontend/repository/components/breadcrumbs_spec.js

 import { GlDropdown } from '@gitlab/ui';
 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Breadcrumbs from '~/repository/components/breadcrumbs.vue';
 import UploadBlobModal from '~/repository/components/upload_blob_modal.vue';
 import NewDirectoryModal from '~/repository/components/new_directory_modal.vue';
@@ -79,7 +80,7 @@ describe('Repository breadcrumbs component', () => {
     // eslint-disable-next-line no-restricted-syntax
     wrapper.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.find(GlDropdown).exists()).toBe(false);
   });
@@ -106,7 +107,7 @@ describe('Repository breadcrumbs component', () => {
     // eslint-disable-next-line no-restricted-syntax
     wrapper.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.find(GlDropdown).exists()).toBe(true);
   });
@@ -125,7 +126,7 @@ describe('Repository breadcrumbs component', () => {
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ $apollo: { queries: { userPermissions: { loading: false } } } });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findUploadBlobModal().exists()).toBe(true);
     });
@@ -149,7 +150,7 @@ describe('Repository breadcrumbs component', () => {
         // eslint-disable-next-line no-restricted-syntax
         wrapper.setData({ $apollo: { queries: { userPermissions: { loading: false } } } });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findNewDirectoryModal().exists()).toBe(true);
       });

spec/frontend/repository/components/upload_blob_modal_spec.js

@@ -2,6 +2,7 @@ import { GlModal, GlFormInput, GlFormTextarea, GlToggle, GlAlert } from '@gitlab
 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 createFlash from '~/flash';
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -113,7 +114,7 @@ describe('UploadBlobModal', () => {
             // eslint-disable-next-line no-restricted-syntax
             wrapper.setData({ target: 'Not main' });
 
-            await wrapper.vm.$nextTick();
+            await nextTick();
 
             expect(findMrToggle().exists()).toBe(true);
           });
@@ -202,7 +203,7 @@ describe('UploadBlobModal', () => {
       wrapper.vm.uploadFile = jest.fn();
       wrapper.vm.replaceFile = jest.fn();
       wrapper.vm.submitForm();
-      await wrapper.vm.$nextTick();
+      await nextTick();
     };
 
     const submitRequest = async () => {

spec/frontend/serverless/survey_banner_spec.js

 import { GlBanner } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Cookies from 'js-cookie';
+import { nextTick } from 'vue';
 import SurveyBanner from '~/serverless/survey_banner.vue';
 
 describe('Knative survey banner', () => {
@@ -27,7 +28,7 @@ describe('Knative survey banner', () => {
     expect(wrapper.find(GlBanner).exists()).toBe(true);
   });
 
-  it('should close the banner and set a cookie when close button is clicked', () => {
+  it('should close the banner and set a cookie when close button is clicked', async () => {
     jest.spyOn(Cookies, 'get').mockReturnValue(undefined);
     jest.spyOn(Cookies, 'set');
     mountBanner();
@@ -35,10 +36,9 @@ describe('Knative survey banner', () => {
     expect(wrapper.find(GlBanner).exists()).toBe(true);
     wrapper.find(GlBanner).vm.$emit('close');
 
-    return wrapper.vm.$nextTick().then(() => {
-      expect(Cookies.set).toHaveBeenCalledWith('hide_serverless_survey', 'true', { expires: 3650 });
-      expect(wrapper.find(GlBanner).exists()).toBe(false);
-    });
+    await nextTick();
+    expect(Cookies.set).toHaveBeenCalledWith('hide_serverless_survey', 'true', { expires: 3650 });
+    expect(wrapper.find(GlBanner).exists()).toBe(false);
   });
 
   it('should not render the banner when the cookie is set', () => {

spec/frontend/set_status_modal/set_status_modal_wrapper_spec.js

 import { GlModal, GlFormCheckbox } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { initEmojiMock, clearEmojiMock } from 'helpers/emoji';
 import * as UserApi from '~/api/user_api';
 import EmojiPicker from '~/emoji/components/picker.vue';
@@ -48,7 +49,7 @@ describe('SetStatusModalWrapper', () => {
   const findAvailabilityCheckbox = () => wrapper.find(GlFormCheckbox);
   const findClearStatusAtMessage = () => wrapper.find('[data-testid="clear-status-at-message"]');
 
-  const initModal = ({ mockOnUpdateSuccess = true, mockOnUpdateFailure = true } = {}) => {
+  const initModal = async ({ mockOnUpdateSuccess = true, mockOnUpdateFailure = true } = {}) => {
     const modal = findModal();
     // mock internal emoji methods
     wrapper.vm.showEmojiMenu = jest.fn();
@@ -57,7 +58,7 @@ describe('SetStatusModalWrapper', () => {
     if (mockOnUpdateFailure) wrapper.vm.onUpdateFail = jest.fn();
 
     modal.vm.$emit('shown');
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   afterEach(() => {
@@ -207,7 +208,7 @@ describe('SetStatusModalWrapper', () => {
 
       it('clicking "removeStatus" clears the emoji and message fields', async () => {
         findModal().vm.$emit('secondary');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findFormField('message').element.value).toBe('');
         expect(findFormField('emoji').element.value).toBe('');
@@ -215,7 +216,7 @@ describe('SetStatusModalWrapper', () => {
 
       it('clicking "setStatus" submits the user status', async () => {
         findModal().vm.$emit('primary');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         // set the availability status
         findAvailabilityCheckbox().vm.$emit('input', true);
@@ -224,7 +225,7 @@ describe('SetStatusModalWrapper', () => {
         wrapper.find('[data-testid="thirtyMinutes"]').vm.$emit('click');
 
         findModal().vm.$emit('primary');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         const commonParams = {
           emoji: defaultEmoji,
@@ -246,7 +247,7 @@ describe('SetStatusModalWrapper', () => {
 
       it('calls the "onUpdateSuccess" handler', async () => {
         findModal().vm.$emit('primary');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.onUpdateSuccess).toHaveBeenCalled();
       });
@@ -262,7 +263,7 @@ describe('SetStatusModalWrapper', () => {
 
       it('displays a toast success message', async () => {
         findModal().vm.$emit('primary');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect($toast.show).toHaveBeenCalledWith('Status updated');
       });
@@ -279,7 +280,7 @@ describe('SetStatusModalWrapper', () => {
 
       it('calls the "onUpdateFail" handler', async () => {
         findModal().vm.$emit('primary');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.onUpdateFail).toHaveBeenCalled();
       });
@@ -295,7 +296,7 @@ describe('SetStatusModalWrapper', () => {
 
       it('flashes an error message', async () => {
         findModal().vm.$emit('primary');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(createFlash).toHaveBeenCalledWith({
           message: "Sorry, we weren't able to set your status. Please try again later.",

spec/frontend/sidebar/assignees_spec.js

 import { GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { trimText } from 'helpers/text_helper';
 import UsersMockHelper from 'helpers/user_mock_data_helper';
 import Assignee from '~/sidebar/components/assignees/assignees.vue';
@@ -59,7 +60,7 @@ describe('Assignee component', () => {
       expect(componentTextNoUsers).toContain('assign yourself');
     });
 
-    it('emits the assign-self event when "assign yourself" is clicked', () => {
+    it('emits the assign-self event when "assign yourself" is clicked', async () => {
       createWrapper({
         ...getDefaultProps(),
         editable: true,
@@ -68,9 +69,8 @@ describe('Assignee component', () => {
       jest.spyOn(wrapper.vm, '$emit');
       wrapper.find('[data-testid="assign-yourself"]').trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('assign-self')).toBeTruthy();
-      });
+      await nextTick();
+      expect(wrapper.emitted('assign-self')).toBeTruthy();
     });
   });
 

spec/frontend/sidebar/components/assignees/sidebar_editable_item_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import SidebarEditableItem from '~/sidebar/components/sidebar_editable_item.vue';
 
 describe('boards sidebar remove issue', () => {
@@ -71,7 +72,7 @@ describe('boards sidebar remove issue', () => {
       createComponent({ canUpdate: true, slots });
       findEditButton().vm.$emit('click');
 
-      await wrapper.vm.$nextTick;
+      await nextTick;
 
       expect(findCollapsed().isVisible()).toBe(false);
       expect(findExpanded().isVisible()).toBe(true);
@@ -82,14 +83,14 @@ describe('boards sidebar remove issue', () => {
     beforeEach(async () => {
       createComponent({ canUpdate: true });
       findEditButton().vm.$emit('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('hides expanded section and displays collapsed section', async () => {
       expect(findExpanded().isVisible()).toBe(true);
       document.body.click();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findCollapsed().isVisible()).toBe(true);
       expect(findExpanded().isVisible()).toBe(false);
@@ -101,7 +102,7 @@ describe('boards sidebar remove issue', () => {
 
     findEditButton().vm.$emit('click');
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.emitted().open.length).toBe(1);
   });
@@ -111,7 +112,7 @@ describe('boards sidebar remove issue', () => {
 
     findEditButton().vm.$emit('click');
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     wrapper.vm.collapse({ emitEvent: false });
 

spec/frontend/sidebar/components/assignees/uncollapsed_assignee_list_spec.js

 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import UsersMockHelper from 'helpers/user_mock_data_helper';
 import AssigneeAvatarLink from '~/sidebar/components/assignees/assignee_avatar_link.vue';
@@ -84,10 +85,10 @@ describe('UncollapsedAssigneeList component', () => {
       });
 
       describe('when more button is clicked', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           findMoreButton().trigger('click');
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('shows "show less" label', () => {

spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js

@@ -11,6 +11,7 @@ import * as Sentry from '@sentry/browser';
 import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 
+import { nextTick } from 'vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
@@ -78,7 +79,7 @@ describe('SidebarDropdownWidget', () => {
     // It then emits `shown` event in a watcher for `visible`
     // Hence we need both of these:
     await waitForPromises();
-    await wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const waitForApollo = async () => {
@@ -354,7 +355,7 @@ describe('SidebarDropdownWidget', () => {
                 });
 
                 it(`calls createFlash with "${expectedMsg}"`, async () => {
-                  await wrapper.vm.$nextTick();
+                  await nextTick();
                   expect(createFlash).toHaveBeenCalledWith({
                     message: expectedMsg,
                     captureError: true,
@@ -377,7 +378,7 @@ describe('SidebarDropdownWidget', () => {
 
               findSearchBox().vm.$emit('input', 'non existing milestones');
 
-              await wrapper.vm.$nextTick();
+              await nextTick();
 
               expect(findDropdownText().text()).toBe('No milestone found');
             });
@@ -482,7 +483,7 @@ describe('SidebarDropdownWidget', () => {
 
             it('sends a projectMilestones query with the entered search term "foo"', async () => {
               findSearchBox().vm.$emit('input', mockSearchTerm);
-              await wrapper.vm.$nextTick();
+              await nextTick();
 
               // Account for debouncing
               jest.runAllTimers();

spec/frontend/sidebar/components/time_tracking/time_tracker_spec.js

 import { mount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import { stubTransition } from 'helpers/stub_transition';
 import { createMockDirective } from 'helpers/vue_mock_directive';
 import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
@@ -161,7 +162,7 @@ describe('Issuable Time Tracker', () => {
 
       it('should show the correct tooltip text', async () => {
         expect(findByTestId('timeTrackingComparisonPane').exists()).toBe(true);
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findComparisonMeter()).toBe('Time remaining: 26h 23m');
       });
@@ -179,7 +180,7 @@ describe('Issuable Time Tracker', () => {
             },
           },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('should display the human readable version of time estimated', () => {
@@ -282,7 +283,7 @@ describe('Issuable Time Tracker', () => {
             },
           },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('should not show the "Help" pane by default', () => {
@@ -292,19 +293,19 @@ describe('Issuable Time Tracker', () => {
       it('should show the "Help" pane when help button is clicked', async () => {
         findHelpButton().trigger('click');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findByTestId('helpPane').exists()).toBe(true);
       });
 
       it('should not show the "Help" pane when help button is clicked and then closed', async () => {
         findHelpButton().trigger('click');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findByTestId('helpPane').exists()).toBe(true);
 
         findCloseHelpButton().trigger('click');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findByTestId('helpPane').exists()).toBe(false);
       });
@@ -315,7 +316,7 @@ describe('Issuable Time Tracker', () => {
     it('refetches issuableTimeTracking query when eventHub emits `timeTracker:refresh` event', async () => {
       SidebarEventHub.$emit('timeTracker:refresh');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(issuableTimeTrackingRefetchSpy).toHaveBeenCalled();
     });

spec/frontend/sidebar/components/todo_toggle/sidebar_todo_widget_spec.js

 import { GlIcon, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -119,7 +119,7 @@ describe('Sidebar Todo Widget', () => {
     it('emits `todoUpdated` event on click on icon', async () => {
       wrapper.find(GlIcon).vm.$emit('click', event);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.emitted('todoUpdated')).toEqual([[false]]);
     });
   });

spec/frontend/sidebar/lock/edit_form_buttons_spec.js

 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import createFlash from '~/flash';
 import { createStore as createMrStore } from '~/mr_notes/stores';
 import createStore from '~/notes/stores';
@@ -118,15 +119,13 @@ describe('EditFormButtons', () => {
           });
 
           it('resets loading', async () => {
-            await wrapper.vm.$nextTick().then(() => {
-              expect(findLockToggle().props('loading')).toBe(false);
-            });
+            await nextTick();
+            expect(findLockToggle().props('loading')).toBe(false);
           });
 
-          it('emits close form', () => {
-            return wrapper.vm.$nextTick().then(() => {
-              expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm');
-            });
+          it('emits close form', async () => {
+            await nextTick();
+            expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm');
           });
 
           it('does not flash an error message', () => {
@@ -153,15 +152,13 @@ describe('EditFormButtons', () => {
           });
 
           it('resets loading', async () => {
-            await wrapper.vm.$nextTick().then(() => {
-              expect(findLockToggle().props('loading')).toBe(false);
-            });
+            await nextTick();
+            expect(findLockToggle().props('loading')).toBe(false);
           });
 
-          it('emits close form', () => {
-            return wrapper.vm.$nextTick().then(() => {
-              expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm');
-            });
+          it('emits close form', async () => {
+            await nextTick();
+            expect(eventHub.$emit).toHaveBeenCalledWith('closeLockForm');
           });
 
           it('calls flash with the correct message', () => {

spec/frontend/sidebar/lock/issuable_lock_form_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { mockTracking, triggerEvent } from 'helpers/tracking_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { createStore as createMrStore } from '~/mr_notes/stores';
@@ -80,13 +81,12 @@ describe('IssuableLockForm', () => {
         });
 
         describe('when not editable', () => {
-          it('does not display the edit form when opened if not editable', () => {
+          it('does not display the edit form when opened if not editable', async () => {
             expect(findEditForm().exists()).toBe(false);
             findSidebarCollapseIcon().trigger('click');
 
-            return wrapper.vm.$nextTick().then(() => {
-              expect(findEditForm().exists()).toBe(false);
-            });
+            await nextTick();
+            expect(findEditForm().exists()).toBe(false);
           });
         });
 
@@ -102,13 +102,12 @@ describe('IssuableLockForm', () => {
           });
 
           describe("when 'Edit' is clicked", () => {
-            it('displays the edit form when editable', () => {
+            it('displays the edit form when editable', async () => {
               expect(findEditForm().exists()).toBe(false);
               findEditLink().trigger('click');
 
-              return wrapper.vm.$nextTick().then(() => {
-                expect(findEditForm().exists()).toBe(true);
-              });
+              await nextTick();
+              expect(findEditForm().exists()).toBe(true);
             });
 
             it('tracks the event ', () => {
@@ -123,13 +122,12 @@ describe('IssuableLockForm', () => {
           });
 
           describe('When sidebar is collapsed', () => {
-            it('displays the edit form when opened', () => {
+            it('displays the edit form when opened', async () => {
               expect(findEditForm().exists()).toBe(false);
               findSidebarCollapseIcon().trigger('click');
 
-              return wrapper.vm.$nextTick().then(() => {
-                expect(findEditForm().exists()).toBe(true);
-              });
+              await nextTick();
+              expect(findEditForm().exists()).toBe(true);
             });
 
             it('renders a tooltip with the lock status text', () => {

spec/frontend/sidebar/sidebar_assignees_spec.js

 import { shallowMount } from '@vue/test-utils';
 import axios from 'axios';
 import AxiosMockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import Assigness from '~/sidebar/components/assignees/assignees.vue';
 import AssigneesRealtime from '~/sidebar/components/assignees/assignees_realtime.vue';
 import SidebarAssignees from '~/sidebar/components/assignees/sidebar_assignees.vue';
@@ -74,16 +75,15 @@ describe('sidebar assignees', () => {
     expect(mediator.store.assignees.length).toBe(1);
   });
 
-  it('hides assignees until fetched', () => {
+  it('hides assignees until fetched', async () => {
     createComponent();
 
     expect(wrapper.find(Assigness).exists()).toBe(false);
 
     wrapper.vm.store.isFetching.assignees = false;
 
-    return wrapper.vm.$nextTick(() => {
-      expect(wrapper.find(Assigness).exists()).toBe(true);
-    });
+    await nextTick();
+    expect(wrapper.find(Assigness).exists()).toBe(true);
   });
 
   describe('when realTimeIssueSidebar is turned on', () => {

spec/frontend/sidebar/todo_spec.js

 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import SidebarTodos from '~/sidebar/components/todo_toggle/todo.vue';
 
 const defaultProps = {
@@ -49,13 +50,12 @@ describe('SidebarTodo', () => {
   );
 
   describe('template', () => {
-    it('emits `toggleTodo` event when clicked on button', () => {
+    it('emits `toggleTodo` event when clicked on button', async () => {
       createComponent();
       wrapper.find('button').trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted().toggleTodo).toBeTruthy();
-      });
+      await nextTick();
+      expect(wrapper.emitted().toggleTodo).toBeTruthy();
     });
 
     it('renders component container element with proper data attributes', () => {

spec/frontend/snippets/components/snippet_blob_actions_edit_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { times } from 'lodash';
+import { nextTick } from 'vue';
 import SnippetBlobActionsEdit from '~/snippets/components/snippet_blob_actions_edit.vue';
 import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
 import {
@@ -193,7 +194,7 @@ describe('snippets/components/snippet_blob_actions_edit', () => {
       it('emits an action when content changes again', async () => {
         triggerBlobUpdate(0, { content });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(getLastActions()).toEqual([testEntries.updated.diff]);
       });

spec/frontend/snippets/components/snippet_header_spec.js

@@ -2,6 +2,7 @@ import { GlButton, GlModal, GlDropdown } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { ApolloMutation } from 'vue-apollo';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { Blob, BinaryBlob } from 'jest/blob/components/mock_data';
@@ -245,7 +246,7 @@ describe('Snippet header component', () => {
     // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
     // eslint-disable-next-line no-restricted-syntax
     wrapper.setData({ canCreateSnippet: true });
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(findButtonsAsModel()).toEqual(
       expect.arrayContaining([
@@ -348,33 +349,31 @@ describe('Snippet header component', () => {
     describe('in case of successful mutation, closes modal and redirects to correct listing', () => {
       useMockLocationHelper();
 
-      const createDeleteSnippet = (snippetProps = {}) => {
+      const createDeleteSnippet = async (snippetProps = {}) => {
         createComponent({
           snippetProps,
         });
         wrapper.vm.closeDeleteModal = jest.fn();
 
         wrapper.vm.deleteSnippet();
-        return wrapper.vm.$nextTick();
+        await nextTick();
       };
 
-      it('redirects to dashboard/snippets for personal snippet', () => {
-        return createDeleteSnippet().then(() => {
-          expect(wrapper.vm.closeDeleteModal).toHaveBeenCalled();
-          expect(window.location.pathname).toBe(`${gon.relative_url_root}dashboard/snippets`);
-        });
+      it('redirects to dashboard/snippets for personal snippet', async () => {
+        await createDeleteSnippet();
+        expect(wrapper.vm.closeDeleteModal).toHaveBeenCalled();
+        expect(window.location.pathname).toBe(`${gon.relative_url_root}dashboard/snippets`);
       });
 
-      it('redirects to project snippets for project snippet', () => {
+      it('redirects to project snippets for project snippet', async () => {
         const fullPath = 'foo/bar';
-        return createDeleteSnippet({
+        await createDeleteSnippet({
           project: {
             fullPath,
           },
-        }).then(() => {
-          expect(wrapper.vm.closeDeleteModal).toHaveBeenCalled();
-          expect(window.location.pathname).toBe(`${fullPath}/-/snippets`);
         });
+        expect(wrapper.vm.closeDeleteModal).toHaveBeenCalled();
+        expect(window.location.pathname).toBe(`${fullPath}/-/snippets`);
       });
     });
   });

spec/frontend/static_site_editor/components/edit_meta_controls_spec.js

 import { GlDropdown, GlDropdownItem, GlFormInput, GlFormTextarea } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import EditMetaControls from '~/static_site_editor/components/edit_meta_controls.vue';
 
 import { mergeRequestMeta, mergeRequestTemplates } from '../mock_data';
@@ -38,11 +39,11 @@ describe('~/static_site_editor/components/edit_meta_controls.vue', () => {
 
   const findGlFormTextAreaDescription = () => wrapper.find(GlFormTextarea);
 
-  beforeEach(() => {
+  beforeEach(async () => {
     buildWrapper();
     buildMocks();
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   });
 
   afterEach(() => {

spec/frontend/static_site_editor/components/edit_meta_modal_spec.js

 import { GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import axios from '~/lib/utils/axios_utils';
 import EditMetaControls from '~/static_site_editor/components/edit_meta_controls.vue';
@@ -50,14 +51,14 @@ describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
   const findEditMetaControls = () => wrapper.find(EditMetaControls);
   const findLocalStorageSync = () => wrapper.find(LocalStorageSync);
 
-  beforeEach(() => {
+  beforeEach(async () => {
     localStorage.setItem(MR_META_LOCAL_STORAGE_KEY);
 
     buildMockAxios();
     buildWrapper();
     buildMockRefs();
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   });
 
   afterEach(() => {
@@ -77,7 +78,7 @@ describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
 
     findLocalStorageSync().vm.$emit('input', localStorageMeta);
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(findEditMetaControls().props()).toEqual(localStorageMeta);
   });
@@ -134,13 +135,13 @@ describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
     it('sets the currentTemplate on the changeTemplate event', async () => {
       findEditMetaControls().vm.$emit('changeTemplate', template1);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findEditMetaControls().props().currentTemplate).toBe(template1);
 
       findEditMetaControls().vm.$emit('changeTemplate', null);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findEditMetaControls().props().currentTemplate).toBe(null);
     });
@@ -148,7 +149,7 @@ describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
     it('updates the description on the changeTemplate event', async () => {
       findEditMetaControls().vm.$emit('changeTemplate', template1);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findEditMetaControls().props().description).toEqual(template1.content);
     });
@@ -164,7 +165,7 @@ describe('~/static_site_editor/components/edit_meta_modal.vue', () => {
 
     findEditMetaControls().vm.$emit('updateSettings', newMeta);
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(findLocalStorageSync().props('value')).toEqual(newMeta);
   });

spec/frontend/static_site_editor/pages/home_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import EditArea from '~/static_site_editor/components/edit_area.vue';
 import EditMetaModal from '~/static_site_editor/components/edit_meta_modal.vue';
@@ -179,7 +180,7 @@ describe('static_site_editor/pages/home', () => {
   });
 
   describe('when preparing submission', () => {
-    it('calls the show method when the edit-area submit event is emitted', () => {
+    it('calls the show method when the edit-area submit event is emitted', async () => {
       buildWrapper();
 
       const mockInstance = { show: jest.fn() };
@@ -187,9 +188,8 @@ describe('static_site_editor/pages/home', () => {
 
       findEditArea().vm.$emit('submit', { content });
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(mockInstance.show).toHaveBeenCalled();
-      });
+      await nextTick();
+      expect(mockInstance.show).toHaveBeenCalled();
     });
   });
 
@@ -200,13 +200,13 @@ describe('static_site_editor/pages/home', () => {
         .mockRejectedValueOnce(new Error(submitChangesError));
     };
 
-    beforeEach(() => {
+    beforeEach(async () => {
       setupMutateMock();
 
       buildWrapper({ content });
       findEditMetaModal().vm.$emit('primary', mergeRequestMeta);
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('displays submit changes error message', () => {
@@ -221,12 +221,11 @@ describe('static_site_editor/pages/home', () => {
       expect(mutateMock).toHaveBeenCalled();
     });
 
-    it('hides submit changes error message when dismiss button is clicked', () => {
+    it('hides submit changes error message when dismiss button is clicked', async () => {
       findSubmitChangesError().vm.$emit('dismiss');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(findSubmitChangesError().exists()).toBe(false);
-      });
+      await nextTick();
+      expect(findSubmitChangesError().exists()).toBe(false);
     });
   });
 
@@ -234,7 +233,7 @@ describe('static_site_editor/pages/home', () => {
     const newContent = `new ${content}`;
     const formattedMarkdown = `formatted ${content}`;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       mutateMock.mockResolvedValueOnce(hasSubmittedChangesMutationPayload).mockResolvedValueOnce({
         data: {
           submitContentChanges: savedContentMeta,
@@ -249,7 +248,7 @@ describe('static_site_editor/pages/home', () => {
 
       findEditMetaModal().vm.$emit('primary', mergeRequestMeta);
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('dispatches hasSubmittedChanges mutation', () => {

spec/frontend/terraform/components/states_table_actions_spec.js

 import { GlDropdown, GlModal, GlSprintf } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import InitCommandModal from '~/terraform/components/init_command_modal.vue';
@@ -58,7 +59,7 @@ describe('StatesTableActions', () => {
     );
   };
 
-  const createComponent = (propsData = defaultProps) => {
+  const createComponent = async (propsData = defaultProps) => {
     const apolloProvider = createMockApolloProvider();
 
     toast = jest.fn();
@@ -71,7 +72,7 @@ describe('StatesTableActions', () => {
       stubs: { GlDropdown, GlModal, GlSprintf },
     });
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const findActionsDropdown = () => wrapper.findComponent(GlDropdown);

spec/frontend/terraform/components/states_table_spec.js

 import { GlIcon, GlLoadingIcon, GlTooltip } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { useFakeDate } from 'helpers/fake_date';
 import StatesTable from '~/terraform/components/states_table.vue';
 import StateActions from '~/terraform/components/states_table_actions.vue';
@@ -106,9 +107,9 @@ describe('StatesTable', () => {
     ],
   };
 
-  const createComponent = (propsData = defaultProps) => {
+  const createComponent = async (propsData = defaultProps) => {
     wrapper = mount(StatesTable, { propsData });
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const findActions = () => wrapper.findAll(StateActions);

spec/frontend/tooltips/components/tooltips_spec.js

 import { GlTooltip } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { useMockMutationObserver } from 'helpers/mock_dom_observer';
 import Tooltips from '~/tooltips/components/tooltips.vue';
 
@@ -46,7 +47,7 @@ describe('tooltips/components/tooltips.vue', () => {
     it('attaches tooltips to the targets specified', async () => {
       wrapper.vm.addTooltips([target]);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlTooltip).props('target')).toBe(target);
     });
@@ -56,7 +57,7 @@ describe('tooltips/components/tooltips.vue', () => {
 
       wrapper.vm.addTooltips([target]);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlTooltip).exists()).toBe(false);
     });
@@ -65,7 +66,7 @@ describe('tooltips/components/tooltips.vue', () => {
       wrapper.vm.addTooltips([target]);
       wrapper.vm.addTooltips([target]);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findAll(GlTooltip)).toHaveLength(1);
     });
@@ -73,7 +74,7 @@ describe('tooltips/components/tooltips.vue', () => {
     it('sets tooltip content from title attribute', async () => {
       wrapper.vm.addTooltips([target]);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlTooltip).text()).toBe(target.getAttribute('title'));
     });
@@ -85,7 +86,7 @@ describe('tooltips/components/tooltips.vue', () => {
       });
       wrapper.vm.addTooltips([target]);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlTooltip).html()).toContain(target.getAttribute('title'));
     });
@@ -94,7 +95,7 @@ describe('tooltips/components/tooltips.vue', () => {
       const config = { show: true };
       target = createTooltipTarget();
       wrapper.vm.addTooltips([target], config);
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.find(GlTooltip).props()).toMatchObject(config);
     });
 
@@ -110,7 +111,7 @@ describe('tooltips/components/tooltips.vue', () => {
         target = createTooltipTarget({ [attribute]: value });
         wrapper.vm.addTooltips([target]);
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.find(GlTooltip).props(prop)).toBe(value);
       },
@@ -124,10 +125,10 @@ describe('tooltips/components/tooltips.vue', () => {
 
     it('removes all tooltips when elements is nil', async () => {
       wrapper.vm.addTooltips([createTooltipTarget(), createTooltipTarget()]);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       wrapper.vm.dispose();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(allTooltips()).toHaveLength(0);
     });
@@ -136,10 +137,10 @@ describe('tooltips/components/tooltips.vue', () => {
       const target = createTooltipTarget();
 
       wrapper.vm.addTooltips([target, createTooltipTarget()]);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       wrapper.vm.dispose(target);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(allTooltips()).toHaveLength(1);
     });
@@ -154,13 +155,13 @@ describe('tooltips/components/tooltips.vue', () => {
       const target = createTooltipTarget();
 
       wrapper.vm.addTooltips([target, createTooltipTarget()]);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       triggerMutate(document.body, {
         entry: { removedNodes: [target] },
         options: { childList: true },
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(allTooltips()).toHaveLength(1);
     });
@@ -175,7 +176,7 @@ describe('tooltips/components/tooltips.vue', () => {
 
       wrapper.vm.addTooltips([target]);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       wrapper.vm.triggerEvent(target, event);
 
@@ -195,14 +196,14 @@ describe('tooltips/components/tooltips.vue', () => {
 
       wrapper.vm.addTooltips([target]);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlTooltip).text()).toBe(currentTitle);
 
       target.setAttribute('title', newTitle);
       wrapper.vm.fixTitle(target);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find(GlTooltip).text()).toBe(newTitle);
     });
@@ -225,7 +226,7 @@ describe('tooltips/components/tooltips.vue', () => {
     buildWrapper();
     wrapper.vm.addTooltips([createTooltipTarget()]);
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     wrapper.findComponent(GlTooltip).vm.$emit('hidden');
     expect(wrapper.emitted('hidden')).toHaveLength(1);

spec/frontend/user_lists/components/add_user_modal_spec.js

 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import AddUserModal from '~/user_lists/components/add_user_modal.vue';
 
 describe('Add User Modal', () => {
@@ -30,7 +31,7 @@ describe('Add User Modal', () => {
 
     it('should clear the input after emitting', async () => {
       click('confirm-add-user-ids');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find('#add-user-ids').element.value).toBe('');
     });
@@ -42,7 +43,7 @@ describe('Add User Modal', () => {
 
     it('should clear the input after cancelling', async () => {
       click('cancel-add-user-ids');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find('#add-user-ids').element.value).toBe('');
     });

spec/frontend/user_lists/components/edit_user_list_spec.js

 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import waitForPromises from 'helpers/wait_for_promises';
 import Api from '~/api';
@@ -77,11 +77,11 @@ describe('user_lists/components/edit_user_list', () => {
   });
 
   describe('update', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       Api.fetchFeatureFlagUserList.mockResolvedValue({ data: userList });
       factory();
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('should link to the documentation', () => {
@@ -99,11 +99,11 @@ describe('user_lists/components/edit_user_list', () => {
     });
 
     describe('success', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         Api.updateFeatureFlagUserList.mockResolvedValue({ data: userList });
         setInputValue('test');
         clickSave();
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('should create a user list with the entered name', () => {
@@ -139,7 +139,7 @@ describe('user_lists/components/edit_user_list', () => {
       it('should dismiss the error if dismiss is clicked', async () => {
         alert.find('button').trigger('click');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(alert.exists()).toBe(false);
       });

spec/frontend/user_lists/components/new_user_list_spec.js

 import { GlAlert } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import waitForPromises from 'helpers/wait_for_promises';
 import Api from '~/api';
@@ -43,11 +43,11 @@ describe('user_lists/components/new_user_list', () => {
 
   describe('create', () => {
     describe('success', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         Api.createFeatureFlagUserList.mockResolvedValue({ data: userList });
         setInputValue('test');
         click('save-user-list');
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('should create a user list with the entered name', () => {
@@ -82,7 +82,7 @@ describe('user_lists/components/new_user_list', () => {
       it('should dismiss the error when the dismiss button is clicked', async () => {
         alert.find('button').trigger('click');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(alert.exists()).toBe(false);
       });

spec/frontend/user_lists/components/user_list_spec.js

 import { GlAlert, GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { uniq } from 'lodash';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import Api from '~/api';
 import UserList from '~/user_lists/components/user_list.vue';
@@ -57,12 +57,12 @@ describe('User List', () => {
   describe('success', () => {
     let userIds;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       userIds = parseUserIds(userList.user_xids);
       Api.fetchFeatureFlagUserList.mockResolvedValueOnce({ data: userList });
       factory();
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('requests the user list on mount', () => {
@@ -101,10 +101,10 @@ describe('User List', () => {
       beforeEach(async () => {
         Api.updateFeatureFlagUserList.mockResolvedValue(userList);
         click('add-users');
-        await wrapper.vm.$nextTick();
+        await nextTick();
         wrapper.find('#add-user-ids').setValue(`${stringifyUserIds(newIds)},`);
         click('confirm-add-user-ids');
-        await wrapper.vm.$nextTick();
+        await nextTick();
         [[, { user_xids: receivedUserIds }]] = Api.updateFeatureFlagUserList.mock.calls;
         parsedReceivedUserIds = parseUserIds(receivedUserIds);
       });
@@ -140,7 +140,7 @@ describe('User List', () => {
       beforeEach(async () => {
         Api.updateFeatureFlagUserList.mockResolvedValue(userList);
         click('delete-user-id');
-        await wrapper.vm.$nextTick();
+        await nextTick();
         [[, { user_xids: receivedUserIds }]] = Api.updateFeatureFlagUserList.mock.calls;
       });
 
@@ -159,11 +159,11 @@ describe('User List', () => {
   describe('error', () => {
     const findAlert = () => wrapper.find(GlAlert);
 
-    beforeEach(() => {
+    beforeEach(async () => {
       Api.fetchFeatureFlagUserList.mockRejectedValue();
       factory();
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('displays the alert message', () => {
@@ -175,18 +175,18 @@ describe('User List', () => {
       const alert = findAlert();
       alert.find('button').trigger('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(alert.exists()).toBe(false);
     });
   });
 
   describe('empty list', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       Api.fetchFeatureFlagUserList.mockResolvedValueOnce({ data: { ...userList, user_xids: '' } });
       factory();
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('displays an empty state', () => {

spec/frontend/user_lists/components/user_lists_table_spec.js

 import { GlModal } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import * as timeago from 'timeago.js';
+import { nextTick } from 'vue';
 import UserListsTable from '~/user_lists/components/user_lists_table.vue';
 import { userList } from '../../feature_flags/mock_data';
 
@@ -56,43 +57,40 @@ describe('User Lists Table', () => {
   });
 
   describe('delete button', () => {
-    it('should display the confirmation modal', () => {
+    it('should display the confirmation modal', async () => {
       const modal = wrapper.find(GlModal);
 
       wrapper.find('[data-testid="delete-user-list"]').trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(modal.text()).toContain(`Delete ${userList.name}?`);
-        expect(modal.text()).toContain(`User list ${userList.name} will be removed.`);
-      });
+      await nextTick();
+      expect(modal.text()).toContain(`Delete ${userList.name}?`);
+      expect(modal.text()).toContain(`User list ${userList.name} will be removed.`);
     });
   });
 
   describe('confirmation modal', () => {
     let modal;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       modal = wrapper.find(GlModal);
 
       wrapper.find('button').trigger('click');
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
-    it('should emit delete with list on confirmation', () => {
+    it('should emit delete with list on confirmation', async () => {
       modal.find('[data-testid="modal-confirm"]').trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('delete')).toEqual([[userLists[0]]]);
-      });
+      await nextTick();
+      expect(wrapper.emitted('delete')).toEqual([[userLists[0]]]);
     });
 
-    it('should not emit delete with list when not confirmed', () => {
+    it('should not emit delete with list when not confirmed', async () => {
       modal.find('button').trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.emitted('delete')).toBeUndefined();
-      });
+      await nextTick();
+      expect(wrapper.emitted('delete')).toBeUndefined();
     });
   });
 });

spec/frontend/whats_new/components/app_spec.js

 import { GlDrawer, GlInfiniteScroll } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
@@ -67,7 +67,7 @@ describe('App', () => {
       { title: 'Whats New Drawer', url: 'www.url.com', release: 3.11 },
     ];
     wrapper.vm.$store.state.drawerBodyHeight = MOCK_DRAWER_BODY_HEIGHT;
-    await wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   afterEach(() => {
@@ -108,7 +108,7 @@ describe('App', () => {
     it.each([true, false])('passes open property', async (openState) => {
       wrapper.vm.$store.state.open = openState;
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(getDrawer().props('open')).toBe(openState);
     });