Merge branch 'slashmanov/refactor-next-tick-2' into 'master'

Refactor nextTick to use a direct import from a Vue package (2/9)

See merge request gitlab-org/gitlab!79048

ee/spec/frontend/geo_nodes/components/geo_nodes_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import GeoNodeDetails from 'ee/geo_nodes/components/details/geo_node_details.vue';
 import GeoNodes from 'ee/geo_nodes/components/geo_nodes.vue';
 import GeoNodeHeader from 'ee/geo_nodes/components/header/geo_node_header.vue';
@@ -46,13 +47,12 @@ describe('GeoNodes', () => {
         expect(findGeoNodeDetails().exists()).toBe(true);
       });
 
-      it('is hidden when toggled', () => {
+      it('is hidden when toggled', async () => {
         findGeoNodeHeader().vm.$emit('collapse');
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(findGeoNodeDetails().exists()).toBe(false);
       });
     });
   });
-  });
 });

ee/spec/frontend/hand_raise_leads/components/hand_raise_lead_button_spec.js

 import { GlButton, GlModal } from '@gitlab/ui';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { sprintf } from '~/locale';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -140,7 +140,7 @@ describe('HandRaiseLeadButton', () => {
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ countries, states, ...formData });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findModal().props('actionPrimary')).toStrictEqual({
         text: PQL_MODAL_PRIMARY,
@@ -164,7 +164,7 @@ describe('HandRaiseLeadButton', () => {
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ countries, states, country: state });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findByTestId('state').exists()).toBe(display);
     });

ee/spec/frontend/incidents/components/published_cell_spec.js

 import { GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import PublishedCell from 'ee/incidents/components/published_cell.vue';
 
 describe('Incidents Published Cell', () => {
@@ -37,12 +38,11 @@ describe('Incidents Published Cell', () => {
       expect(findCell().text()).toBe('Unpublished');
     });
 
-    it('render a status success icon if statusPagePublishedIncident returns true', () => {
+    it('render a status success icon if statusPagePublishedIncident returns true', async () => {
       wrapper.setProps({ statusPagePublishedIncident: true });
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(findCell().findComponent(GlIcon).exists()).toBe(true);
     });
   });
-  });
 });

ee/spec/frontend/insights/components/insights_page_spec.js

 import { GlEmptyState } from '@gitlab/ui';
 import { GlColumnChart } from '@gitlab/ui/dist/charts';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import InsightsChart from 'ee/insights/components/insights_chart.vue';
@@ -94,7 +94,7 @@ describe('Insights page component', () => {
       it('reflects new state', async () => {
         wrapper.setProps({ pageConfig: pageInfoNoCharts });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
       });

ee/spec/frontend/insights/components/insights_spec.js

 import { GlAlert, GlDropdown, GlDropdownItem, GlEmptyState } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import Vuex from 'vuex';
@@ -84,13 +84,13 @@ describe('Insights component', () => {
       });
 
       it('has the correct nav tabs', async () => {
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findComponent(GlDropdown).exists()).toBe(true);
         expect(wrapper.findComponent(GlDropdown).findComponent(GlDropdownItem).text()).toBe(title);
       });
 
       it('should not disable the tab selector', async () => {
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findComponent(GlDropdown).attributes().disabled).toBeUndefined();
       });
     });
@@ -110,13 +110,13 @@ describe('Insights component', () => {
       });
 
       it('has the correct nav tabs', async () => {
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findComponent(GlDropdown).exists()).toBe(true);
         expect(wrapper.findComponent(GlDropdown).findComponent(GlDropdownItem).text()).toBe(title);
       });
 
       it('disables the tab selector', async () => {
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findComponent(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
       });
     });
@@ -140,7 +140,7 @@ describe('Insights component', () => {
       });
 
       it('enables the tab selector', async () => {
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findComponent(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
       });
     });
@@ -163,7 +163,7 @@ describe('Insights component', () => {
       });
 
       it('disables the tab selector', async () => {
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findComponent(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
       });
     });
@@ -187,7 +187,7 @@ describe('Insights component', () => {
       });
 
       it('enables the tab selector', async () => {
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findComponent(GlDropdown).attributes().disabled).toBeUndefined();
       });
     });
@@ -211,7 +211,7 @@ describe('Insights component', () => {
       });
 
       it('enables the tab selector', async () => {
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findComponent(GlDropdown).attributes().disabled).toBeUndefined();
       });
     });
@@ -224,14 +224,14 @@ describe('Insights component', () => {
     });
 
     it('it displays a warning', async () => {
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.findComponent(GlEmptyState).attributes()).toMatchObject({
         title: 'Invalid Insights config file detected',
       });
     });
 
     it('does not display dropdown', async () => {
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.findComponent(GlDropdown).exists()).toBe(false);
     });
   });
@@ -243,14 +243,14 @@ describe('Insights component', () => {
     });
 
     it('it displays a warning', async () => {
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.findComponent(GlAlert).text()).toContain(
         'This project is filtered out in the insights.yml file',
       );
     });
 
     it('does not display dropdown', async () => {
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.findComponent(GlDropdown).exists()).toBe(false);
     });
   });
@@ -281,7 +281,7 @@ describe('Insights component', () => {
 
       jest.runOnlyPendingTimers();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(vuexStore.dispatch).toHaveBeenCalledWith('insights/setActiveTab', defaultKey);
     });
 
@@ -297,7 +297,7 @@ describe('Insights component', () => {
 
       jest.runOnlyPendingTimers();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(vuexStore.dispatch).toHaveBeenCalledWith('insights/setActiveTab', selectedKey);
     });
   });

ee/spec/frontend/integrations/gitlab_slack_application/components/gitlab_slack_application_spec.js

 import { GlButton } from '@gitlab/ui';
 
+import { nextTick } from 'vue';
 import GitlabSlackApplication from 'ee/integrations/gitlab_slack_application/components/gitlab_slack_application.vue';
 import { addProjectToSlack } from 'ee/integrations/gitlab_slack_application/api';
 import { i18n } from 'ee/integrations/gitlab_slack_application/constants';
@@ -83,7 +84,7 @@ describe('GitlabSlackApplication', () => {
           addProjectToSlack.mockResolvedValue(addToSlackData);
 
           findProjectsDropdown().vm.$emit('project-selected', mockProject);
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(findProjectsDropdown().props('selectedProject')).toBe(mockProject);
           expect(findGlButton().props('disabled')).toBe(false);

ee/spec/frontend/integrations/jira/issues_show/components/jira_issues_show_root_spec.js

@@ -2,6 +2,7 @@ import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 
+import { nextTick } from 'vue';
 import JiraIssuesShow from 'ee/integrations/jira/issues_show/components/jira_issues_show_root.vue';
 import JiraIssueSidebar from 'ee/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue';
 import { IssuableStatus } from '~/issues/constants';
@@ -124,7 +125,7 @@ describe('JiraIssuesShow', () => {
       expect(jiraIssueSidebar.props('sidebarExpanded')).toBe(true);
 
       jiraIssueSidebar.vm.$emit('sidebar-toggle');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(jiraIssueSidebar.props('sidebarExpanded')).toBe(false);
     });

ee/spec/frontend/issues_analytics/components/issues_analytics_spec.js

 import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import Vuex from 'vuex';
@@ -66,50 +66,45 @@ describe('Issue Analytics component', () => {
     expect(store.dispatch).toHaveBeenCalledWith('issueAnalytics/fetchChartData', TEST_HOST);
   });
 
-  it('renders loading state when loading', () => {
+  it('renders loading state when loading', async () => {
     wrapper.vm.$store.state.issueAnalytics.loading = true;
 
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     expect(findLoadingIcon().exists()).toBe(true);
     expect(findChartContainer().exists()).toBe(false);
   });
-  });
 
-  it('renders chart when data is present', () => {
+  it('renders chart when data is present', async () => {
     wrapper.vm.$store.state.issueAnalytics.chartData = mockChartData;
 
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     expect(findChartContainer().exists()).toBe(true);
   });
-  });
 
-  it('fetches data when filters are applied', () => {
+  it('fetches data when filters are applied', async () => {
     wrapper.vm.$store.state.issueAnalytics.filters = '?hello=world';
 
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     expect(store.dispatch).toHaveBeenCalledTimes(2);
     expect(store.dispatch.mock.calls[1]).toEqual(['issueAnalytics/fetchChartData', TEST_HOST]);
   });
-  });
 
-  it('renders empty state when chart data is empty', () => {
+  it('renders empty state when chart data is empty', async () => {
     wrapper.vm.$store.state.issueAnalytics.chartData = {};
 
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     expect(findEmptyState().exists()).toBe(true);
     expect(wrapper.vm.showNoDataEmptyState).toBe(true);
   });
-  });
 
-  it('renders filters empty state when filters are applied and chart data is empty', () => {
+  it('renders filters empty state when filters are applied and chart data is empty', async () => {
     wrapper.vm.$store.state.issueAnalytics.chartData = {};
     wrapper.vm.$store.state.issueAnalytics.filters = '?hello=world';
 
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     expect(findEmptyState().exists()).toBe(true);
     expect(wrapper.vm.showFiltersEmptyState).toBe(true);
   });
-  });
 
   it('renders the issues table', () => {
     expect(wrapper.findComponent(IssuesAnalyticsTable).exists()).toBe(true);

ee/spec/frontend/iterations/components/iteration_form_without_vue_router_spec.js

 import { GlForm } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { ApolloMutation } from 'vue-apollo';
+import { nextTick } from 'vue';
 import IterationForm from 'ee/iterations/components/iteration_form_without_vue_router.vue';
 import createIteration from 'ee/iterations/queries/create_iteration.mutation.graphql';
 import updateIteration from 'ee/iterations/queries/update_iteration.mutation.graphql';
@@ -61,7 +62,6 @@ describe('Iteration Form', () => {
   const findCancelButton = () => wrapper.find('[data-testid="cancel-iteration"]');
   const clickSave = () => findSaveButton().vm.$emit('click');
   const clickCancel = () => findCancelButton().vm.$emit('click');
-  const nextTick = () => wrapper.vm.$nextTick();
 
   it('renders a form', () => {
     createComponent();
@@ -107,16 +107,15 @@ describe('Iteration Form', () => {
         });
       });
 
-      it('redirects to Iteration page on success', () => {
+      it('redirects to Iteration page on success', async () => {
         createComponent();
 
         clickSave();
 
-        return nextTick().then(() => {
+        await nextTick();
         expect(findSaveButton().props('loading')).toBe(true);
         expect(visitUrl).toHaveBeenCalled();
       });
-      });
 
       it('loading=false on error', () => {
         createComponent({ mutationResult: createMutationFailure });
@@ -196,7 +195,7 @@ describe('Iteration Form', () => {
       });
     });
 
-    it('emits updated event after successful mutation', () => {
+    it('emits updated event after successful mutation', async () => {
       createComponent({
         props: propsWithIteration,
         mutationResult: updateMutationSuccess,
@@ -204,13 +203,12 @@ describe('Iteration Form', () => {
 
       clickSave();
 
-      return nextTick().then(() => {
+      await nextTick();
       expect(findSaveButton().props('loading')).toBe(true);
       expect(wrapper.emitted('updated')).toHaveLength(1);
     });
-    });
 
-    it('emits updated event after failed mutation', () => {
+    it('emits updated event after failed mutation', async () => {
       createComponent({
         props: propsWithIteration,
         mutationResult: updateMutationFailure,
@@ -218,12 +216,11 @@ describe('Iteration Form', () => {
 
       clickSave();
 
-      return nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted('updated')).toBeUndefined();
     });
-    });
 
-    it('emits cancel when cancel clicked', () => {
+    it('emits cancel when cancel clicked', async () => {
       createComponent({
         props: propsWithIteration,
         mutationResult: updateMutationSuccess,
@@ -231,9 +228,8 @@ describe('Iteration Form', () => {
 
       clickCancel();
 
-      return nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted('cancel')).toHaveLength(1);
     });
   });
-  });
 });

ee/spec/frontend/iterations/components/iteration_report_without_vue_router_spec.js

 import { GlDropdown, GlDropdownItem, GlEmptyState, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import IterationForm from 'ee/iterations/components/iteration_form_without_vue_router.vue';
 import IterationReportTabs from 'ee/iterations/components/iteration_report_tabs.vue';
 import IterationReport from 'ee/iterations/components/iteration_report_without_vue_router.vue';
@@ -232,7 +233,7 @@ describe('Iterations report', () => {
 
           clickEditButton();
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(window.history.pushState).toHaveBeenCalledWith(
             { prev: 'viewIteration' },
@@ -264,7 +265,7 @@ describe('Iterations report', () => {
           jest.spyOn(window.history, 'pushState').mockImplementation(() => {});
           findIterationForm().vm.$emit('cancel');
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(window.history.pushState).toHaveBeenCalledWith(
             { prev: 'editIteration' },
@@ -277,7 +278,7 @@ describe('Iterations report', () => {
           jest.spyOn(window.history, 'pushState').mockImplementation(() => {});
           findIterationForm().vm.$emit('updated');
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(window.history.pushState).toHaveBeenCalledWith(
             { prev: 'editIteration' },

ee/spec/frontend/iterations/components/iterations_spec.js

 import { GlAlert, GlLoadingIcon, GlPagination, GlTab, GlTabs } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Iterations from 'ee/iterations/components/iterations.vue';
 import IterationsList from 'ee/iterations/components/iterations_list.vue';
 import { Namespace } from 'ee/iterations/constants';
@@ -65,9 +66,9 @@ describe('Iterations', () => {
 
   describe('pagination', () => {
     const findPagination = () => wrapper.findComponent(GlPagination);
-    const setPage = (page) => {
+    const setPage = async (page) => {
       findPagination().vm.$emit('input', page);
-      return findPagination().vm.$nextTick();
+      await nextTick();
     };
 
     beforeEach(() => {
@@ -133,7 +134,7 @@ describe('Iterations', () => {
 
       wrapper.findComponent(GlTabs).vm.$emit('activate-tab', 2);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.vm.pagination).toEqual({
         currentPage: 1,

ee/spec/frontend/license_compliance/components/app_spec.js

 import { GlEmptyState, GlLoadingIcon, GlTab, GlTabs, GlAlert, GlBadge } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import LicenseComplianceApp from 'ee/license_compliance/components/app.vue';
@@ -290,12 +290,11 @@ describe('Project Licenses', () => {
         ${'licenses'}  | ${'#licenses'}
       `(
         'sets the location hash to "$expectedLocationHash" when the "$givenTab" tab is activate',
-        ({ givenActiveTab, expectedLocationHash }) => {
+        async ({ givenActiveTab, expectedLocationHash }) => {
           findByTestId(`${givenActiveTab}TabTitle`).trigger('click');
 
-          return wrapper.vm.$nextTick().then(() => {
+          await nextTick();
           expect(window.location.hash).toBe(expectedLocationHash);
-          });
         },
       );
 

ee/spec/frontend/license_compliance/components/detected_licenses_table_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DetectedLicensesTable from 'ee/license_compliance/components/detected_licenses_table.vue';
 import LicensesTable from 'ee/license_compliance/components/licenses_table.vue';
 import createStore from 'ee/license_compliance/store';
@@ -29,7 +30,7 @@ describe('DetectedLicenesTable component', () => {
     expect(componentWrapper.props()).toEqual(expect.objectContaining(props));
   };
 
-  beforeEach(() => {
+  beforeEach(async () => {
     factory();
 
     store.dispatch(`${namespace}/receiveLicensesSuccess`, {
@@ -39,7 +40,7 @@ describe('DetectedLicenesTable component', () => {
 
     jest.spyOn(store, 'dispatch').mockImplementation();
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   });
 
   afterEach(() => {
@@ -76,7 +77,7 @@ describe('DetectedLicenesTable component', () => {
   `('given $context', ({ isLoading, errorLoading, isListEmpty, initialized }) => {
     let moduleState;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       moduleState = Object.assign(store.state[namespace], {
         isLoading,
         errorLoading,
@@ -88,7 +89,7 @@ describe('DetectedLicenesTable component', () => {
         moduleState.pageInfo.total = 0;
       }
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     // See https://github.com/jest-community/eslint-plugin-jest/issues/229 for

ee/spec/frontend/on_demand_scans/components/tabs/saved_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { merge } from 'lodash';
 import dastProfilesMock from 'test_fixtures/graphql/on_demand_scans/graphql/dast_profiles.query.graphql.json';
@@ -204,7 +204,7 @@ describe('Saved tab', () => {
       it('put the button in the loading and disabled state', async () => {
         const runScanButton = findRunScanButton();
         runScanButton.vm.$emit('click');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(runScanButton.props('loading')).toBe(true);
         expect(runScanButton.props('disabled')).toBe(true);
@@ -242,7 +242,7 @@ describe('Saved tab', () => {
 
       it('hides the error message when retrying the deletion', async () => {
         findRunScanButton().vm.$emit('click');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.text()).not.toContain(errorMessage);
       });
@@ -328,7 +328,7 @@ describe('Saved tab', () => {
 
       it('hides the error message when retrying the deletion', async () => {
         findDeleteModal().vm.$emit('ok');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.text()).not.toContain(errorMessage);
       });

ee/spec/frontend/on_demand_scans_form/components/on_demand_scans_form_spec.js

@@ -2,6 +2,7 @@ import { GlForm, GlFormInput, GlSkeletonLoader } from '@gitlab/ui';
 import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
 import { merge } from 'lodash';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import OnDemandScansForm from 'ee/on_demand_scans_form/components/on_demand_scans_form.vue';
 import ScannerProfileSelector from 'ee/on_demand_scans_form/components/profile_selector/scanner_profile_selector.vue';
 import SiteProfileSelector from 'ee/on_demand_scans_form/components/profile_selector/site_profile_selector.vue';
@@ -90,13 +91,13 @@ describe('OnDemandScansForm', () => {
     expect(findSiteProfilesSelector().attributes('value')).toBe(dastScan.dastSiteProfile.id);
   };
 
-  const setValidFormData = () => {
+  const setValidFormData = async () => {
     findNameInput().vm.$emit('input', 'My daily scan');
     findBranchInput().vm.$emit('input', selectedBranch);
     findScannerProfilesSelector().vm.$emit('input', passiveScannerProfile.id);
     findSiteProfilesSelector().vm.$emit('input', nonValidatedSiteProfile.id);
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
   const setupSuccess = ({ edit = false } = {}) => {
     wrapper.vm.$apollo.mutate.mockResolvedValue({
@@ -112,7 +113,7 @@ describe('OnDemandScansForm', () => {
   };
   const selectProfile = (component) => async (profile) => {
     wrapper.findComponent(component).vm.$emit('input', profile.id);
-    await wrapper.vm.$nextTick();
+    await nextTick();
   };
   const selectScannerProfile = selectProfile(ScannerProfileSelector);
   const selectSiteProfile = selectProfile(SiteProfileSelector);
@@ -326,7 +327,7 @@ describe('OnDemandScansForm', () => {
       );
 
       createShallowComponent();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findNameInput().attributes('value')).toBe(dastScan.name);
       expect(findDescriptionInput().attributes('value')).toBe(dastScan.description);
@@ -537,10 +538,10 @@ describe('OnDemandScansForm', () => {
   `(
     'profiles conflict prevention',
     ({ description, selectedScannerProfile, selectedSiteProfile, hasConflict }) => {
-      const setFormData = () => {
+      const setFormData = async () => {
         findScannerProfilesSelector().vm.$emit('input', selectedScannerProfile.id);
         findSiteProfilesSelector().vm.$emit('input', selectedSiteProfile.id);
-        return wrapper.vm.$nextTick();
+        await nextTick();
       };
 
       it(
@@ -661,7 +662,7 @@ describe('OnDemandScansForm', () => {
       );
 
       createShallowComponent();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       hasSiteProfileAttributes();
     });

ee/spec/frontend/on_demand_scans_form/components/profile_selector/dast_profiles_selector_spec.js

@@ -2,6 +2,7 @@ import { GlSprintf, GlSkeletonLoader } from '@gitlab/ui';
 import { createLocalVue } from '@vue/test-utils';
 import { merge } from 'lodash';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import DastProfilesSelector from 'ee/on_demand_scans_form/components/profile_selector/dast_profiles_selector.vue';
 import ScannerProfileSelector from 'ee/on_demand_scans_form/components/profile_selector/scanner_profile_selector.vue';
 import SiteProfileSelector from 'ee/on_demand_scans_form/components/profile_selector/site_profile_selector.vue';
@@ -140,10 +141,10 @@ describe('EE - DAST Profiles Selector', () => {
   `(
     'profiles conflict prevention',
     ({ description, selectedScannerProfile, selectedSiteProfile, hasConflict }) => {
-      const setFormData = () => {
+      const setFormData = async () => {
         findScannerProfilesSelector().vm.$emit('input', selectedScannerProfile.id);
         findSiteProfilesSelector().vm.$emit('input', selectedSiteProfile.id);
-        return wrapper.vm.$nextTick();
+        await nextTick();
       };
 
       it(

ee/spec/frontend/on_demand_scans_form/components/scan_schedule_spec.js

 import { GlDatepicker, GlFormCheckbox, GlFormGroup } from '@gitlab/ui';
 import { merge } from 'lodash';
+import { nextTick } from 'vue';
 import mockTimezones from 'test_fixtures/timezones/full.json';
 import ScanSchedule from 'ee/on_demand_scans_form/components/scan_schedule.vue';
 import { SCAN_CADENCE_OPTIONS } from 'ee/on_demand_scans_form/settings';
@@ -22,11 +23,11 @@ describe('ScanSchedule', () => {
   const findCadenceInput = () => wrapper.findComponent(DropdownInput);
 
   // Helpers
-  const setTimeInputValue = (value) => {
+  const setTimeInputValue = async (value) => {
     const input = findTimeInput();
     input.element.value = value;
     input.trigger('input');
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const createComponent = (options = {}) => {
@@ -135,14 +136,14 @@ describe('ScanSchedule', () => {
 
     it('emits computed cadence value', async () => {
       findCadenceInput().vm.$emit('input', SCAN_CADENCE_OPTIONS[5].value);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted().input[1][0].cadence).toEqual({ unit: 'MONTH', duration: 6 });
     });
 
     it('deactives schedule when checkbox is unchecked', async () => {
       findCheckbox().vm.$emit('input', false);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted().input).toHaveLength(2);
       expect(wrapper.emitted().input[1]).toEqual([

ee/spec/frontend/oncall_schedule/add_edit_schedule_form_spec.js

 import { GlSearchBoxByType, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import mockTimezones from 'test_fixtures/timezones/full.json';
 import AddEditScheduleForm, {
   i18n,
@@ -97,7 +98,7 @@ describe('AddEditScheduleForm', () => {
       it('should filter options based on search term', async () => {
         const searchTerm = 'Pacific';
         findTimezoneSearchBox().vm.$emit('input', searchTerm);
-        await wrapper.vm.$nextTick();
+        await nextTick();
         const options = findDropdownOptions();
         expect(options).toHaveLength(1);
         expect(options.at(0).text()).toContain(searchTerm);
@@ -106,7 +107,7 @@ describe('AddEditScheduleForm', () => {
       it('should display no results item when there are no filter matches', async () => {
         const searchTerm = 'someUnexistentTZ';
         findTimezoneSearchBox().vm.$emit('input', searchTerm);
-        await wrapper.vm.$nextTick();
+        await nextTick();
         const options = findDropdownOptions();
         expect(options).toHaveLength(1);
         expect(options.at(0).text()).toContain(i18n.noResults);
@@ -116,7 +117,7 @@ describe('AddEditScheduleForm', () => {
     it('should add a checkmark to the selected option', async () => {
       const selectedTZOption = findDropdownOptions().at(0);
       selectedTZOption.vm.$emit('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(selectedTZOption.attributes('ischecked')).toBe('true');
     });
   });

ee/spec/frontend/oncall_schedule/delete_schedule_modal_spec.js

 import { GlModal, GlAlert, GlSprintf } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import DeleteScheduleModal, {
   i18n,
 } from 'ee/oncall_schedules/components/delete_schedule_modal.vue';
@@ -147,7 +148,7 @@ describe('DeleteScheduleModal', () => {
       createComponentWithApollo();
 
       await jest.runOnlyPendingTimers();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findModal().attributes('data-testid')).toBe(`delete-schedule-modal-${schedule.iid}`);
     });

ee/spec/frontend/oncall_schedule/rotations/components/add_edit_rotation_form_spec.js

 import { GlDropdownItem, GlTokenSelector, GlFormGroup, GlToggle } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { cloneDeep, merge } from 'lodash';
+import { nextTick } from 'vue';
 import AddEditRotationForm from 'ee/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue';
 import { formEmptyState } from 'ee/oncall_schedules/components/rotations/components/add_edit_rotation_modal.vue';
 import { LENGTH_ENUM } from 'ee/oncall_schedules/constants';
@@ -121,7 +122,7 @@ describe('AddEditRotationForm', () => {
           },
         },
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findStartsOnTimeOptions().at(time).props('isChecked')).toBe(true);
     });
   });
@@ -183,7 +184,7 @@ describe('AddEditRotationForm', () => {
         },
       });
       findEndDateToggle().vm.$emit('change', true);
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findEndsOnTimeOptions().at(time).props('isChecked')).toBe(true);
     });
   });

ee/spec/frontend/oncall_schedule/rotations/components/add_edit_rotation_modal_spec.js

 import { GlAlert, GlModal } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import AddEditRotationForm from 'ee/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue';
 import AddEditRotationModal, {
   i18n,
@@ -147,7 +148,7 @@ describe('AddEditRotationModal', () => {
         mutation: expect.any(Object),
         variables: { input: expect.objectContaining({ projectPath }) },
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findForm().props('form').name).toBe(undefined);
     });
 
@@ -279,7 +280,7 @@ describe('AddEditRotationModal', () => {
         it('should disable primary button when any of the fields is invalid', async () => {
           const form = findForm();
           form.vm.$emit('update-rotation-form', { type: 'name', value: 'lalal' });
-          await wrapper.vm.$nextTick();
+          await nextTick();
           expect(findModal().props('actionPrimary').attributes).toEqual(
             expect.arrayContaining([{ disabled: true }]),
           );
@@ -297,7 +298,7 @@ describe('AddEditRotationModal', () => {
             type: 'endsAt.date',
             value: new Date('12/10/2021'),
           });
-          await wrapper.vm.$nextTick();
+          await nextTick();
           expect(findModal().props('actionPrimary').attributes).toEqual(
             expect.arrayContaining([{ disabled: false }]),
           );

ee/spec/frontend/oncall_schedule/rotations/components/delete_rotation_modal_spec.js

 import { GlModal, GlAlert, GlSprintf } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import DeleteRotationModal, {
   i18n,
 } from 'ee/oncall_schedules/components/rotations/components/delete_rotation_modal.vue';
@@ -153,7 +154,7 @@ describe('DeleteRotationModal', () => {
       createComponentWithApollo();
 
       await jest.runOnlyPendingTimers();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findModal().attributes('data-testid')).toBe(`delete-rotation-modal-${rotation.id}`);
     });

ee/spec/frontend/operations/components/dashboard/project_header_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import ProjectHeader from 'ee/operations/components/dashboard/project_header.vue';
 import { trimText } from 'helpers/text_helper';
 import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
@@ -48,14 +49,13 @@ describe('project header component', () => {
       expect(button.attributes('title')).toBe('Remove card');
     });
 
-    it('emits project removal link on click', () => {
+    it('emits project removal link on click', async () => {
       wrapper.find('.js-remove-button').vm.$emit('click');
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted().remove).toStrictEqual([[mockOneProject.remove_path]]);
     });
   });
-  });
 
   describe('wrapped components', () => {
     describe('project avatar', () => {

ee/spec/frontend/pages/groups/saml_providers/saml_members/index_spec.js

 import { GlTable, GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import MembersApp from 'ee/pages/groups/saml_providers/saml_members/index.vue';
 import createInitialState from 'ee/pages/groups/saml_providers/saml_members/store/state';
@@ -66,12 +66,11 @@ describe('SAML providers members app', () => {
       expect(wrapper.findComponent(GlTable).exists()).toBe(true);
     });
 
-    it('requests next page when pagination component performs change', () => {
+    it('requests next page when pagination component performs change', async () => {
       const changeFn = wrapper.findComponent(TablePagination).props('change');
       changeFn(2);
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(fetchPageMock).toHaveBeenCalledWith(expect.anything(), 2);
     });
   });
-  });
 });

ee/spec/frontend/projects/merge_requests/blocking_mr_input_root_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import BlockingMrInputRoot from 'ee/projects/merge_requests/blocking_mr_input_root.vue';
 import RelatedIssuableInput from '~/related_issues/components/related_issuable_input.vue';
 
@@ -86,24 +87,22 @@ describe('blocking mr input root', () => {
         expectShouldUpdateRefsToBe(false);
       });
 
-      it('is true after a ref is removed', () => {
+      it('is true after a ref is removed', async () => {
         createComponent({ existingRefs: ['!1'] });
         removeRef(0);
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         expectShouldUpdateRefsToBe(true);
       });
-      });
 
-      it('is true after a ref is added', () => {
+      it('is true after a ref is added', async () => {
         createComponent();
         addTokenizedInput('foo');
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expectShouldUpdateRefsToBe(true);
       });
     });
-    });
 
     describe('remove_hidden_blocking_merge_requests', () => {
       const expectRemoveHiddenBlockingMergeRequestsToBe = createHiddenInputExpectation(
@@ -129,14 +128,13 @@ describe('blocking mr input root', () => {
         expectRemoveHiddenBlockingMergeRequestsToBe(false);
       });
 
-      it('is false when ref has been removed', () => {
+      it('is false when ref has been removed', async () => {
         makeComponentWithHiddenMrs();
         removeRef(2);
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         expectRemoveHiddenBlockingMergeRequestsToBe(true);
       });
     });
   });
-  });
 });

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

 import { GlToggle } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAxiosAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import CcValidationRequiredAlert from 'ee_component/billings/components/cc_validation_required_alert.vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -67,7 +68,7 @@ describe('projects/settings/components/shared_runners', () => {
     it('credit card alert should be hidden after dismiss', async () => {
       findCcValidationRequiredAlert().vm.$emit('dismiss');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findCcValidationRequiredAlert().exists()).toBe(false);
     });

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

 import { GlFormInput, GlButton, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import Vuex from 'vuex';
@@ -47,7 +47,7 @@ describe('RelatedItemsTree', () => {
           expect(wrapper.vm.isSubmitButtonDisabled).toBe(true);
         });
 
-        it('returns false when either `inputValue` prop is non-empty or `isSubmitting` prop is false', () => {
+        it('returns false when either `inputValue` prop is non-empty or `isSubmitting` prop is false', async () => {
           const wrapperWithInput = createComponent(false);
 
           // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
@@ -56,24 +56,22 @@ describe('RelatedItemsTree', () => {
             inputValue: 'foo',
           });
 
-          return wrapperWithInput.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapperWithInput.vm.isSubmitButtonDisabled).toBe(false);
 
           wrapperWithInput.destroy();
         });
       });
-      });
 
       describe('buttonLabel', () => {
-        it('returns string "Creating epic" when `isSubmitting` prop is true', () => {
+        it('returns string "Creating epic" when `isSubmitting` prop is true', async () => {
           const wrapperSubmitting = createComponent(true);
 
-          return wrapperSubmitting.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapperSubmitting.vm.buttonLabel).toBe('Creating epic');
 
           wrapperSubmitting.destroy();
         });
-        });
 
         it('returns string "Create epic" when `isSubmitting` prop is false', () => {
           expect(wrapper.vm.buttonLabel).toBe('Create epic');

ee/spec/frontend/related_items_tree/components/create_issue_form_spec.js

@@ -9,7 +9,7 @@ import {
   GlDropdownSectionHeader,
 } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import mockProjects from 'test_fixtures_static/projects.json';
@@ -72,17 +72,16 @@ describe('CreateIssueForm', () => {
 
   describe('computed', () => {
     describe('dropdownToggleText', () => {
-      it('returns project name with name_with_namespace when `selectedProject` is not empty', () => {
+      it('returns project name with name_with_namespace when `selectedProject` is not empty', 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({
           selectedProject: mockProjects[0],
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.dropdownToggleText).toBe(mockProjects[0].name_with_namespace);
       });
-      });
       it('returns project name with namespace when `selectedProject` is not empty and dont have name_with_namespace', async () => {
         const project = { ...mockProjects[0], name_with_namespace: undefined, namespace: 'foo' };
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
@@ -91,7 +90,7 @@ describe('CreateIssueForm', () => {
           selectedProject: project,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.dropdownToggleText).toBe(project.namespace);
       });
@@ -100,17 +99,16 @@ describe('CreateIssueForm', () => {
 
   describe('methods', () => {
     describe('cancel', () => {
-      it('emits event `cancel` on component', () => {
+      it('emits event `cancel` on component', async () => {
         wrapper.vm.cancel();
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.emitted('cancel')).toBeTruthy();
       });
     });
-    });
 
     describe('createIssue', () => {
-      it('emits event `submit` on component when `selectedProject` is not empty', () => {
+      it('emits event `submit` on component when `selectedProject` is not empty', 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({
@@ -125,13 +123,12 @@ describe('CreateIssueForm', () => {
 
         wrapper.vm.createIssue();
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.emitted('submit')[0]).toEqual(
           expect.arrayContaining([{ issuesEndpoint: 'foo', title: 'Some issue' }]),
         );
       });
     });
-    });
 
     describe('handleDropdownShow', () => {
       it('sets `searchKey` prop to empty string and calls action `fetchProjects`', () => {
@@ -164,10 +161,10 @@ describe('CreateIssueForm', () => {
       expect(projectsDropdownButton.props('text')).toBe('Select a project');
     });
 
-    it('renders Projects dropdown contents', () => {
+    it('renders Projects dropdown contents', async () => {
       wrapper.vm.$store.dispatch('receiveProjectsSuccess', mockProjects);
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const projectsDropdownButton = wrapper.findComponent(GlDropdown);
       const dropdownItems = projectsDropdownButton.findAllComponents(GlDropdownItem);
       const dropdownItem = dropdownItems.at(0);
@@ -179,7 +176,6 @@ describe('CreateIssueForm', () => {
       expect(dropdownItem.text()).toContain(mockProjects[0].namespace.name);
       expect(dropdownItem.findComponent(ProjectAvatar).exists()).toBe(true);
     });
-    });
 
     it('renders dropdown contents without recent items when `recentItems` are empty', () => {
       const projectsDropdownButton = wrapper.findComponent(GlDropdown);
@@ -195,7 +191,7 @@ describe('CreateIssueForm', () => {
 
       wrapper.vm.setRecentItems();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const projectsDropdownButton = wrapper.findComponent(GlDropdown);
 
@@ -216,7 +212,7 @@ describe('CreateIssueForm', () => {
 
       wrapper.vm.setRecentItems();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       const projectsDropdownButton = wrapper.findComponent(GlDropdown);
 
@@ -229,7 +225,7 @@ describe('CreateIssueForm', () => {
       removeLocalstorageFrequentItems();
     });
 
-    it('renders Projects dropdown contents containing only matching project when searchKey is provided', () => {
+    it('renders Projects dropdown contents containing only matching project when searchKey is provided', async () => {
       const searchKey = 'Underscore';
       const filteredMockProjects = mockProjects.filter((project) => project.name === searchKey);
       jest.spyOn(wrapper.vm, 'fetchProjects').mockImplementation(jest.fn());
@@ -242,17 +238,12 @@ describe('CreateIssueForm', () => {
         searchKey,
       });
 
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          wrapper.vm.$store.dispatch('receiveProjectsSuccess', filteredMockProjects);
-        })
-        .then(() => {
+      await nextTick();
+      await wrapper.vm.$store.dispatch('receiveProjectsSuccess', filteredMockProjects);
       expect(wrapper.findAllComponents(GlDropdownItem)).toHaveLength(1);
     });
-    });
 
-    it('renders Projects dropdown contents containing string string "No matches found" when searchKey provided does not match any project', () => {
+    it('renders Projects dropdown contents containing string string "No matches found" when searchKey provided does not match any project', async () => {
       const searchKey = "this-project-shouldn't exist";
       const filteredMockProjects = mockProjects.filter((project) => project.name === searchKey);
       jest.spyOn(wrapper.vm, 'fetchProjects').mockImplementation(jest.fn());
@@ -265,15 +256,10 @@ describe('CreateIssueForm', () => {
         searchKey,
       });
 
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
-          wrapper.vm.$store.dispatch('receiveProjectsSuccess', filteredMockProjects);
-        })
-        .then(() => {
+      await nextTick();
+      await wrapper.vm.$store.dispatch('receiveProjectsSuccess', filteredMockProjects);
       expect(wrapper.find('.dropdown-contents').text()).toContain('No matches found');
     });
-    });
 
     it('renders `Create issue` button', () => {
       const createIssueButton = wrapper.findAllComponents(GlButton).at(0);
@@ -282,22 +268,21 @@ describe('CreateIssueForm', () => {
       expect(createIssueButton.text()).toBe('Create issue');
     });
 
-    it('renders loading icon within `Create issue` button when `itemCreateInProgress` is true', () => {
+    it('renders loading icon within `Create issue` button when `itemCreateInProgress` is true', async () => {
       wrapper.vm.$store.dispatch('requestCreateItem');
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const createIssueButton = wrapper.findAllComponents(GlButton).at(0);
 
       expect(createIssueButton.exists()).toBe(true);
       expect(createIssueButton.props('disabled')).toBe(true);
       expect(createIssueButton.props('loading')).toBe(true);
     });
-    });
 
-    it('renders loading icon within `Create issue` button when `recentItemFetchInProgress` is true', () => {
+    it('renders loading icon within `Create issue` button when `recentItemFetchInProgress` is true', async () => {
       wrapper.vm.recentItemFetchInProgress = true;
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const createIssueButton = wrapper.findAllComponents(GlButton).at(0);
 
       expect(createIssueButton.exists()).toBe(true);
@@ -306,7 +291,6 @@ describe('CreateIssueForm', () => {
         loading: true,
       });
     });
-    });
 
     it('renders `Cancel` button', () => {
       const cancelButton = wrapper.findAllComponents(GlButton).at(1);

ee/spec/frontend/related_items_tree/components/related_items_tree_app_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import Vuex from 'vuex';
 
@@ -201,45 +201,42 @@ describe('RelatedItemsTreeApp', () => {
       });
     });
 
-    it('renders loading icon when `state.itemsFetchInProgress` prop is true', () => {
+    it('renders loading icon when `state.itemsFetchInProgress` prop is true', async () => {
       wrapper.vm.$store.dispatch('requestItems', {
         parentItem: mockParentItem,
         isSubItem: false,
       });
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.findComponent(GlLoadingIcon).isVisible()).toBe(true);
     });
-    });
 
-    it('renders tree container element when `state.itemsFetchInProgress` prop is false', () =>
-      wrapper.vm.$nextTick().then(() => {
+    it('renders tree container element when `state.itemsFetchInProgress` prop is false', async () => {
+      await nextTick();
       expect(wrapper.find('.related-items-tree').isVisible()).toBe(true);
-      }));
+    });
 
-    it('renders tree container element with `disabled-content` class when `state.itemsFetchInProgress` prop is false and `state.itemAddInProgress` or `state.itemCreateInProgress` is true', () => {
+    it('renders tree container element with `disabled-content` class when `state.itemsFetchInProgress` prop is false and `state.itemAddInProgress` or `state.itemCreateInProgress` is true', async () => {
       wrapper.vm.$store.dispatch('requestAddItem');
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.find('.related-items-tree.disabled-content').isVisible()).toBe(true);
     });
-    });
 
-    it('renders tree header component', () =>
-      wrapper.vm.$nextTick().then(() => {
+    it('renders tree header component', async () => {
+      await nextTick();
       expect(wrapper.findComponent(RelatedItemsTreeHeader).isVisible()).toBe(true);
-      }));
+    });
 
-    it('renders item add/create form container element', () => {
+    it('renders item add/create form container element', async () => {
       wrapper.vm.$store.dispatch('toggleAddItemForm', {
         toggleState: true,
         issuableType: issuableTypesMap.EPIC,
       });
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.find('.add-item-form-container').isVisible()).toBe(true);
     });
-    });
 
     it('does not render create issue form', () => {
       expect(findCreateIssueForm().exists()).toBe(false);
@@ -265,7 +262,7 @@ describe('RelatedItemsTreeApp', () => {
         wrapper.vm.$store.state.autoCompleteIssues = autoCompleteIssues;
         wrapper.vm.$store.state.autoCompleteEpics = autoCompleteEpics;
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findAddItemForm().props()).toMatchObject({
           autoCompleteIssues: expectedAutoCompleteIssues,

ee/spec/frontend/related_items_tree/components/related_items_tree_header_spec.js

 import { GlTooltip, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import EpicHealthStatus from 'ee/related_items_tree/components/epic_health_status.vue';
@@ -222,13 +222,13 @@ describe('RelatedItemsTree', () => {
       });
 
       describe('when issuable-health-status feature is not available', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           wrapper.vm.$store.commit('SET_INITIAL_CONFIG', {
             ...mockInitialConfig,
             allowIssuableHealthStatus: false,
           });
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('does not render health status', () => {
@@ -237,13 +237,13 @@ describe('RelatedItemsTree', () => {
       });
 
       describe('when issuable-health-status feature is available', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           wrapper.vm.$store.commit('SET_INITIAL_CONFIG', {
             ...mockInitialConfig,
             allowIssuableHealthStatus: true,
           });
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('does not render health status', () => {

ee/spec/frontend/related_items_tree/components/state_tooltip_spec.js

 import { GlTooltip } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import StateTooltip from 'ee/related_items_tree/components/state_tooltip.vue';
 
 // Ensure that mock dates dynamically computed from today
@@ -48,26 +49,24 @@ describe('RelatedItemsTree', () => {
 
     describe('computed', () => {
       describe('stateText', () => {
-        it('returns string `Created` when `isOpen` prop is true', () => {
+        it('returns string `Created` when `isOpen` prop is true', async () => {
           wrapper.setProps({
             isOpen: true,
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapper.vm.stateText).toBe('Created');
         });
-        });
 
-        it('returns string `Closed` when `isOpen` prop is false', () => {
+        it('returns string `Closed` when `isOpen` prop is false', async () => {
           wrapper.setProps({
             isOpen: false,
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapper.vm.stateText).toBe('Closed');
         });
       });
-      });
 
       describe('createdAtInWords', () => {
         it('returns string containing date in words for `createdAt` prop', () => {
@@ -94,49 +93,45 @@ describe('RelatedItemsTree', () => {
       });
 
       describe('stateTimeInWords', () => {
-        it('returns string using `createdAtInWords` prop when `isOpen` is true', () => {
+        it('returns string using `createdAtInWords` prop when `isOpen` is true', async () => {
           wrapper.setProps({
             isOpen: true,
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapper.vm.stateTimeInWords).toBe('2 years ago');
         });
-        });
 
-        it('returns string using `closedAtInWords` prop when `isOpen` is false', () => {
+        it('returns string using `closedAtInWords` prop when `isOpen` is false', async () => {
           wrapper.setProps({
             isOpen: false,
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapper.vm.stateTimeInWords).toBe('1 year ago');
         });
       });
-      });
 
       describe('stateTimestamp', () => {
-        it('returns string using `createdAtTimestamp` prop when `isOpen` is true', () => {
+        it('returns string using `createdAtTimestamp` prop when `isOpen` is true', async () => {
           wrapper.setProps({
             isOpen: true,
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapper.vm.stateTimestamp).toContain(mockCreatedAtYear);
         });
-        });
 
-        it('returns string using `closedAtInWords` prop when `isOpen` is false', () => {
+        it('returns string using `closedAtInWords` prop when `isOpen` is false', async () => {
           wrapper.setProps({
             isOpen: false,
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapper.vm.stateTimestamp).toContain(mockClosedAtYear);
         });
       });
     });
-    });
 
     describe('methods', () => {
       describe('getTimestamp', () => {

ee/spec/frontend/related_items_tree/components/tree_item_body_spec.js

@@ -94,10 +94,10 @@ describe('RelatedItemsTree', () => {
         allowIssuableHealthStatus: true,
       });
     };
-    const setShowLabels = (isShowingLabels) => {
+    const setShowLabels = async (isShowingLabels) => {
       wrapper.vm.$store.dispatch('setShowLabels', isShowingLabels);
 
-      return nextTick();
+      await nextTick();
     };
 
     beforeEach(() => {
@@ -119,62 +119,57 @@ describe('RelatedItemsTree', () => {
       describe('itemWebPath', () => {
         const mockPath = '/foo/bar';
 
-        it('returns value of `item.path`', () => {
+        it('returns value of `item.path`', async () => {
           wrapper.setProps({
             item: { ...mockItem, path: mockPath, webPath: undefined },
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapper.vm.itemWebPath).toBe(mockPath);
         });
-        });
 
-        it('returns value of `item.webPath` when `item.path` is undefined', () => {
+        it('returns value of `item.webPath` when `item.path` is undefined', async () => {
           wrapper.setProps({
             item: { ...mockItem, path: undefined, webPath: mockPath },
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapper.vm.itemWebPath).toBe(mockPath);
         });
       });
-      });
 
       describe('isOpen', () => {
-        it('returns true when `item.state` value is `opened`', () => {
+        it('returns true when `item.state` value is `opened`', async () => {
           wrapper.setProps({
             item: { ...mockItem, state: ChildState.Open },
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(findIssueIcon().attributes('name')).toBe('issues');
         });
       });
-      });
 
       describe('isBlocked', () => {
-        it('returns true when `item.blocked` value is `true`', () => {
+        it('returns true when `item.blocked` value is `true`', async () => {
           wrapper.setProps({
             item: { ...mockItem, blocked: true },
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(findIssueIcon().attributes('name')).toBe('issue-block');
         });
       });
-      });
 
       describe('isClosed', () => {
-        it('returns true when `item.state` value is `closed`', () => {
+        it('returns true when `item.state` value is `closed`', async () => {
           wrapper.setProps({
             item: { ...mockItem, state: ChildState.Closed },
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(findIssueIcon().attributes('name')).toBe('issue-closed');
         });
       });
-      });
 
       describe('hasMilestone', () => {
         it('returns true when `item.milestone` is defined and has values', () => {
@@ -219,62 +214,57 @@ describe('RelatedItemsTree', () => {
       });
 
       describe('stateText', () => {
-        it('returns string `Opened` when `item.state` value is `opened`', () => {
+        it('returns string `Opened` when `item.state` value is `opened`', async () => {
           wrapper.setProps({
             item: { ...mockItem, state: ChildState.Open },
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(findIssueIcon().props('ariaLabel')).toBe('Opened');
         });
-        });
 
-        it('returns string `Closed` when `item.state` value is `closed`', () => {
+        it('returns string `Closed` when `item.state` value is `closed`', async () => {
           wrapper.setProps({
             item: { ...mockItem, state: ChildState.Closed },
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(findIssueIcon().props('ariaLabel')).toBe('Closed');
         });
       });
-      });
 
       describe('stateIconClass', () => {
-        it('returns string `issue-token-state-icon-open gl-text-green-500` when `item.state` value is `opened`', () => {
+        it('returns string `issue-token-state-icon-open gl-text-green-500` when `item.state` value is `opened`', async () => {
           wrapper.setProps({
             item: { ...mockItem, state: ChildState.Open },
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(findIssueIcon().attributes('class')).toContain(
             'issue-token-state-icon-open gl-text-green-500',
           );
         });
-        });
 
-        it('return string `gl-text-red-500` when `item.blocked` value is `true`', () => {
+        it('return string `gl-text-red-500` when `item.blocked` value is `true`', async () => {
           wrapper.setProps({
             item: { ...mockItem, blocked: true },
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(findIssueIcon().attributes('class')).toContain('gl-text-red-500');
         });
-        });
 
-        it('returns string `issue-token-state-icon-closed gl-text-blue-500` when `item.state` value is `closed`', () => {
+        it('returns string `issue-token-state-icon-closed gl-text-blue-500` when `item.state` value is `closed`', async () => {
           wrapper.setProps({
             item: { ...mockItem, state: ChildState.Closed },
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(findIssueIcon().attributes('class')).toContain(
             'issue-token-state-icon-closed gl-text-blue-500',
           );
         });
       });
-      });
 
       describe('itemHierarchy', () => {
         it('returns string containing item id and item path', () => {
@@ -288,16 +278,15 @@ describe('RelatedItemsTree', () => {
           expect(findLink().attributes('href')).toBe(mockItem.webPath);
         });
 
-        it('returns `null` when `itemWebPath` is empty', () => {
+        it('returns `null` when `itemWebPath` is empty', async () => {
           wrapper.setProps({
             item: { ...mockItem, webPath: '' },
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(findLink().attributes('href')).toBeUndefined();
         });
       });
-      });
 
       describe.each`
         createItem         | itemType   | isEpic
@@ -333,7 +322,7 @@ describe('RelatedItemsTree', () => {
               item: mockItem,
             });
 
-            await wrapper.vm.$nextTick();
+            await nextTick();
 
             expect(findIssueIcon().props('name')).toBe(stateIconName);
           });
@@ -440,7 +429,7 @@ describe('RelatedItemsTree', () => {
           },
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.findComponent(ItemDueDate).props('closed')).toBe(true);
       });
@@ -459,7 +448,7 @@ describe('RelatedItemsTree', () => {
           },
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         const weight = wrapper.findComponent(ItemWeight);
 
@@ -503,7 +492,7 @@ describe('RelatedItemsTree', () => {
 
           enableHealthStatus();
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(findIssueHealthStatus().exists()).toBe(true);
         });

ee/spec/frontend/related_items_tree/components/tree_item_remove_modal_spec.js

 import { GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import TreeItemRemoveModal from 'ee/related_items_tree/components/tree_item_remove_modal.vue';
@@ -65,57 +65,53 @@ describe('RelatedItemsTree', () => {
       });
 
       describe('modalTitle', () => {
-        it('returns title for modal when item.type is `Epic`', () => {
+        it('returns title for modal when item.type is `Epic`', async () => {
           wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
             parentItem: mockParentItem,
             item: { ...mockItem, type: ChildType.Epic },
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapper.vm.modalTitle).toBe('Remove epic');
         });
-        });
 
-        it('returns title for modal when item.type is `Issue`', () => {
+        it('returns title for modal when item.type is `Issue`', async () => {
           wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
             parentItem: mockParentItem,
             item: mockItem,
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapper.vm.modalTitle).toBe('Remove issue');
         });
       });
-      });
 
       describe('modalBody', () => {
-        it('returns body text for modal when item.type is `Epic`', () => {
+        it('returns body text for modal when item.type is `Epic`', async () => {
           wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
             parentItem: mockParentItem,
             item: { ...mockItem, type: ChildType.Epic },
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapper.vm.modalBody).toBe(
             'This will also remove any descendents of <b>Nostrum cum mollitia quia recusandae fugit deleniti voluptatem delectus.</b> from <b>Some sample epic</b>. Are you sure?',
           );
         });
-        });
 
-        it('returns body text for modal when item.type is `Issue`', () => {
+        it('returns body text for modal when item.type is `Issue`', async () => {
           wrapper.vm.$store.dispatch('setRemoveItemModalProps', {
             parentItem: mockParentItem,
             item: mockItem,
           });
 
-          return wrapper.vm.$nextTick(() => {
+          await nextTick();
           expect(wrapper.vm.modalBody).toBe(
             'Are you sure you want to remove <b>Nostrum cum mollitia quia recusandae fugit deleniti voluptatem delectus.</b> from <b>Some sample epic</b>?',
           );
         });
       });
     });
-    });
 
     describe('template', () => {
       it('renders modal component', () => {

ee/spec/frontend/related_items_tree/components/tree_item_spec.js

 import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import TreeItem from 'ee/related_items_tree/components/tree_item.vue';
@@ -153,18 +153,17 @@ describe('RelatedItemsTree', () => {
         expect(collapsedIcon.props('name')).toBe('chevron-right');
       });
 
-      it('renders loading icon when item expand is in progress', () => {
+      it('renders loading icon when item expand is in progress', async () => {
         wrapper.vm.$store.dispatch('requestItems', {
           parentItem: mockItem,
           isSubItem: true,
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         const loadingIcon = wrapper.findComponent(GlLoadingIcon);
 
         expect(loadingIcon.isVisible()).toBe(true);
       });
-      });
 
       it('renders tree item body component', () => {
         const itemBody = wrapper.findComponent(TreeItemBody);

ee/spec/frontend/requirements/components/import_requirements_modal_spec.js

 import { GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import ImportRequirementsModal from 'ee/requirements/components/import_requirements_modal.vue';
 
 const createComponent = ({ projectPath = 'gitLabTest' } = {}) =>
@@ -39,7 +40,7 @@ describe('ImportRequirementsModal', () => {
 
   describe('methods', () => {
     describe('handleCSVFile', () => {
-      it('sets the first file selected', () => {
+      it('sets the first file selected', async () => {
         const file = 'some file';
 
         const event = {
@@ -49,12 +50,11 @@ describe('ImportRequirementsModal', () => {
         };
         wrapper.vm.handleCSVFile(event);
 
-        wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.file).toBe(file);
       });
     });
   });
-  });
 
   describe('template', () => {
     it('GlModal open click emits file and projectPath', () => {

ee/spec/frontend/requirements/components/requirement_item_spec.js

 import { GlLink, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import RequirementItem from 'ee/requirements/components/requirement_item.vue';
 import RequirementStatusBadge from 'ee/requirements/components/requirement_status_badge.vue';
 
@@ -34,10 +35,10 @@ describe('RequirementItem', () => {
 
   describe('methods', () => {
     describe('handleArchiveClick', () => {
-      it('emits `archiveClick` event on component with object containing `requirement.iid` & `state` as "ARCHIVED" as param', () => {
+      it('emits `archiveClick` event on component with object containing `requirement.iid` & `state` as "ARCHIVED" as param', async () => {
         wrapper.vm.handleArchiveClick();
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.emitted('archiveClick')).toBeTruthy();
         expect(wrapper.emitted('archiveClick')[0]).toEqual([
           {
@@ -47,13 +48,12 @@ describe('RequirementItem', () => {
         ]);
       });
     });
-    });
 
     describe('handleReopenClick', () => {
-      it('emits `reopenClick` event on component with object containing `requirement.iid` & `state` as "OPENED" as param', () => {
+      it('emits `reopenClick` event on component with object containing `requirement.iid` & `state` as "OPENED" as param', async () => {
         wrapperArchived.vm.handleReopenClick();
 
-        return wrapperArchived.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapperArchived.emitted('reopenClick')).toBeTruthy();
         expect(wrapperArchived.emitted('reopenClick')[0]).toEqual([
           {
@@ -64,22 +64,20 @@ describe('RequirementItem', () => {
       });
     });
   });
-  });
 
   describe('template', () => {
     it('renders component container element containing class `requirement`', () => {
       expect(wrapper.classes()).toContain('requirement');
     });
 
-    it('renders component container element with class `disabled-content` when `stateChangeRequestActive` prop is true', () => {
+    it('renders component container element with class `disabled-content` when `stateChangeRequestActive` prop is true', async () => {
       wrapper.setProps({
         stateChangeRequestActive: true,
       });
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(wrapper.classes()).toContain('disabled-content');
     });
-    });
 
     it('emits `show-click` event with requirement as param', () => {
       wrapper.trigger('click');
@@ -189,7 +187,7 @@ describe('RequirementItem', () => {
       expect(reopenButton.text()).toBe('Reopen');
     });
 
-    it('does not render `Reopen` button when current requirement is archived and `requirement.userPermissions.adminRequirement` is false', () => {
+    it('does not render `Reopen` button when current requirement is archived and `requirement.userPermissions.adminRequirement` is false', async () => {
       wrapperArchived.setProps({
         requirement: {
           ...requirementArchived,
@@ -200,9 +198,8 @@ describe('RequirementItem', () => {
         },
       });
 
-      return wrapperArchived.vm.$nextTick(() => {
+      await nextTick();
       expect(wrapperArchived.find('.controls .requirement-reopen').exists()).toBe(false);
     });
   });
-  });
 });

ee/spec/frontend/requirements/components/requirement_status_badge_spec.js

 import { GlBadge, GlIcon, GlTooltip } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import RequirementStatusBadge from 'ee/requirements/components/requirement_status_badge.vue';
 import { mockTestReport, mockTestReportFailed, mockTestReportMissing } from '../mock_data';
 
@@ -49,22 +50,21 @@ describe('RequirementStatusBadge', () => {
         expect(wrapper.vm.testReportBadge).toEqual(successBadgeProps);
       });
 
-      it('returns object containing variant, icon, text and tooltipTitle when status is "FAILED"', () => {
+      it('returns object containing variant, icon, text and tooltipTitle when status is "FAILED"', async () => {
         wrapper.setProps({
           testReport: mockTestReportFailed,
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.testReportBadge).toEqual(failedBadgeProps);
       });
-      });
 
-      it('returns object containing variant, icon, text and tooltipTitle when status missing', () => {
+      it('returns object containing variant, icon, text and tooltipTitle when status missing', async () => {
         wrapper.setProps({
           testReport: mockTestReportMissing,
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.testReportBadge).toEqual({
           variant: 'warning',
           icon: 'status_warning',
@@ -74,7 +74,6 @@ describe('RequirementStatusBadge', () => {
       });
     });
   });
-  });
 
   describe('template', () => {
     describe.each`

ee/spec/frontend/requirements/components/requirements_empty_state_spec.js

 import { GlEmptyState, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import RequirementsEmptyState from 'ee/requirements/components/requirements_empty_state.vue';
 import { FilterState } from 'ee/requirements/constants';
 
@@ -33,7 +34,7 @@ describe('RequirementsEmptyState', () => {
 
   describe('computed', () => {
     describe('emptyStateTitle', () => {
-      it('returns string "There are no open requirements" when value of `filterBy` prop is "OPENED" and project has some requirements', () => {
+      it('returns string "There are no open requirements" when value of `filterBy` prop is "OPENED" and project has some requirements', async () => {
         wrapper.setProps({
           requirementsCount: {
             OPENED: 0,
@@ -42,12 +43,11 @@ describe('RequirementsEmptyState', () => {
           },
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.emptyStateTitle).toBe('There are no open requirements');
       });
-      });
 
-      it('returns string "There are no archived requirements" when value of `filterBy` prop is "ARCHIVED" and project has some requirements', () => {
+      it('returns string "There are no archived requirements" when value of `filterBy` prop is "ARCHIVED" and project has some requirements', async () => {
         wrapper.setProps({
           filterBy: FilterState.archived,
           requirementsCount: {
@@ -57,10 +57,9 @@ describe('RequirementsEmptyState', () => {
           },
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.emptyStateTitle).toBe('There are no archived requirements');
       });
-      });
 
       it('returns a generic string when project has no requirements', () => {
         expect(wrapper.vm.emptyStateTitle).toBe(
@@ -76,7 +75,7 @@ describe('RequirementsEmptyState', () => {
         );
       });
 
-      it('returns a null when project has some requirements', () => {
+      it('returns a null when project has some requirements', async () => {
         wrapper.setProps({
           requirementsCount: {
             OPENED: 2,
@@ -85,12 +84,11 @@ describe('RequirementsEmptyState', () => {
           },
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.emptyStateDescription).toBeNull();
       });
     });
   });
-  });
 
   describe('template', () => {
     it('renders empty state element', () => {
@@ -109,7 +107,7 @@ describe('RequirementsEmptyState', () => {
       expect(newReqButton.text()).toBe('New requirement');
     });
 
-    it('does not render new requirement button when project some requirements', () => {
+    it('does not render new requirement button when project some requirements', async () => {
       wrapper.setProps({
         requirementsCount: {
           OPENED: 2,
@@ -118,23 +116,21 @@ describe('RequirementsEmptyState', () => {
         },
       });
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const newReqButton = wrapper.findComponent(GlButton);
 
       expect(newReqButton.exists()).toBe(false);
     });
-    });
 
-    it('does not render new requirement button when user is not authenticated', () => {
+    it('does not render new requirement button when user is not authenticated', async () => {
       wrapper = createComponent({
         canCreateRequirement: false,
       });
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const newReqButton = wrapper.findComponent(GlButton);
 
       expect(newReqButton.exists()).toBe(false);
     });
   });
-  });
 });

ee/spec/frontend/requirements/components/requirements_loading_spec.js

 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import RequirementsLoading from 'ee/requirements/components/requirements_loading.vue';
 
 import { FilterState, mockRequirementsCount } from '../mock_data';
@@ -50,17 +51,16 @@ describe('RequirementsLoading', () => {
         expect(wrapper.vm.loaderCount).toBe(2);
       });
 
-      it('returns value of remainder requirements for last page when current page is the last page total requirements are more than DEFAULT_PAGE_SIZE', () => {
+      it('returns value of remainder requirements for last page when current page is the last page total requirements are more than DEFAULT_PAGE_SIZE', async () => {
         wrapper.setProps({
           currentPage: 2,
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.loaderCount).toBe(1);
       });
-      });
 
-      it('returns value DEFAULT_PAGE_SIZE when current page is the last page total requirements are less than DEFAULT_PAGE_SIZE', () => {
+      it('returns value DEFAULT_PAGE_SIZE when current page is the last page total requirements are less than DEFAULT_PAGE_SIZE', async () => {
         wrapper.setProps({
           currentPage: 1,
           requirementsCount: {
@@ -70,12 +70,11 @@ describe('RequirementsLoading', () => {
           },
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.loaderCount).toBe(1);
       });
     });
   });
-  });
 
   describe('template', () => {
     it('renders gl-skeleton-loading component project has some requirements and current tab has requirements to show', () => {
@@ -87,7 +86,7 @@ describe('RequirementsLoading', () => {
       expect(loaders.at(0).props('lines')).toBe(2);
     });
 
-    it('renders gl-loading-icon component project has no requirements and current tab has nothing to show', () => {
+    it('renders gl-loading-icon component project has no requirements and current tab has nothing to show', async () => {
       wrapper.setProps({
         requirementsCount: {
           OPENED: 0,
@@ -96,10 +95,9 @@ describe('RequirementsLoading', () => {
         },
       });
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(wrapper.find('.requirements-list-loading').exists()).toBe(false);
       expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
   });
-  });
 });

ee/spec/frontend/requirements/components/requirements_tabs_spec.js

 import { GlTab, GlBadge, GlButton, GlTabs } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import RequirementsTabs from 'ee/requirements/components/requirements_tabs.vue';
 import { FilterState } from 'ee/requirements/constants';
 
@@ -64,50 +65,47 @@ describe('RequirementsTabs', () => {
       expect(tabEl.attributes('active')).toBeDefined();
     });
 
-    it('renders "New requirement" button when current tab is "Open" tab', () => {
+    it('renders "New requirement" button when current tab is "Open" tab', async () => {
       wrapper.setProps({
         filterBy: FilterState.opened,
       });
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const buttonEl = wrapper.findAllComponents(GlButton).at(2);
 
       expect(buttonEl.exists()).toBe(true);
       expect(buttonEl.text()).toBe('New requirement');
     });
-    });
 
-    it('does not render "New requirement" button when current tab is not "Open" tab', () => {
+    it('does not render "New requirement" button when current tab is not "Open" tab', async () => {
       wrapper.setProps({
         filterBy: FilterState.archived,
       });
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const buttonEl = wrapper.findComponent(GlButton);
 
       expect(buttonEl.exists()).toBe(false);
     });
-    });
 
-    it('does not render "New requirement" button when `canCreateRequirement` prop is false', () => {
+    it('does not render "New requirement" button when `canCreateRequirement` prop is false', async () => {
       wrapper.setProps({
         filterBy: FilterState.opened,
         canCreateRequirement: false,
       });
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const buttonEl = wrapper.findComponent(GlButton);
 
       expect(buttonEl.exists()).toBe(false);
     });
-    });
 
-    it('disables "New requirement" button when `showCreateForm` is true', () => {
+    it('disables "New requirement" button when `showCreateForm` is true', async () => {
       wrapper.setProps({
         showCreateForm: true,
       });
 
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       const buttonEl = wrapper.findAllComponents(GlButton);
 
       expect(buttonEl.at(0).props('disabled')).toBe(true);
@@ -115,5 +113,4 @@ describe('RequirementsTabs', () => {
       expect(buttonEl.at(2).props('disabled')).toBe(true);
     });
   });
-  });
 });

ee/spec/frontend/requirements/mixins/requirement_meta_spec.js

 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import RequirementItem from 'ee/requirements/components/requirement_item.vue';
 import { FilterState } from 'ee/requirements/constants';
 
@@ -51,7 +52,7 @@ describe('RequirementMeta Mixin', () => {
           },
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.isArchived).toBe(true);
       });

ee/spec/frontend/roadmap/components/current_day_indicator_spec.js

 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import CurrentDayIndicator from 'ee/roadmap/components/current_day_indicator.vue';
 import { DATE_RANGES, PRESET_TYPES } from 'ee/roadmap/constants';
 import { getTimeframeForRangeType } from 'ee/roadmap/utils/roadmap_utils';
@@ -54,7 +55,7 @@ describe('CurrentDayIndicator', () => {
 
   describe('computed', () => {
     describe('hasToday', () => {
-      it('returns true when presetType is QUARTERS and currentDate is within current quarter', () => {
+      it('returns true when presetType is QUARTERS and currentDate is within current quarter', 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({
@@ -66,12 +67,11 @@ describe('CurrentDayIndicator', () => {
           timeframeItem: mockTimeframeQuarters[0],
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.hasToday).toBe(true);
       });
-      });
 
-      it('returns true when presetType is MONTHS and currentDate is within current month', () => {
+      it('returns true when presetType is MONTHS and currentDate is within current month', 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({
@@ -83,12 +83,11 @@ describe('CurrentDayIndicator', () => {
           timeframeItem: new Date(2020, 0, 1),
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.hasToday).toBe(true);
       });
-      });
 
-      it('returns true when presetType is WEEKS and currentDate is within current week', () => {
+      it('returns true when presetType is WEEKS and currentDate is within current week', 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({
@@ -100,16 +99,15 @@ describe('CurrentDayIndicator', () => {
           timeframeItem: mockTimeframeWeeks[0],
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.hasToday).toBe(true);
       });
     });
   });
-  });
 
   describe('methods', () => {
     describe('getIndicatorStyles', () => {
-      it('returns object containing `left` with value `34%` when presetType is QUARTERS', () => {
+      it('returns object containing `left` with value `34%` when presetType is QUARTERS', 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({
@@ -121,16 +119,15 @@ describe('CurrentDayIndicator', () => {
           timeframeItem: mockTimeframeQuarters[0],
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.getIndicatorStyles()).toEqual(
           expect.objectContaining({
             left: '34%',
           }),
         );
       });
-      });
 
-      it('returns object containing `left` with value `48%` when presetType is MONTHS', () => {
+      it('returns object containing `left` with value `48%` when presetType is MONTHS', 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({
@@ -142,16 +139,15 @@ describe('CurrentDayIndicator', () => {
           timeframeItem: new Date(2020, 0, 1),
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.getIndicatorStyles()).toEqual(
           expect.objectContaining({
             left: '48%',
           }),
         );
       });
-      });
 
-      it('returns object containing `left` with value `7%` when presetType is WEEKS', () => {
+      it('returns object containing `left` with value `7%` when presetType is WEEKS', 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({
@@ -163,7 +159,7 @@ describe('CurrentDayIndicator', () => {
           timeframeItem: mockTimeframeWeeks[0],
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.getIndicatorStyles()).toEqual(
           expect.objectContaining({
             left: '7%',
@@ -172,10 +168,9 @@ describe('CurrentDayIndicator', () => {
       });
     });
   });
-  });
 
   describe('template', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       wrapper = createComponent();
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
@@ -183,7 +178,7 @@ describe('CurrentDayIndicator', () => {
         currentDate: mockTimeframeMonths[0],
       });
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders span element containing class `current-day-indicator`', () => {

ee/spec/frontend/roadmap/components/epic_item_spec.js

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
 
 import { delay } from 'lodash';
 
+import { nextTick } from 'vue';
 import CurrentDayIndicator from 'ee/roadmap/components/current_day_indicator.vue';
 import EpicItemComponent from 'ee/roadmap/components/epic_item.vue';
 import EpicItemContainer from 'ee/roadmap/components/epic_item_container.vue';
@@ -144,7 +145,7 @@ describe('EpicItemComponent', () => {
 
   describe('methods', () => {
     describe('removeHighlight', () => {
-      it('should wait 3 seconds before toggling `epic.newEpic` from true to false', () => {
+      it('should wait 3 seconds before toggling `epic.newEpic` from true to false', async () => {
         wrapper.setProps({
           epic: {
             ...wrapper.vm.epic,
@@ -154,12 +155,11 @@ describe('EpicItemComponent', () => {
 
         wrapper.vm.removeHighlight();
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         expect(delay).toHaveBeenCalledWith(expect.any(Function), 3000);
       });
     });
   });
-  });
 
   describe('template', () => {
     it('renders Epic item container', () => {

ee/spec/frontend/roadmap/components/epics_list_section_spec.js

 import { GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
 
+import { nextTick } from 'vue';
 import EpicItem from 'ee/roadmap/components/epic_item.vue';
 import EpicsListSection from 'ee/roadmap/components/epics_list_section.vue';
 import {
@@ -130,16 +131,15 @@ describe('EpicsListSectionComponent', () => {
     });
 
     describe('epicsWithAssociatedParents', () => {
-      it('should return epics which contain parent associations', () => {
+      it('should return epics which contain parent associations', async () => {
         wrapper.setProps({
           epics: mockEpicsWithParents,
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.epicsWithAssociatedParents).toEqual(mockEpicsWithParents);
       });
     });
-    });
 
     describe('displayedEpics', () => {
       beforeAll(() => {
@@ -172,24 +172,23 @@ describe('EpicsListSectionComponent', () => {
         expect(wrapper.vm.bufferSize).toBe(16);
       });
 
-      it('sets value of `offsetLeft` with parentElement.offsetLeft', () => {
-        return wrapper.vm.$nextTick(() => {
+      it('sets value of `offsetLeft` with parentElement.offsetLeft', async () => {
+        await nextTick();
         // During tests, there's no `$el.parentElement` present
         // hence offsetLeft is 0.
         expect(wrapper.vm.offsetLeft).toBe(0);
       });
-      });
 
       it('calls `scrollToCurrentDay` following the component render', async () => {
         // Original method implementation waits for render cycle
         // to complete at 2 levels before scrolling.
-        await wrapper.vm.$nextTick(); // set offsetLeft value
-        await wrapper.vm.$nextTick(); // Wait for nextTick before scroll
+        await nextTick(); // set offsetLeft value
+        await nextTick(); // Wait for nextTick before scroll
         expect(scrollToCurrentDay).toHaveBeenCalledWith(wrapper.vm.$el);
       });
 
-      it('sets style object to `emptyRowContainerStyles`', () => {
-        return wrapper.vm.$nextTick(() => {
+      it('sets style object to `emptyRowContainerStyles`', async () => {
+        await nextTick();
         expect(wrapper.vm.emptyRowContainerStyles).toEqual(
           expect.objectContaining({
             height: '0px',
@@ -197,18 +196,16 @@ describe('EpicsListSectionComponent', () => {
         );
       });
     });
-    });
 
     describe('getEmptyRowContainerStyles', () => {
-      it('returns empty object when there are no epics available to render', () => {
+      it('returns empty object when there are no epics available to render', async () => {
         wrapper.setProps({
           epics: [],
         });
 
-        return wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(wrapper.vm.getEmptyRowContainerStyles()).toEqual({});
       });
-      });
 
       it('returns object containing `height` when there epics available to render', () => {
         expect(wrapper.vm.getEmptyRowContainerStyles()).toEqual(
@@ -276,7 +273,7 @@ describe('EpicsListSectionComponent', () => {
     it('renders gl-loading icon when epicsFetchForNextPageInProgress is true', async () => {
       wrapper.vm.$store.commit(REQUEST_EPICS_FOR_NEXT_PAGE);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findByTestId('next-page-loading').text()).toContain('Loading epics');
       expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
@@ -293,15 +290,14 @@ describe('EpicsListSectionComponent', () => {
     });
   });
 
-  it('expands to show child epics when epic is toggled', () => {
+  it('expands to show child epics when epic is toggled', async () => {
     const epic = mockEpics[0];
 
     expect(store.state.childrenFlags[epic.id].itemExpanded).toBe(false);
 
     wrapper.vm.toggleIsEpicExpanded(epic);
 
-    return wrapper.vm.$nextTick().then(() => {
+    await nextTick();
     expect(store.state.childrenFlags[epic.id].itemExpanded).toBe(true);
   });
-  });
 });

ee/spec/frontend/roadmap/components/milestones_list_section_spec.js

 import { GlIcon, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import MilestoneTimeline from 'ee/roadmap/components/milestone_timeline.vue';
 import milestonesListSectionComponent from 'ee/roadmap/components/milestones_list_section.vue';
 import {
@@ -117,8 +118,8 @@ describe('MilestonesListSectionComponent', () => {
       it('calls `scrollToCurrentDay` following the component render', async () => {
         // Original method implementation waits for render cycle
         // to complete at 2 levels before scrolling.
-        await wrapper.vm.$nextTick(); // set offsetLeft value
-        await wrapper.vm.$nextTick(); // Wait for nextTick before scroll
+        await nextTick(); // set offsetLeft value
+        await nextTick(); // Wait for nextTick before scroll
         expect(scrollToCurrentDay).toHaveBeenCalledWith(wrapper.vm.$el);
       });
     });
@@ -194,10 +195,10 @@ describe('MilestonesListSectionComponent', () => {
   });
 
   describe('when the milestone list is expanded', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       findExpandButtonContainer().find(GlButton).vm.$emit('click');
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('shows "chevron-right" icon when the milestone toggle button is clicked', () => {

ee/spec/frontend/roadmap/components/roadmap_app_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import EpicsListEmpty from 'ee/roadmap/components/epics_list_empty.vue';
@@ -131,7 +131,7 @@ describe('RoadmapApp', () => {
         epicIid: mockFormattedEpic.iid,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findComponent(RoadmapFilters).exists()).toBe(false);
     });

ee/spec/frontend/roadmap/components/roadmap_filters_spec.js

 import { GlSegmentedControl, GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import RoadmapFilters from 'ee/roadmap/components/roadmap_filters.vue';
@@ -113,7 +113,7 @@ describe('RoadmapFilters', () => {
         });
         wrapper.vm.$store.dispatch('setSortedBy', 'end_date_asc');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(global.window.location.href).toBe(
           `${TEST_HOST}/?state=${EPICS_STATES.CLOSED}&sort=end_date_asc&layout=MONTHS&author_username=root&label_name%5B%5D=Bug&milestone_title=4.0&confidential=true`,
@@ -136,7 +136,7 @@ describe('RoadmapFilters', () => {
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ selectedDaterange: DATE_RANGES.THREE_YEARS });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       wrapper.findComponent(GlSegmentedControl).vm.$emit('input', PRESET_TYPES.OPENED);
 
@@ -243,7 +243,7 @@ describe('RoadmapFilters', () => {
           'not[myReactionEmoji]': 'thumbs_up',
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(filteredSearchBar.props('initialFilterValue')).toEqual(mockInitialFilterValue);
       });
@@ -252,11 +252,11 @@ describe('RoadmapFilters', () => {
         jest.spyOn(wrapper.vm, 'setFilterParams');
         jest.spyOn(wrapper.vm, 'fetchEpics');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         filteredSearchBar.vm.$emit('onFilter', mockInitialFilterValue);
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.setFilterParams).toHaveBeenCalledWith({
           authorUsername: 'root',
@@ -274,11 +274,11 @@ describe('RoadmapFilters', () => {
         jest.spyOn(wrapper.vm, 'setSortedBy');
         jest.spyOn(wrapper.vm, 'fetchEpics');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         filteredSearchBar.vm.$emit('onSort', 'end_date_asc');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.setSortedBy).toHaveBeenCalledWith('end_date_asc');
         expect(wrapper.vm.fetchEpics).toHaveBeenCalled();
@@ -290,7 +290,7 @@ describe('RoadmapFilters', () => {
 
         filteredSearchBar.vm.$emit('onFilter', [], false);
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.setFilterParams).not.toHaveBeenCalled();
         expect(wrapper.vm.fetchEpics).not.toHaveBeenCalled();
@@ -340,7 +340,7 @@ describe('RoadmapFilters', () => {
           timeframeRangeType: DATE_RANGES.CURRENT_QUARTER,
         });
 
-        await wrapperWithDaterangeFilter.vm.$nextTick();
+        await nextTick();
       });
 
       afterEach(() => {
@@ -351,7 +351,7 @@ describe('RoadmapFilters', () => {
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
         wrapperWithDaterangeFilter.setData({ selectedDaterange: DATE_RANGES.CURRENT_QUARTER });
-        await wrapperWithDaterangeFilter.vm.$nextTick();
+        await nextTick();
 
         const daterangeDropdown = wrapperWithDaterangeFilter.findByTestId('daterange-dropdown');
 
@@ -374,7 +374,7 @@ describe('RoadmapFilters', () => {
           // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
           // eslint-disable-next-line no-restricted-syntax
           wrapperWithDaterangeFilter.setData({ selectedDaterange });
-          await wrapperWithDaterangeFilter.vm.$nextTick();
+          await nextTick();
 
           const layoutSwitches = wrapperWithDaterangeFilter.findComponent(GlSegmentedControl);
 

ee/spec/frontend/roadmap/components/roadmap_shell_spec.js

 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 
 import EpicsListSection from 'ee/roadmap/components/epics_list_section.vue';
@@ -97,7 +97,7 @@ describe('RoadmapShell', () => {
       it('emits `epicsListScrolled` event via eventHub', async () => {
         jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         wrapper.vm.handleScroll();
 
         expect(eventHub.$emit).toHaveBeenCalledWith('epicsListScrolled', expect.any(Object));

ee/spec/frontend/security_configuration/api_fuzzing/components/configuration_form_spec.js

 import { mount } from '@vue/test-utils';
 import { merge } from 'lodash';
+import { nextTick } from 'vue';
 import ConfigurationForm from 'ee/security_configuration/api_fuzzing/components/configuration_form.vue';
 import { SCAN_MODES } from 'ee/security_configuration/api_fuzzing/constants';
 import ConfigurationSnippetModal from 'ee/security_configuration/components/configuration_snippet_modal.vue';
@@ -111,7 +112,7 @@ describe('EE - ApiFuzzingConfigurationForm', () => {
       it('the specificationfile input becomes visible and has the correct labels', async () => {
         const selectedScanMode = SCAN_MODES[scanMode];
         findScanModeInput().vm.$emit('input', scanMode);
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         const specificationFileInput = findSpecificationFileInput();
         expect(specificationFileInput.exists()).toBe(true);
@@ -181,7 +182,7 @@ describe('EE - ApiFuzzingConfigurationForm', () => {
     it('when a scan profile is selected, its YAML is visible', async () => {
       const [selectedScanProfile] = apiFuzzingCiConfiguration.scanProfiles;
       findScanProfileDropdownInput().vm.$emit('input', selectedScanProfile.name);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findScanProfileYamlViewer().exists()).toBe(true);
       expect(findScanProfileYamlViewer().text()).toBe(selectedScanProfile.yaml.trim());
@@ -227,7 +228,7 @@ describe('EE - ApiFuzzingConfigurationForm', () => {
       jest.spyOn(wrapper.vm.$refs[CONFIGURATION_SNIPPET_MODAL_ID], 'show');
       await setFormData();
       wrapper.find('form').trigger('submit');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.vm.$refs[CONFIGURATION_SNIPPET_MODAL_ID].show).toHaveBeenCalled();
       expect(findConfigurationSnippetModal().props()).toEqual({

ee/spec/frontend/security_configuration/components/expandable_section_spec.js

 import { mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import ExpandableSection from 'ee/security_configuration/components/expandable_section.vue';
 import { stubTransition } from 'helpers/stub_transition';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -82,7 +83,7 @@ describe('ExpandableSection component', () => {
     });
 
     it('hides the content by default', async () => {
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findContent().isVisible()).toBe(false);
     });
 
@@ -95,7 +96,7 @@ describe('ExpandableSection component', () => {
         await waitForPromises();
         const button = findButton();
         button.trigger('click');
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('shows the content', () => {

ee/spec/frontend/security_configuration/components/form_input_spec.js

 import { GlFormInput, GlLink } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { SCHEMA_TO_PROP_SIZE_MAP } from 'ee/security_configuration/components/constants';
 import FormInput from 'ee/security_configuration/components/form_input.vue';
 
@@ -114,9 +115,9 @@ describe('FormInput component', () => {
       });
 
       describe('disabling the input', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           wrapper.setProps({ disabled: true });
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('does not display the custom value message', () => {

ee/spec/frontend/security_configuration/corpus_management/corpus_table_spec.js

 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Actions from 'ee/security_configuration/corpus_management/components/columns/actions.vue';
 import CorpusTable from 'ee/security_configuration/corpus_management/components/corpus_table.vue';
 import { corpuses } from './mock_data';
@@ -58,7 +59,7 @@ describe('Corpus table', () => {
     describe('with no corpuses', () => {
       it('renders the empty state', async () => {
         wrapper.setProps({ corpuses: [] });
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.text()).toContain('Currently, there are no uploaded or generated corpuses');
       });
     });

ee/spec/frontend/security_configuration/dast_profiles/components/base_dast_profile_form_spec.js

 import { GlAlert, GlForm, GlModal } from '@gitlab/ui';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import merge from 'lodash/merge';
 import VueApollo from 'vue-apollo';
 import BaseDastProfileForm from 'ee/security_configuration/dast_profiles/components/base_dast_profile_form.vue';
@@ -169,7 +169,7 @@ describe('BaseDastProfileForm', () => {
       expectSubmitNotLoading();
 
       submitForm();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findSubmitButton().props('loading')).toBe(true);
     });

ee/spec/frontend/security_configuration/dast_profiles/components/dast_failed_site_validations_spec.js

 import { GlAlert } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
 import { mount, shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { merge } from 'lodash';
 import VueApollo from 'vue-apollo';
 import DastFailedSiteValidations from 'ee/security_configuration/dast_profiles/components/dast_failed_site_validations.vue';
@@ -108,7 +108,7 @@ describe('EE - DastFailedSiteValidations', () => {
       expect(findValidationModal().exists()).toBe(false);
 
       findFirstRetryButton().click();
-      await wrapper.vm.$nextTick();
+      await nextTick();
       const modal = findValidationModal();
 
       expect(modal.exists()).toBe(true);
@@ -117,20 +117,20 @@ describe('EE - DastFailedSiteValidations', () => {
 
     it('destroys the modal after it has been hidden', async () => {
       findFirstRetryButton().click();
-      await wrapper.vm.$nextTick();
+      await nextTick();
       const modal = findValidationModal();
 
       expect(modal.exists()).toBe(true);
 
       modal.vm.$emit('hidden');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(modal.exists()).toBe(false);
     });
 
     it('triggers the dastSiteValidationRevoke GraphQL mutation', async () => {
       findFirstDismissButton().click();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findAllComponents(GlAlert)).toHaveLength(1);
       expect(requestHandlers.dastSiteValidationRevoke).toHaveBeenCalledWith({

ee/spec/frontend/security_configuration/dast_profiles/components/dast_profiles_list_spec.js

@@ -2,6 +2,7 @@ import { GlModal } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
 import { mount, shallowMount, createWrapper } from '@vue/test-utils';
 import { merge } from 'lodash';
+import { nextTick } from 'vue';
 import DastProfilesList from 'ee/security_configuration/dast_profiles/components/dast_profiles_list.vue';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { siteProfiles as profiles, policySiteProfiles } from '../mocks/mock_data';
@@ -204,7 +205,7 @@ describe('EE - DastProfilesList', () => {
 
         getCurrentProfileDeleteButton().trigger('click');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(
           within(getModal().element).getByText(/are you sure you want to delete this profile/i),
@@ -216,7 +217,7 @@ describe('EE - DastProfilesList', () => {
 
         getCurrentProfileDeleteButton().trigger('click');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         getModal().vm.$emit('ok');
 

ee/spec/frontend/security_configuration/dast_profiles/components/dast_profiles_spec.js

@@ -2,6 +2,7 @@ import { GlDropdown, GlTabs } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
 import { mount, shallowMount } from '@vue/test-utils';
 import { merge } from 'lodash';
+import { nextTick } from 'vue';
 import DastFailedSiteValidations from 'ee/security_configuration/dast_profiles/components/dast_failed_site_validations.vue';
 import DastProfiles from 'ee/security_configuration/dast_profiles/components/dast_profiles.vue';
 import setWindowLocation from 'helpers/set_window_location_helper';
@@ -188,7 +189,7 @@ describe('EE - DastProfiles', () => {
       wrapper.setData({
         profileTypes: { [profileType]: givenData },
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(getProfilesComponent(profileType)[propGetter](key)).toEqual(expectedValue);
     },

ee/spec/frontend/security_configuration/dast_profiles/dast_site_profiles/components/dast_site_auth_section_spec.js

 import { GlFormCheckbox } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DastSiteAuthSection from 'ee/security_configuration/dast_profiles/dast_site_profiles/components/dast_site_auth_section.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 
@@ -30,9 +31,9 @@ describe('DastSiteAuthSection', () => {
   const findAuthForm = () => wrapper.findByTestId('auth-form');
   const findAuthCheckbox = () => wrapper.findComponent(GlFormCheckbox);
 
-  const setAuthentication = ({ enabled }) => {
+  const setAuthentication = async ({ enabled }) => {
     findAuthCheckbox().vm.$emit('input', enabled);
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
   const getLatestInputEventPayload = () => {
     const latestInputEvent = [...wrapper.emitted('input')].pop();
@@ -118,7 +119,7 @@ describe('DastSiteAuthSection', () => {
           input.setValue(inputFieldValue);
           input.trigger('blur');
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(getLatestInputEventPayload().state).toBe(true);
       });
     });

ee/spec/frontend/security_configuration/sast/components/configuration_form_spec.js

@@ -2,6 +2,7 @@ import { GlLink } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { shallowMount } from '@vue/test-utils';
 import { merge } from 'lodash';
+import { nextTick } from 'vue';
 import DynamicFields from 'ee/security_configuration/components/dynamic_fields.vue';
 import ExpandableSection from 'ee/security_configuration/components/expandable_section.vue';
 import AnalyzerConfiguration from 'ee/security_configuration/sast/components/analyzer_configuration.vue';
@@ -233,9 +234,9 @@ describe('ConfigurationForm component', () => {
       });
 
       describe('when alert-tip is dismissed', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           findAnalyzersSectionTip().vm.$emit('dismiss');
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('should not be displayed', () => {