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

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

See merge request gitlab-org/gitlab!79050

ee/spec/frontend/security_dashboard/components/group/group_security_dashboard_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import GroupSecurityDashboard from 'ee/security_dashboard/components/group/group_security_dashboard.vue';
 import ReportNotConfiguredGroup from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_group.vue';
 import VulnerabilitySeverities from 'ee/security_dashboard/components/shared/project_security_status_chart.vue';
@@ -93,7 +94,7 @@ describe('Group Security Dashboard component', () => {
     // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
     // eslint-disable-next-line no-restricted-syntax
     wrapper.setData({ projects: [{ name: 'project1' }] });
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     const securityChartsLayout = findSecurityChartsLayoutComponent();
     const reportNotConfigured = findReportNotConfigured();

ee/spec/frontend/security_dashboard/components/group/group_vulnerabilities_spec.js

 import { GlAlert, GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import GroupVulnerabilities from 'ee/security_dashboard/components/group/group_vulnerabilities.vue';
 import VulnerabilityList from 'ee/security_dashboard/components/shared/vulnerability_list.vue';
 import vulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/group_vulnerabilities.query.graphql';
@@ -84,13 +85,12 @@ describe('Group Security Dashboard Vulnerabilities Component', () => {
       );
     });
 
-    it('should have an alert that is dismissable', () => {
+    it('should have an alert that is dismissable', async () => {
       const alert = findAlert();
       alert.vm.$emit('dismiss');
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(alert.exists()).toBe(false);
     });
-    });
 
     it('does not display the vulnerabilities', () => {
       expect(findVulnerabilities().exists()).toBe(false);

ee/spec/frontend/security_dashboard/components/instance/instance_security_dashboard_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import InstanceSecurityDashboard from 'ee/security_dashboard/components/instance/instance_security_dashboard.vue';
 import ReportNotConfiguredInstance from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_instance.vue';
 import VulnerabilitySeverities from 'ee/security_dashboard/components/shared/project_security_status_chart.vue';
@@ -96,7 +97,7 @@ describe('Instance Security Dashboard component', () => {
     // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
     // eslint-disable-next-line no-restricted-syntax
     wrapper.setData({ projects: [{ name: 'project1' }] });
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     const securityChartsLayout = findSecurityChartsLayoutComponent();
     const reportNotConfigured = findReportNotConfigured();

ee/spec/frontend/security_dashboard/components/instance/instance_vulnerabilities_spec.js

 import { GlAlert, GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import InstanceVulnerabilities from 'ee/security_dashboard/components/instance/instance_vulnerabilities.vue';
 import VulnerabilityList from 'ee/security_dashboard/components/shared/vulnerability_list.vue';
 import vulnerabilitiesQuery from 'ee/security_dashboard/graphql/queries/instance_vulnerabilities.query.graphql';
@@ -69,13 +70,12 @@ describe('Instance Security Dashboard Vulnerabilities Component', () => {
       );
     });
 
-    it('should have an alert that is dismissable', () => {
+    it('should have an alert that is dismissable', async () => {
       const alert = findAlert();
       alert.vm.$emit('dismiss');
-      return wrapper.vm.$nextTick(() => {
+      await nextTick();
       expect(alert.exists()).toBe(false);
     });
-    });
 
     it('does not display the vulnerabilities', () => {
       expect(findVulnerabilities().exists()).toBe(false);

ee/spec/frontend/security_dashboard/components/pipeline/filters_spec.js

 import { GlToggle } from '@gitlab/ui';
 import { shallowMount, mount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import Filters from 'ee/security_dashboard/components/pipeline/filters.vue';
 import { simpleScannerFilter } from 'ee/security_dashboard/helpers';
@@ -69,7 +69,7 @@ describe('Filter component', () => {
       });
 
       createWrapper({ mountFn: mount });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       // The other filters will trigger the mock as well, so we'll clear it before clicking on a
       // scanner filter item.
       mock.mockClear();
@@ -78,7 +78,7 @@ describe('Filter component', () => {
       const optionId = simpleScannerFilter.options[2].id;
       const option = wrapper.findByTestId(`${filterId}:${optionId}`);
       option.vm.$emit('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(mock).toHaveBeenCalledTimes(1);
       expect(mock).toHaveBeenCalledWith(expect.any(Object), { [filterId]: [optionId] });

ee/spec/frontend/security_dashboard/components/pipeline/security_reports_summary_spec.js

 import { GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import SecurityReportsSummary from 'ee/security_dashboard/components/pipeline/security_reports_summary.vue';
 import Modal from 'ee/vue_shared/security_reports/components/dast_modal.vue';
 import { mockPipelineJobs } from 'ee_jest/security_dashboard/mock_data/jobs';
@@ -148,7 +149,7 @@ describe('Security reports summary component', () => {
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
         wrapper.setData({ isVisible: false });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(localStorage.setItem).toHaveBeenCalledWith(LOCAL_STORAGE_KEY, '1');
       });
@@ -168,7 +169,7 @@ describe('Security reports summary component', () => {
         // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
         // eslint-disable-next-line no-restricted-syntax
         wrapper.setData({ isVisible: true });
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(localStorage.removeItem).toHaveBeenCalledWith(LOCAL_STORAGE_KEY);
       });

ee/spec/frontend/security_dashboard/components/pipeline/selection_summary_vuex_spec.js

 import { GlButton, GlFormSelect } from '@gitlab/ui';
 import { mount } 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';
@@ -93,7 +93,7 @@ describe('Selection Summary', () => {
       option.setSelected();
       formSelect().trigger('change');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.vm.dismissalReason).toEqual(option.attributes('value'));
       expect(dismissButton().props().disabled).toBe(false);

ee/spec/frontend/security_dashboard/components/project/project_security_dashboard_spec.js

 import { GlLoadingIcon } from '@gitlab/ui';
 import { GlLineChart } from '@gitlab/ui/dist/charts';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import ProjectSecurityDashboard from 'ee/security_dashboard/components/project/project_security_dashboard.vue';
 import ReportNotConfigured from 'ee/security_dashboard/components/shared/empty_states/report_not_configured_project.vue';
@@ -78,13 +78,13 @@ describe('Project Security Dashboard component', () => {
   });
 
   describe('when chartWidth is 0', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       wrapper = createComponent({
         query: mockProjectSecurityChartsWithData(),
         propsData: { hasVulnerabilities: true },
         chartWidth: 0,
       });
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('should not display the line chart', () => {
@@ -99,12 +99,12 @@ describe('Project Security Dashboard component', () => {
   describe('when there is history data', () => {
     useFakeDate(2021, 3, 11);
 
-    beforeEach(() => {
+    beforeEach(async () => {
       wrapper = createComponent({
         query: mockProjectSecurityChartsWithData(),
         propsData: { hasVulnerabilities: true },
       });
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('should display the chart with data', () => {
@@ -141,12 +141,12 @@ describe('Project Security Dashboard component', () => {
   });
 
   describe('when there is no history data', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       wrapper = createComponent({
         query: mockProjectSecurityChartsWithoutData(),
         propsData: { hasVulnerabilities: false },
       });
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('should display the empty state', () => {
@@ -191,7 +191,7 @@ describe('Project Security Dashboard component', () => {
         secureVulnerabilityTrainingEnabled: false,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findSecurityTrainingPromo().exists()).toBe(false);
     });

ee/spec/frontend/security_dashboard/components/project/project_vulnerabilities_spec.js

@@ -2,6 +2,7 @@ import { GlAlert, GlIntersectionObserver, GlLoadingIcon } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { Portal } from 'portal-vue';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import ProjectVulnerabilities from 'ee/security_dashboard/components/project/project_vulnerabilities.vue';
 import SecurityScannerAlert from 'ee/security_dashboard/components/project/security_scanner_alert.vue';
 import VulnerabilityList from 'ee/security_dashboard/components/shared/vulnerability_list.vue';
@@ -325,7 +326,7 @@ describe('Vulnerabilities app component', () => {
 
         scannerAlert.vm.$emit('dismiss');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(scannerAlert.exists()).toBe(false);
       });
@@ -333,7 +334,7 @@ describe('Vulnerabilities app component', () => {
       it('should remember the dismissal state', async () => {
         findSecurityScannerAlert().vm.$emit('dismiss');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(window.localStorage.setItem.mock.calls).toContainEqual([
           ProjectVulnerabilities.SCANNER_ALERT_DISMISSED_LOCAL_STORAGE_KEY,

ee/spec/frontend/security_dashboard/components/shared/csv_export_button_spec.js

 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import CsvExportButton, {
   STORAGE_KEY,
 } from 'ee/security_dashboard/components/shared/csv_export_button.vue';
@@ -118,7 +119,7 @@ describe('Csv Button Export', () => {
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ isPreparingCsvExport: true });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findCsvExportButton().props()).toMatchObject({
         icon: '',
@@ -134,7 +135,7 @@ describe('Csv Button Export', () => {
       it('closes the popover when the button is clicked', async () => {
         expect(findPopoverButton().text()).toBe('Got it!');
         findPopoverButton().vm.$emit('click');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findPopover().exists()).toBe(false);
       });
@@ -142,7 +143,7 @@ describe('Csv Button Export', () => {
       it('sets localStorage', async () => {
         jest.spyOn(AccessorUtils, 'canUseLocalStorage').mockImplementation(() => true);
         findPopoverButton().vm.$emit('click');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(localStorage.setItem).toHaveBeenCalledTimes(1);
       });
@@ -150,7 +151,7 @@ describe('Csv Button Export', () => {
       it(`does not set localStorage if it's not available`, async () => {
         jest.spyOn(AccessorUtils, 'canUseLocalStorage').mockImplementation(() => false);
         findPopoverButton().vm.$emit('click');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(localStorage.setItem).toHaveBeenCalledTimes(0);
       });

ee/spec/frontend/security_dashboard/components/shared/filters/filter_body_spec.js

 import { GlDropdown, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import FilterBody from 'ee/security_dashboard/components/shared/filters/filter_body.vue';
 
 describe('Filter Body component', () => {
@@ -75,7 +76,7 @@ describe('Filter Body component', () => {
       createComponent({ showSearchBox: true }, { attachTo: document.body });
       const spy = jest.spyOn(searchBox().vm, 'focusInput');
       dropdown().vm.$emit('show');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(spy).toHaveBeenCalledTimes(1);
     });
@@ -84,7 +85,7 @@ describe('Filter Body component', () => {
       const text = 'abc';
       createComponent({ showSearchBox: true });
       searchBox().vm.$emit('input', text);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted('input')[0][0]).toBe(text);
     });

ee/spec/frontend/security_dashboard/components/shared/filters/scanner_filter_spec.js

 import { GlDropdownItem, GlDropdownDivider } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { sampleSize, cloneDeep } from 'lodash';
 import VueRouter from 'vue-router';
 import FilterItem from 'ee/security_dashboard/components/shared/filters/filter_item.vue';
@@ -129,7 +129,7 @@ describe('Scanner Filter component', () => {
         ids.includes(`${x.vendor}.${x.report_type}`),
       );
       createWrapper();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.emitted('filter-changed')[0][0]).toEqual({
         scannerId: expect.arrayContaining([

ee/spec/frontend/security_dashboard/components/shared/filters/simple_filter_spec.js

 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueRouter from 'vue-router';
 import SimpleFilter from 'ee/security_dashboard/components/shared/filters/simple_filter.vue';
 
@@ -37,12 +37,12 @@ describe('Simple Filter component', () => {
 
   const clickAllOptionItem = async () => {
     allOptionItem().vm.$emit('click');
-    await wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const clickItemAt = async (index) => {
     dropdownItemAt(index).vm.$emit('click');
-    await wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const expectSelectedItems = (indexes) => {
@@ -157,7 +157,7 @@ describe('Simple Filter component', () => {
       // to fake it by doing it manually.
       router.replace({ query: { [filter.id]: ids } });
       window.dispatchEvent(new Event('popstate'));
-      await wrapper.vm.$nextTick();
+      await nextTick();
     };
 
     describe('clicking on items', () => {
@@ -295,7 +295,7 @@ describe('Simple Filter component', () => {
         const query = { [filter.id]: ids, other };
         router.push({ query });
         window.dispatchEvent(new Event('popstate'));
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expectSelectedItems([1, 2, 3]);
         expect(wrapper.vm.$route.query.other).toEqual(other);

ee/spec/frontend/security_dashboard/components/shared/selection_summary_spec.js

 import { GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import SelectionSummary from 'ee/security_dashboard/components/shared/selection_summary.vue';
 import StatusDropdown from 'ee/security_dashboard/components/shared/status_dropdown.vue';
@@ -56,7 +56,7 @@ describe('Selection Summary component', () => {
     describe('with selected state', () => {
       beforeEach(async () => {
         wrapper.findComponent(StatusDropdown).vm.$emit('change', { action: 'confirm' });
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('displays the submit button when there is s state selected', () => {
@@ -71,7 +71,7 @@ describe('Selection Summary component', () => {
     describe('with no selected state', () => {
       beforeEach(async () => {
         wrapper.findComponent(StatusDropdown).vm.$emit('change', { action: null });
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('does not display the submit button when there is s state selected', () => {
@@ -185,7 +185,7 @@ describe('Selection Summary component', () => {
       it(`the submit button is unclickable during form submission - ${action}`, async () => {
         expect(findSubmitButton().exists()).toBe(false);
         submitForm();
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(isSubmitButtonDisabled()).toBe(true);
         await waitForPromises();
         expect(isSubmitButtonDisabled()).toBe(false);

ee/spec/frontend/security_dashboard/components/shared/vulnerabilities_over_time_chart_spec.js

@@ -53,14 +53,13 @@ describe('Vulnerabilities Over Time Chart Component', () => {
       ${'2000-01-01T00:00:00Z'} | ${30}    | ${'December 2nd'}
     `(
       'shows "$expectedStartDate" when the date range is set to "$dayRange" days',
-      ({ mockDate, dayRange, expectedStartDate }) => {
+      async ({ mockDate, dayRange, expectedStartDate }) => {
         jest.spyOn(global.Date, 'now').mockImplementation(() => new Date(mockDate));
 
         wrapper = createComponent({ data: () => ({ vulnerabilitiesHistoryDayRange: dayRange }) });
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         expect(findTimeInfo().text()).toContain(expectedStartDate);
-        });
       },
     );
   });

ee/spec/frontend/security_dashboard/components/shared/vulnerability_count_list_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import VulnerabilityCountList from 'ee/security_dashboard/components/shared/vulnerability_count_list.vue';
 import VulnerabilityCountListLayout from 'ee/security_dashboard/components/shared/vulnerability_count_list_layout.vue';
 import countQuery from 'ee/security_dashboard/graphql/queries/vulnerability_severities_count.query.graphql';
@@ -101,7 +102,7 @@ describe('Vulnerabilities count list component', () => {
   `(
     'when the dashboard type is $dashboardType',
     ({ dashboardType, provide, expectedContainedQueryVariables }) => {
-      beforeEach(() => {
+      beforeEach(async () => {
         const mockResponse = jest
           .fn()
           .mockResolvedValue(mockVulnerabilitySeveritiesGraphQLResponse({ dashboardType }));
@@ -113,7 +114,7 @@ describe('Vulnerabilities count list component', () => {
           stubs: { VulnerabilityCountListLayout },
         });
 
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('should pass the correct variables to the GraphQL query', () => {

ee/spec/frontend/security_dashboard/components/shared/vulnerability_list_spec.js

 import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlTable, GlTruncate } from '@gitlab/ui';
 import { capitalize } from 'lodash';
+import { nextTick } from 'vue';
 import DashboardHasNoVulnerabilities from 'ee/security_dashboard/components/shared/empty_states/dashboard_has_no_vulnerabilities.vue';
 import FiltersProducedNoResults from 'ee/security_dashboard/components/shared/empty_states/filters_produced_no_results.vue';
 import IssuesBadge from 'ee/security_dashboard/components/shared/issues_badge.vue';
@@ -148,7 +149,7 @@ describe('Vulnerability list component', () => {
 
     it('should show the selection summary when a checkbox is selected', async () => {
       findDataCell('vulnerability-checkbox').setChecked(true);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findSelectionSummary().props('visible')).toBe(true);
     });
@@ -156,13 +157,13 @@ describe('Vulnerability list component', () => {
     it('should sync selected vulnerabilities when the vulnerability list is updated', async () => {
       findDataCell('vulnerability-checkbox').setChecked(true);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findSelectionSummary().props('selectedVulnerabilities')).toHaveLength(1);
 
       wrapper.setProps({ vulnerabilities: [] });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findSelectionSummary().props('visible')).toBe(false);
     });
@@ -172,9 +173,9 @@ describe('Vulnerability list component', () => {
       checkbox().setChecked(true);
       expect(checkbox().element.checked).toBe(true);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       findSelectionSummary().vm.$emit('vulnerability-updated', newVulnerabilities[0].id);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(checkbox().element.checked).toBe(false);
     });
@@ -626,11 +627,11 @@ describe('Vulnerability list component', () => {
       };
 
       clickRows();
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expectRowCheckboxesToBe((i) => rowsToClick.includes(i));
 
       clickRows();
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expectRowCheckboxesToBe(() => false);
     });
   });

ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_spec.js

 import { GlSkeletonLoading, GlTable, GlTruncate } from '@gitlab/ui';
 import { capitalize } from 'lodash';
 import { Portal } from 'portal-vue';
+import { nextTick } from 'vue';
 import DashboardHasNoVulnerabilities from 'ee/security_dashboard/components/shared/empty_states/dashboard_has_no_vulnerabilities.vue';
 import FiltersProducedNoResults from 'ee/security_dashboard/components/shared/empty_states/filters_produced_no_results.vue';
 import IssuesBadge from 'ee/security_dashboard/components/shared/issues_badge.vue';
@@ -159,7 +160,7 @@ describe('Vulnerability list component', () => {
 
     it('should show the selection summary when a checkbox is selected', async () => {
       findDataCell('vulnerability-checkbox').setChecked(true);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findSelectionSummary().props('visible')).toBe(true);
     });
@@ -167,13 +168,13 @@ describe('Vulnerability list component', () => {
     it('should sync selected vulnerabilities when the vulnerability list is updated', async () => {
       findDataCell('vulnerability-checkbox').setChecked(true);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findSelectionSummary().props('selectedVulnerabilities')).toHaveLength(1);
 
       wrapper.setProps({ vulnerabilities: [] });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findSelectionSummary().props('visible')).toBe(false);
     });
@@ -183,9 +184,9 @@ describe('Vulnerability list component', () => {
       checkbox().setChecked(true);
       expect(checkbox().element.checked).toBe(true);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       findSelectionSummary().vm.$emit('vulnerability-updated', newVulnerabilities[0].id);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(checkbox().element.checked).toBe(false);
     });
@@ -230,7 +231,7 @@ describe('Vulnerability list component', () => {
 
     it('should not select a clicked vulnerability', async () => {
       findRow(1).trigger('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findSelectionSummary().props()).toMatchObject({
         visible: false,
@@ -602,11 +603,11 @@ describe('Vulnerability list component', () => {
       };
 
       clickRows();
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expectRowCheckboxesToBe((i) => rowsToClick.includes(i));
 
       clickRows();
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expectRowCheckboxesToBe(() => false);
     });
   });

ee/spec/frontend/sidebar/components/cve_id_request_spec.js

 import { getByTestId as getByTestIdHelper, within } from '@testing-library/dom';
 import { createWrapper, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import CveIdRequest from 'ee/sidebar/components/cve_id_request/cve_id_request_sidebar.vue';
 import { store } from '~/notes/stores';
 
@@ -59,7 +60,7 @@ describe('CveIdRequest', () => {
     it('should show the "Help" pane when help button is clicked', async () => {
       findHelpButton().trigger('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.vm.showHelpState).toBe(true);
 
       // let animations run
@@ -71,10 +72,10 @@ describe('CveIdRequest', () => {
     it('should not show the "Help" pane when help button is clicked and then closed', async () => {
       findHelpButton().trigger('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       findCloseHelpButton().trigger('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.vm.showHelpState).toBe(false);
       expect(queryHelpPane()).toBe(null);

ee/spec/frontend/sidebar/components/iteration_dropdown_spec.js

@@ -7,7 +7,7 @@ import {
   GlSearchBoxByType,
 } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import IterationDropdown from 'ee/sidebar/components/iteration_dropdown.vue';
 import groupIterationsQuery from 'ee/sidebar/queries/iterations.query.graphql';
@@ -80,7 +80,7 @@ describe('IterationDropdown', () => {
   });
 
   const waitForDebounce = async () => {
-    await wrapper.vm.$nextTick();
+    await nextTick();
     jest.runOnlyPendingTimers();
   };
   const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
@@ -97,7 +97,7 @@ describe('IterationDropdown', () => {
 
     item.vm.$emit('click');
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
   };
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const showDropdownAndWait = async () => {

ee/spec/frontend/sidebar/components/status/status_spec.js

 import { GlDropdown, GlDropdownItem, GlLoadingIcon } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Status from 'ee/sidebar/components/status/status.vue';
 import { healthStatus, healthStatusTextMap, I18N_DROPDOWN } from 'ee/sidebar/constants';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
@@ -149,11 +150,11 @@ describe('Status', () => {
 
       wrapper.vm.isDropdownShowing = true;
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(getRemoveStatusItem(wrapper).exists()).toBe(true);
     });
 
-    it('emits an onDropdownClick event with argument null when clicked', () => {
+    it('emits an onDropdownClick event with argument null when clicked', async () => {
       const props = {
         isEditable: true,
         status: healthStatus.AT_RISK,
@@ -163,13 +164,12 @@ describe('Status', () => {
 
       wrapper.vm.isDropdownShowing = true;
 
-      wrapper.vm.$nextTick(() => {
+      await nextTick();
       getRemoveStatusItem(wrapper).vm.$emit('click', { preventDefault: () => null });
 
       expect(wrapper.emitted().onDropdownClick[0]).toEqual([null]);
     });
   });
-  });
 
   describe('status text', () => {
     describe('when no value is provided for status', () => {
@@ -240,7 +240,7 @@ describe('Status', () => {
       it('shows the dropdown when the Edit button is clicked', async () => {
         getEditButton(wrapper).trigger('click');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(getDropdownClasses(wrapper)).toContain('show');
       });
     });
@@ -268,7 +268,7 @@ describe('Status', () => {
       it('hides form when the `edit` button is clicked', async () => {
         getEditButton(wrapper).trigger('click');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(getDropdownClasses(wrapper)).toContain('gl-display-none');
       });
 
@@ -277,7 +277,7 @@ describe('Status', () => {
 
         dropdownItem.vm.$emit('click');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(getDropdownClasses(wrapper)).toContain('gl-display-none');
       });
     });
@@ -325,7 +325,7 @@ describe('Status', () => {
             .at(index + 1)
             .vm.$emit('click', { preventDefault: () => null });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
           expect(wrapper.emitted().onDropdownClick[0]).toEqual([status]);
         },
       );

ee/spec/frontend/sidebar/weight_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Weight from 'ee/sidebar/components/weight/weight.vue';
 import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper';
 import { ENTER_KEY_CODE } from '~/lib/utils/keycodes';
@@ -85,7 +86,7 @@ describe('Weight', () => {
 
     findCollapsedBlock().trigger('click');
 
-    await wrapper.vm.$nextTick;
+    await nextTick;
 
     expect(wrapper.classes()).toContain('collapse-after-update');
   });
@@ -99,7 +100,7 @@ describe('Weight', () => {
 
     findEditLink().trigger('click');
 
-    await wrapper.vm.$nextTick;
+    await nextTick;
 
     expect(containsEditableField()).toBe(true);
   });
@@ -117,7 +118,7 @@ describe('Weight', () => {
 
     findEditLink().trigger('click');
 
-    await wrapper.vm.$nextTick;
+    await nextTick;
 
     const event = new CustomEvent('keydown');
     event.keyCode = ENTER_KEY_CODE;
@@ -127,7 +128,7 @@ describe('Weight', () => {
     editableField.value = expectedWeightValue;
     editableField.dispatchEvent(event);
 
-    await wrapper.vm.$nextTick;
+    await nextTick;
 
     expect(containsInputError()).toBe(false);
     expect(eventHub.$emit).toHaveBeenCalledWith('updateWeight', {
@@ -149,7 +150,7 @@ describe('Weight', () => {
 
     findRemoveLink().trigger('click');
 
-    await wrapper.vm.$nextTick;
+    await nextTick;
 
     expect(containsInputError()).toBe(false);
     expect(eventHub.$emit).toHaveBeenCalledWith('updateWeight', { id: mockId, value: '' });
@@ -162,7 +163,7 @@ describe('Weight', () => {
 
     findEditLink().trigger('click');
 
-    await wrapper.vm.$nextTick;
+    await nextTick;
 
     const event = new CustomEvent('keydown');
     event.keyCode = ENTER_KEY_CODE;
@@ -172,7 +173,7 @@ describe('Weight', () => {
     editableField.value = -9001;
     editableField.dispatchEvent(event);
 
-    await wrapper.vm.$nextTick;
+    await nextTick;
 
     expect(containsInputError()).toBe(true);
   });
@@ -197,7 +198,7 @@ describe('Weight', () => {
     it('calls trackEvent when "Edit" is clicked', async () => {
       triggerEvent(findEditLink().element);
 
-      await wrapper.vm.$nextTick;
+      await nextTick;
 
       expect(trackingSpy).toHaveBeenCalled();
     });

ee/spec/frontend/subscriptions/buy_addons_shared/components/order_summary_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { merge } from 'lodash';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -162,7 +162,7 @@ describe('Order Summary', () => {
       it('should emit `alertError` event', async () => {
         jest.spyOn(wrapper.vm, '$emit');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.$emit).toHaveBeenCalledWith('alertError', I18N_API_ERROR);
       });

ee/spec/frontend/test_case_create/components/test_case_create_root_spec.js

 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import TestCaseCreateRoot from 'ee/test_case_create/components/test_case_create_root.vue';
 import createTestCase from 'ee/test_case_create/queries/create_test_case.mutation.graphql';
 
@@ -185,7 +186,7 @@ describe('TestCaseCreateRoot', () => {
         createTestCaseRequestActive: true,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find('[data-testid="submit-test-case"]').props('loading')).toBe(true);
     });
@@ -197,7 +198,7 @@ describe('TestCaseCreateRoot', () => {
         createTestCaseRequestActive: true,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find('[data-testid="cancel-test-case"]').props('disabled')).toBe(true);
     });

ee/spec/frontend/test_case_list/components/test_case_list_empty_spec.js

 import { GlEmptyState, GlSprintf, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import TestCaseListEmptyState from 'ee/test_case_list/components/test_case_list_empty_state.vue';
 
 const createComponent = (props = {}) =>
@@ -44,7 +45,7 @@ describe('TestCaseListEmptyState', () => {
           },
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.emptyStateTitle).toBe('There are no open test cases');
       });
@@ -59,7 +60,7 @@ describe('TestCaseListEmptyState', () => {
           },
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.vm.emptyStateTitle).toBe('There are no archived test cases');
       });
@@ -87,7 +88,7 @@ describe('TestCaseListEmptyState', () => {
             },
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.vm.showDescription).toBe(returnValue);
         },

ee/spec/frontend/test_case_show/components/test_case_show_root_spec.js

 import { GlLink, GlLoadingIcon, GlSprintf, GlAlert } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import TestCaseShowRoot from 'ee/test_case_show/components/test_case_show_root.vue';
 import TestCaseSidebar from 'ee/test_case_show/components/test_case_sidebar.vue';
 import { mockCurrentUserTodo } from 'jest/vue_shared/issuable/list/mock_data';
@@ -94,7 +95,7 @@ describe('TestCaseShowRoot', () => {
             },
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it.each`
@@ -243,7 +244,7 @@ describe('TestCaseShowRoot', () => {
           editTestCaseFormVisible: true,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         wrapper.vm.handleCancelClick();
 
@@ -274,7 +275,7 @@ describe('TestCaseShowRoot', () => {
         testCaseLoading: true,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
@@ -332,7 +333,7 @@ describe('TestCaseShowRoot', () => {
         testCaseLoadFailed: true,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.findComponent(IssuableShow).exists()).toBe(false);
     });
@@ -375,7 +376,7 @@ describe('TestCaseShowRoot', () => {
         editTestCaseFormVisible: true,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.find('[data-testid="save-test-case"]').exists()).toBe(true);
       expect(wrapper.find('[data-testid="cancel-test-case-edit"]').exists()).toBe(true);
@@ -390,7 +391,7 @@ describe('TestCaseShowRoot', () => {
       expect(testCaseSidebar.props('sidebarExpanded')).toBe(true);
 
       testCaseSidebar.vm.$emit('sidebar-toggle');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(testCaseSidebar.props('sidebarExpanded')).toBe(false);
     });

ee/spec/frontend/test_case_show/components/test_case_sidebar_spec.js

@@ -2,6 +2,7 @@ import { GlButton, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Mousetrap from 'mousetrap';
 
+import { nextTick } from 'vue';
 import TestCaseSidebar from 'ee/test_case_show/components/test_case_sidebar.vue';
 import { mockCurrentUserTodo, mockLabels } from 'jest/vue_shared/issuable/list/mock_data';
 
@@ -65,7 +66,7 @@ describe('TestCaseSidebar', () => {
           },
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it.each`
@@ -92,7 +93,7 @@ describe('TestCaseSidebar', () => {
             testCaseMoveInProgress,
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           expect(wrapper.vm.selectProjectDropdownButtonTitle).toBe(returnValue);
         },
@@ -126,7 +127,7 @@ describe('TestCaseSidebar', () => {
             },
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
 
           wrapper.vm.handleTodoButtonClick();
 
@@ -162,7 +163,7 @@ describe('TestCaseSidebar', () => {
           sidebarExpanded: false,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         wrapper.vm.expandSidebarAndOpenDropdown('.js-labels-block .js-sidebar-dropdown-toggle');
 
@@ -178,11 +179,11 @@ describe('TestCaseSidebar', () => {
           sidebarExpanded: false,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         wrapper.vm.expandSidebarAndOpenDropdown('.js-labels-block .js-sidebar-dropdown-toggle');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         wrapper.vm.sidebarEl.dispatchEvent(new Event('transitionend'));
 
@@ -205,7 +206,7 @@ describe('TestCaseSidebar', () => {
           sidebarExpandedOnClick: true,
         });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         wrapper.vm.handleSidebarDropdownClose();
 
@@ -276,7 +277,7 @@ describe('TestCaseSidebar', () => {
         sidebarExpanded: false,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       todoEl = wrapper.find('button');
 

ee/spec/frontend/threat_monitoring/components/alerts/alert_drawer_spec.js

@@ -2,6 +2,7 @@ import { GlAlert, GlDrawer, GlSkeletonLoader } from '@gitlab/ui';
 import * as Sentry from '@sentry/browser';
 import { createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import AlertDrawer from 'ee/threat_monitoring/components/alerts/alert_drawer.vue';
 import { DRAWER_ERRORS } from 'ee/threat_monitoring/components/alerts/constants';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -104,7 +105,7 @@ describe('Alert Drawer', () => {
       ${'skeleton loader'}       | ${'does not display'} | ${findSkeletonLoader}    | ${false} | ${mountExtended}
     `('$status the $component', async ({ findComponent, state, mount }) => {
       createWrapper({ $apollo: shallowApolloMock({}), mount });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findComponent().exists()).toBe(state);
     });
   });

ee/spec/frontend/threat_monitoring/components/alerts/alert_filters_spec.js

 import { GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import AlertFilters from 'ee/threat_monitoring/components/alerts/alert_filters.vue';
 import { ALL, DEFAULT_FILTERS, STATUSES } from 'ee/threat_monitoring/components/alerts/constants';
 import { trimText } from 'helpers/text_helper';
@@ -38,7 +39,7 @@ describe('AlertFilters component', () => {
         const searchTerm = 'abc';
         const search = findSearch();
         search.vm.$emit('input', searchTerm);
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.emitted('filter-change')).toStrictEqual([
           [{ ...DEFAULT_FILTERS, searchTerm }],
         ]);

ee/spec/frontend/threat_monitoring/components/alerts/alert_status_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import AlertStatus from 'ee/threat_monitoring/components/alerts/alert_status.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import updateAlertStatusMutation from '~/graphql_shared/mutations/alert_status_update.mutation.graphql';
@@ -96,7 +97,7 @@ describe('AlertStatus', () => {
 
     it('emits an error when triggered a second time', async () => {
       await selectFirstStatusOption();
-      await wrapper.vm.$nextTick();
+      await nextTick();
       await selectFirstStatusOption();
       expect(wrapper.emitted('alert-error').length).toBeGreaterThan(1);
     });
@@ -105,7 +106,7 @@ describe('AlertStatus', () => {
       const status = 'Unreviewed';
       expect(findStatusDropdown().props('text')).toBe(status);
       await selectFirstStatusOption();
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findStatusDropdown().props('text')).toBe(status);
     });
   });

ee/spec/frontend/threat_monitoring/components/alerts/alerts_list_spec.js

 import { GlIntersectionObserver, GlSkeletonLoading } from '@gitlab/ui';
 import { createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
+import { nextTick } from 'vue';
 import AlertFilters from 'ee/threat_monitoring/components/alerts/alert_filters.vue';
 import AlertStatus from 'ee/threat_monitoring/components/alerts/alert_status.vue';
 import AlertsList from 'ee/threat_monitoring/components/alerts/alerts_list.vue';
@@ -129,7 +130,7 @@ describe('AlertsList component', () => {
       const newFilters = { statuses: [] };
       expect(wrapper.vm.filters).toEqual(DEFAULT_FILTERS);
       findAlertFilters().vm.$emit('filter-change', newFilters);
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.vm.filters).toEqual(newFilters);
     });
 
@@ -170,13 +171,13 @@ describe('AlertsList component', () => {
       expect(findStatusColumnHeader().attributes('aria-sort')).toBe('none');
 
       findStatusColumnHeader().trigger('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.vm.sort).toBe('STATUS_DESC');
       expect(findStatusColumnHeader().attributes('aria-sort')).toBe('descending');
 
       findStatusColumnHeader().trigger('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.vm.sort).toBe('STATUS_ASC');
       expect(findStatusColumnHeader().attributes('aria-sort')).toBe('ascending');
@@ -270,7 +271,7 @@ describe('AlertsList component', () => {
       wrapper.setData({
         errored: true,
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findErrorAlert().exists()).toBe(true);
       expect(findUnconfiguredAlert().exists()).toBe(false);
     });
@@ -281,7 +282,7 @@ describe('AlertsList component', () => {
       wrapper.setData({
         isErrorAlertDismissed: true,
       });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findUnconfiguredAlert().exists()).toBe(false);
     });
   });
@@ -296,7 +297,7 @@ describe('AlertsList component', () => {
         }),
       });
       findGlIntersectionObserver().vm.$emit('appear');
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.vm.$apollo.queries.alerts.fetchMore).toHaveBeenCalledTimes(1);
     });
   });
@@ -315,7 +316,7 @@ describe('AlertsList component', () => {
     it('does refetch the alerts when an alert status has changed', async () => {
       expect(refetchSpy).toHaveBeenCalledTimes(0);
       findStatusColumn().vm.$emit('alert-update');
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(refetchSpy).toHaveBeenCalledTimes(1);
     });
 
@@ -323,7 +324,7 @@ describe('AlertsList component', () => {
       const error = 'Error.';
       expect(findErrorAlert().exists()).toBe(false);
       findStatusColumn().vm.$emit('alert-error', error);
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findErrorAlert().exists()).toBe(true);
       expect(findErrorAlert().text()).toBe(error);
     });

ee/spec/frontend/threat_monitoring/components/instance_project_selector_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import InstanceProjectSelector from 'ee/threat_monitoring/components/instance_project_selector.vue';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -141,7 +141,7 @@ describe('InstanceProjectSelector Component', () => {
     it('notifies project selector of search error', async () => {
       querySpy = jest.fn().mockResolvedValue(mockGetUsersProjects.error);
       createWrapper({ queryResolver: querySpy });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       findProjectSelector().vm.$emit('searched', 'abc');
       await waitForPromises();
       expect(findProjectSelector().props()).toStrictEqual({
@@ -153,7 +153,7 @@ describe('InstanceProjectSelector Component', () => {
     it('notifies project selector of no results', async () => {
       querySpy = jest.fn().mockResolvedValue(mockGetUsersProjects.empty);
       createWrapper({ queryResolver: querySpy });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       findProjectSelector().vm.$emit('searched', 'abc');
       await waitForPromises();
       expect(findProjectSelector().props()).toStrictEqual({

ee/spec/frontend/threat_monitoring/components/policies/no_policies_empty_state_spec.js

+import { nextTick } from 'vue';
 import NoPoliciesEmptyState from 'ee/threat_monitoring/components/policies/no_policies_empty_state.vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
@@ -32,7 +33,7 @@ describe('NoPoliciesEmptyState component', () => {
     ${'does display the empty list state'}       | ${findEmptyListState}   | ${false} | ${() => factory(true)}
   `('$title', async ({ factoryFn, findComponent, state }) => {
     factoryFn();
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(findComponent().exists()).toBe(state);
   });
 });

ee/spec/frontend/threat_monitoring/components/policies/policies_app_spec.js

+import { nextTick } from 'vue';
 import PoliciesApp from 'ee/threat_monitoring/components/policies/policies_app.vue';
 import PoliciesHeader from 'ee/threat_monitoring/components/policies/policies_header.vue';
 import PoliciesList from 'ee/threat_monitoring/components/policies/policies_list.vue';
@@ -35,7 +36,7 @@ describe('Policies App', () => {
       async ({ findFn }) => {
         expect(findPoliciesList().props('shouldUpdatePolicyList')).toBe(false);
         findFn().vm.$emit('update-policy-list', true);
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(findPoliciesList().props('shouldUpdatePolicyList')).toBe(true);
       },
     );

ee/spec/frontend/threat_monitoring/components/policies/policies_header_spec.js

 import { GlAlert, GlButton, GlSprintf } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { NEW_POLICY_BUTTON_TEXT } from 'ee/threat_monitoring/components/constants';
 import PoliciesHeader from 'ee/threat_monitoring/components/policies/policies_header.vue';
 import ScanNewPolicyModal from 'ee/threat_monitoring/components/policies/scan_new_policy_modal.vue';
@@ -24,7 +25,7 @@ describe('Policies Header Component', () => {
       text: projectLinkSuccessText,
       variant: 'success',
     });
-    await wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const createWrapper = ({ provide } = {}) => {
@@ -98,7 +99,7 @@ describe('Policies Header Component', () => {
 
       it('hides the previous alert when scan new modal policy is processing a new link', async () => {
         findScanNewPolicyModal().vm.$emit('updating-project');
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(findAlert().exists()).toBe(false);
       });
     });

ee/spec/frontend/threat_monitoring/components/policies/policies_list_spec.js

 import { GlTable, GlDrawer } from '@gitlab/ui';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { merge } from 'lodash';
 import VueApollo from 'vue-apollo';
 import { POLICY_TYPE_OPTIONS } from 'ee/threat_monitoring/components/constants';
@@ -225,7 +225,7 @@ describe('PoliciesList component', () => {
       ${'scan result'}    | ${POLICY_TYPE_OPTIONS.POLICY_TYPE_SCAN_RESULT}    | ${[POLICY_TYPE_OPTIONS.POLICY_TYPE_NETWORK, POLICY_TYPE_OPTIONS.POLICY_TYPE_SCAN_EXECUTION]}
     `('policies filtered by $description type', async ({ filterBy, hiddenTypes }) => {
       findPolicyTypeFilter().vm.$emit('input', filterBy.value);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findPoliciesTable().text()).toContain(filterBy.text);
       hiddenTypes.forEach((hiddenType) => {
@@ -237,16 +237,16 @@ describe('PoliciesList component', () => {
       expect(scanExecutionPoliciesSpy).toHaveBeenCalledTimes(1);
       expect(wrapper.emitted('update-policy-list')).toBeUndefined();
       wrapper.setProps({ shouldUpdatePolicyList: true });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.emitted('update-policy-list')).toStrictEqual([[false]]);
       expect(scanExecutionPoliciesSpy).toHaveBeenCalledTimes(2);
     });
 
     it('does not emit `update-policy-list` or refetch scan execution policies on `shouldUpdatePolicyList` change to `false`', async () => {
       wrapper.setProps({ shouldUpdatePolicyList: true });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       wrapper.setProps({ shouldUpdatePolicyList: false });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(wrapper.emitted('update-policy-list')).toStrictEqual([[false]]);
       expect(scanExecutionPoliciesSpy).toHaveBeenCalledTimes(2);
     });

ee/spec/frontend/threat_monitoring/components/policies/scan_new_policy_modal_spec.js

 import { GlDropdown, GlModal, GlAlert } from '@gitlab/ui';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import InstanceProjectSelector from 'ee/threat_monitoring/components/instance_project_selector.vue';
 import ScanNewPolicyModal from 'ee/threat_monitoring/components/policies/scan_new_policy_modal.vue';
@@ -115,7 +115,7 @@ describe('ScanNewPolicyModal Component', () => {
     expect(findInstanceProjectSelector().props('selectedProjects')[0].name).toBe('Test 1');
 
     // should restore the previous state when action is not submitted
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(findInstanceProjectSelector().props('selectedProjects')[0].name).toBeUndefined();
   });
 
@@ -139,7 +139,7 @@ describe('ScanNewPolicyModal Component', () => {
 
         // When we click on the delete button, the component should display a warning
         findUnlinkButton().trigger('click');
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(wrapper.findByText(wrapper.vm.$options.i18n.unlinkWarning).exists()).toBe(true);
         expect(findModal().attributes('ok-disabled')).toBeUndefined();

ee/spec/frontend/threat_monitoring/components/policy_editor/network_policy/network_policy_editor_spec.js

 import { GlEmptyState, GlFormCheckbox, GlFormGroup } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { EDITOR_MODE_YAML } from 'ee/threat_monitoring/components/policy_editor/constants';
 import DimDisableContainer from 'ee/threat_monitoring/components/policy_editor/dim_disable_container.vue';
 import {
@@ -357,7 +358,7 @@ describe('NetworkPolicyEditor component', () => {
 
       it('it does not redirect', async () => {
         findPolicyEditorLayout().vm.$emit('save-policy');
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(redirectTo).not.toHaveBeenCalledWith('/threat-monitoring');
       });
     });

ee/spec/frontend/threat_monitoring/components/policy_editor/network_policy/policy_rule_builder_spec.js

 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import {
   RuleDirectionOutbound,
   EndpointMatchModeAny,
@@ -54,13 +55,13 @@ describe('PolicyRuleBuilder component', () => {
 
   it('updates rule direction upon selecting', async () => {
     selectFirstOption("[id='direction']");
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(rule.direction).toEqual(RuleDirectionOutbound);
   });
 
   it('emits endpoint-match-mode-change upon selecting', async () => {
     selectFirstOption("[data-testid='endpoint-match-mode']");
-    await wrapper.vm.$nextTick();
+    await nextTick();
     const event = wrapper.emitted()['endpoint-match-mode-change'];
     expect(event.length).toEqual(2);
     expect(event[0]).toEqual([EndpointMatchModeLabel]);
@@ -86,7 +87,7 @@ describe('PolicyRuleBuilder component', () => {
     it('emits endpoint-labels-change on change', async () => {
       const input = findEndpointLabels();
       input.setValue('foo:bar');
-      await wrapper.vm.$nextTick();
+      await nextTick();
       const event = wrapper.emitted()['endpoint-labels-change'];
       expect(event.length).toEqual(1);
       expect(event[0]).toEqual(['foo:bar']);
@@ -95,7 +96,7 @@ describe('PolicyRuleBuilder component', () => {
 
   it('emits rule-type-change upon selecting', async () => {
     selectFirstOption("[id='ruleMode']");
-    await wrapper.vm.$nextTick();
+    await nextTick();
     const event = wrapper.emitted()['rule-type-change'];
     expect(event.length).toEqual(2);
     expect(event[0]).toEqual([RuleTypeEntity]);
@@ -131,7 +132,7 @@ describe('PolicyRuleBuilder component', () => {
       el.findAll('button')
         .filter((e) => e.text() === 'host')
         .trigger('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(rule.entities).toEqual(['host']);
     });
   });
@@ -153,7 +154,7 @@ describe('PolicyRuleBuilder component', () => {
       const el = findRuleCIDR();
       el.setValue('0.0.0.0/24');
       el.trigger('change');
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(rule.cidr).toEqual('0.0.0.0/24');
     });
   });
@@ -175,14 +176,14 @@ describe('PolicyRuleBuilder component', () => {
       const el = findRuleFQDN();
       el.setValue('some-service.com');
       el.trigger('change');
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(rule.fqdn).toEqual('some-service.com');
     });
   });
 
   it('updates port match mode upon selecting', async () => {
     selectFirstOption("[id='portMatch']");
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(rule.portMatchMode).toEqual(PortMatchModePortProtocol);
   });
 
@@ -203,7 +204,7 @@ describe('PolicyRuleBuilder component', () => {
     it('updates ports', async () => {
       const input = findPorts();
       input.setValue('80/tcp');
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(rule.ports).toEqual('80/tcp');
     });
   });

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_alert_picker_spec.js

 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import PolicyAlertPicker from 'ee/threat_monitoring/components/policy_editor/policy_alert_picker.vue';
 import getAgentCount from 'ee/threat_monitoring/graphql/queries/get_agent_count.query.graphql';
@@ -42,7 +42,7 @@ describe('PolicyAlertPicker component', () => {
         },
       }),
     );
-    await wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   afterEach(() => {

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_editor_spec.js

 import { GlAlert, GlFormSelect } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { POLICY_TYPE_COMPONENT_OPTIONS } from 'ee/threat_monitoring/components/constants';
 import EnvironmentPicker from 'ee/threat_monitoring/components/environment_picker.vue';
 import NetworkPolicyEditor from 'ee/threat_monitoring/components/policy_editor/network_policy/network_policy_editor.vue';
@@ -66,7 +67,7 @@ describe('PolicyEditor component', () => {
     it('shows an alert when "error" is emitted from the component', async () => {
       const errorMessage = 'test';
       findNeworkPolicyEditor().vm.$emit('error', errorMessage);
-      await wrapper.vm.$nextTick();
+      await nextTick();
       const alert = findAlert();
       expect(alert.exists()).toBe(true);
       expect(alert.text()).toBe(errorMessage);
@@ -82,7 +83,7 @@ describe('PolicyEditor component', () => {
       async ({ findComponent, option, policyType }) => {
         const formSelect = findFormSelect();
         formSelect.vm.$emit('change', policyType);
-        await wrapper.vm.$nextTick();
+        await nextTick();
         const component = findComponent();
         expect(formSelect.attributes('value')).toBe(option.value);
         expect(component.exists()).toBe(true);
@@ -91,11 +92,11 @@ describe('PolicyEditor component', () => {
     );
 
     describe('with scan_result_policy feature flag disabled', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         factory({ provide: { glFeatures: { scanResultPolicy: false } } });
         const formSelect = findFormSelect();
         formSelect.vm.$emit('change', POLICY_TYPE_COMPONENT_OPTIONS.scanResult.value);
-        wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('does not render scan result policy', () => {
@@ -124,7 +125,7 @@ describe('PolicyEditor component', () => {
           propsData: { existingPolicy },
           provide: { policyType, glFeatures: { scanResultPolicy: true } },
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
         const formSelect = findFormSelect();
         expect(formSelect.exists()).toBe(true);
         expect(formSelect.attributes('value')).toBe(option.value);

ee/spec/frontend/threat_monitoring/components/policy_editor/scan_execution_policy/scan_execution_policy_editor_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { GlEmptyState } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import PolicyEditorLayout from 'ee/threat_monitoring/components/policy_editor/policy_editor_layout.vue';
 import {
@@ -97,7 +98,7 @@ describe('ScanExecutionPolicyEditor', () => {
   describe('default', () => {
     it('updates the policy yaml when "update-yaml" is emitted', async () => {
       factory();
-      await wrapper.vm.$nextTick();
+      await nextTick();
       const newManifest = 'new yaml!';
       expect(findPolicyEditorLayout().attributes('yamleditorvalue')).toBe(
         DEFAULT_SCAN_EXECUTION_POLICY,
@@ -115,7 +116,7 @@ describe('ScanExecutionPolicyEditor', () => {
       'navigates to the new merge request when "modifyPolicy" is emitted $status',
       async ({ action, event, factoryFn, yamlEditorValue, currentlyAssignedPolicyProject }) => {
         factoryFn();
-        await wrapper.vm.$nextTick();
+        await nextTick();
         findPolicyEditorLayout().vm.$emit(event);
         await waitForPromises();
         expect(modifyPolicy).toHaveBeenCalledTimes(1);
@@ -129,7 +130,7 @@ describe('ScanExecutionPolicyEditor', () => {
           projectPath: defaultProjectPath,
           yamlEditorValue,
         });
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(visitUrl).toHaveBeenCalled();
         expect(visitUrl).toHaveBeenCalledWith(
           `/${currentlyAssignedPolicyProject.fullPath}/-/merge_requests/2`,
@@ -141,7 +142,7 @@ describe('ScanExecutionPolicyEditor', () => {
   describe('when a user is not an owner of the project', () => {
     it('displays the empty state with the appropriate properties', async () => {
       factory({ provide: { disableScanExecutionUpdate: true } });
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(findEmptyState().props()).toMatchObject({
         primaryButtonLink: scanExecutionDocumentationPath,
         svgPath: policyEditorEmptyStateSvgPath,

ee/spec/frontend/threat_monitoring/components/policy_yaml_editor_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import PolicyYamlEditor from 'ee/threat_monitoring/components/policy_yaml_editor.vue';
 import SourceEditor from '~/vue_shared/components/source_editor.vue';
 
@@ -42,7 +43,7 @@ describe('PolicyYamlEditor component', () => {
   it("emits input event on editor's input", async () => {
     const editor = findEditor();
     editor.vm.$emit('input');
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(wrapper.emitted().input).toBeTruthy();
   });
 });

ee/spec/frontend/threat_monitoring/components/statistics_history_spec.js

 import { GlAreaChart } from '@gitlab/ui/dist/charts';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { TOTAL_REQUESTS, ANOMALOUS_REQUESTS } from 'ee/threat_monitoring/components/constants';
 import StatisticsHistory from 'ee/threat_monitoring/components/statistics_history.vue';
 import { mockNominalHistory, mockAnomalousHistory } from '../mocks/mock_data';
@@ -108,7 +108,7 @@ describe('StatisticsHistory component', () => {
   });
 
   describe('chart tooltip', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       const mockParams = {
         seriesData: [
           {
@@ -140,7 +140,7 @@ describe('StatisticsHistory component', () => {
         },
       });
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders the title and series data correctly', () => {

ee/spec/frontend/trials/components/country_or_region_selector_spec.js

-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
@@ -73,7 +73,7 @@ describe('CountryOrRegionSelector', () => {
         // eslint-disable-next-line no-restricted-syntax
         wrapper.setData({ countries, states, country });
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
 
         expect(findFormInput('state').exists()).toBe(display);
       });

ee/spec/frontend/usage_quotas/storage/components/collapsible_project_storage_detail_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import CollapsibleProjectStorageDetail from 'ee/usage_quotas/storage/components/collapsible_project_storage_detail.vue';
 import ProjectStorageDetail from 'ee/usage_quotas/storage/components/project_storage_detail.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
@@ -39,20 +40,18 @@ describe('CollapsibleProjectStorageDetail', () => {
 
   describe('toggle row', () => {
     describe('on click', () => {
-      it('toggles isOpen', () => {
+      it('toggles isOpen', async () => {
         expect(findProjectStorageDetail().exists()).toBe(false);
 
         findTableRow().trigger('click');
 
-        wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(findProjectStorageDetail().exists()).toBe(true);
         findTableRow().trigger('click');
 
-          wrapper.vm.$nextTick(() => {
+        await nextTick();
         expect(findProjectStorageDetail().exists()).toBe(false);
       });
     });
   });
-    });
-  });
 });

ee/spec/frontend/usage_quotas/storage/components/namespace_storage_app_spec.js

 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import NamespaceStorageApp from 'ee/usage_quotas/storage/components/namespace_storage_app.vue';
 import CollapsibleProjectStorageDetail from 'ee/usage_quotas/storage/components/collapsible_project_storage_detail.vue';
 import ProjectList from 'ee/usage_quotas/storage/components/project_list.vue';
@@ -79,7 +80,7 @@ describe('NamespaceStorageApp', () => {
       namespace: namespaceData,
     });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.findAllComponents(CollapsibleProjectStorageDetail)).toHaveLength(3);
   });
@@ -92,7 +93,7 @@ describe('NamespaceStorageApp', () => {
         namespace: namespaceData,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.text()).toContain(formatUsageSize(namespaceData.limit));
     });
@@ -104,7 +105,7 @@ describe('NamespaceStorageApp', () => {
         namespace: { ...namespaceData, limit: 0 },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(wrapper.text()).not.toContain(formatUsageSize(0));
     });
@@ -118,7 +119,7 @@ describe('NamespaceStorageApp', () => {
         namespace: withRootStorageStatistics,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findTotalUsage().text()).toContain(withRootStorageStatistics.totalUsage);
     });
@@ -132,7 +133,7 @@ describe('NamespaceStorageApp', () => {
         namespace: withRootStorageStatistics,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findUsageGraph().exists()).toBe(true);
       expect(findUsageStatistics().exists()).toBe(false);
@@ -145,7 +146,7 @@ describe('NamespaceStorageApp', () => {
         namespace: withRootStorageStatistics,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findUsageStatistics().exists()).toBe(true);
       expect(findUsageGraph().exists()).toBe(false);
@@ -161,7 +162,7 @@ describe('NamespaceStorageApp', () => {
         namespace: namespaceData,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findTotalUsage().text()).toContain('N/A');
     });

ee/spec/frontend/usage_quotas/storage/components/temporary_storage_increase_modal_spec.js

 import { GlModal } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import TemporaryStorageIncreaseModal from 'ee/usage_quotas/storage/components/temporary_storage_increase_modal.vue';
 
 const TEST_LIMIT = '8 bytes';
@@ -18,9 +19,9 @@ describe('Temporary storage increase modal', () => {
     });
   };
   const findModal = () => wrapper.findComponent(GlModal);
-  const showModal = () => {
+  const showModal = async () => {
     findModal().vm.show();
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
   const findModalText = () => document.body.innerText;
 

ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js

 import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
 import ApprovalsList from 'ee/vue_merge_request_widget/components/approvals/approvals_list.vue';
 import stubChildren from 'helpers/stub_children';
@@ -140,16 +141,15 @@ describe('EE MRWidget approvals footer', () => {
         expect(icon.props('name')).toEqual('chevron-right');
       });
 
-      it('expands when clicked', () => {
+      it('expands when clicked', async () => {
         const button = findToggle();
 
         button.vm.$emit('click');
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         expect(wrapper.emitted().input).toEqual([[true]]);
       });
     });
-    });
 
     it('renders avatar list', () => {
       const avatars = findAvatars();
@@ -184,18 +184,13 @@ describe('EE MRWidget approvals footer', () => {
         expect(button.text()).toBe('View eligible approvers');
       });
 
-      it('expands when clicked', (done) => {
+      it('expands when clicked', async () => {
         expect(wrapper.props('value')).toBe(false);
 
         button.vm.$emit('click');
 
-        wrapper.vm
-          .$nextTick()
-          .then(() => {
+        await nextTick();
         expect(wrapper.emitted().input).toEqual([[true]]);
-          })
-          .then(done)
-          .catch(done.fail);
       });
     });
   });

ee/spec/frontend/vue_mr_widget/components/approvals/approvals_spec.js

 import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Approvals from 'ee/vue_merge_request_widget/components/approvals/approvals.vue';
 import ApprovalsAuth from 'ee/vue_merge_request_widget/components/approvals/approvals_auth.vue';
 import ApprovalsFooter from 'ee/vue_merge_request_widget/components/approvals/approvals_footer.vue';
@@ -107,13 +108,12 @@ describe('EE MRWidget approvals', () => {
       createComponent();
     });
 
-    it('shows loading message', () => {
+    it('shows loading message', async () => {
       wrapper.findComponent(ApprovalsFoss).setData({ fetchingApprovals: true });
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.text()).toContain(FETCH_LOADING);
     });
-    });
 
     it('fetches approvals', () => {
       expect(service.fetchApprovals).toHaveBeenCalled();
@@ -121,11 +121,11 @@ describe('EE MRWidget approvals', () => {
   });
 
   describe('when fetch approvals success', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       jest.spyOn(service, 'fetchApprovals').mockResolvedValue();
       createComponent();
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('hides loading message', () => {
@@ -135,11 +135,11 @@ describe('EE MRWidget approvals', () => {
   });
 
   describe('when fetch approvals error', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       jest.spyOn(service, 'fetchApprovals').mockRejectedValue();
       createComponent();
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('still shows loading message', () => {
@@ -157,14 +157,14 @@ describe('EE MRWidget approvals', () => {
     });
 
     describe('when mr is closed', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mr.isOpen = false;
         mr.approvals.user_has_approved = false;
         mr.approvals.user_can_approve = true;
 
         createComponent();
 
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('action is not rendered', () => {
@@ -173,13 +173,13 @@ describe('EE MRWidget approvals', () => {
     });
 
     describe('when user cannot approve', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mr.approvals.user_has_approved = false;
         mr.approvals.user_can_approve = false;
 
         createComponent();
 
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('action is not rendered', () => {
@@ -194,10 +194,10 @@ describe('EE MRWidget approvals', () => {
       });
 
       describe('and MR is unapproved', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           createComponent();
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('approve action is rendered', () => {
@@ -215,11 +215,11 @@ describe('EE MRWidget approvals', () => {
         });
 
         describe('with no approvers', () => {
-          beforeEach(() => {
+          beforeEach(async () => {
             mr.approvals.approved_by = [];
             createComponent();
 
-            return wrapper.vm.$nextTick();
+            await nextTick();
           });
 
           it('approve action (with inverted style) is rendered', () => {
@@ -232,11 +232,11 @@ describe('EE MRWidget approvals', () => {
         });
 
         describe('with approvers', () => {
-          beforeEach(() => {
+          beforeEach(async () => {
             mr.approvals.approved_by = [{ user: { id: 7 } }];
             createComponent();
 
-            return wrapper.vm.$nextTick();
+            await nextTick();
           });
 
           it('approve additionally action is rendered', () => {
@@ -250,13 +250,13 @@ describe('EE MRWidget approvals', () => {
       });
 
       describe('when approve action is clicked', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           createComponent();
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
-        it('shows loading icon', () => {
+        it('shows loading icon', async () => {
           jest.spyOn(service, 'approveMergeRequest').mockReturnValue(new Promise(() => {}));
           const action = findAction();
 
@@ -264,16 +264,15 @@ describe('EE MRWidget approvals', () => {
 
           action.vm.$emit('click');
 
-          return wrapper.vm.$nextTick().then(() => {
+          await nextTick();
           expect(action.props('loading')).toBe(true);
         });
-        });
 
         describe('and after loading', () => {
-          beforeEach(() => {
+          beforeEach(async () => {
             findAction().vm.$emit('click');
 
-            return wrapper.vm.$nextTick();
+            await nextTick();
           });
 
           it('calls service approve', () => {
@@ -294,11 +293,11 @@ describe('EE MRWidget approvals', () => {
         });
 
         describe('and error', () => {
-          beforeEach(() => {
+          beforeEach(async () => {
             jest.spyOn(service, 'approveMergeRequest').mockRejectedValue();
             findAction().vm.$emit('click');
 
-            return wrapper.vm.$nextTick();
+            await nextTick();
           });
 
           it('flashes error message', () => {
@@ -308,51 +307,49 @@ describe('EE MRWidget approvals', () => {
       });
 
       describe('when project requires password to approve', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           mr.approvals.require_password_to_approve = true;
           createComponent();
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         describe('when approve is clicked', () => {
-          beforeEach(() => {
+          beforeEach(async () => {
             findAction().vm.$emit('click');
 
-            return wrapper.vm.$nextTick();
+            await nextTick();
           });
 
           describe('when emits approve', () => {
             const findApprovalsAuth = () => wrapper.findComponent(ApprovalsAuth);
 
-            beforeEach(() => {
+            beforeEach(async () => {
               jest.spyOn(service, 'approveMergeRequestWithAuth').mockRejectedValue();
               jest.spyOn(service, 'approveMergeRequest').mockReturnValue(new Promise(() => {}));
 
               findApprovalsAuth().vm.$emit('approve', TEST_PASSWORD);
 
-              return wrapper.vm.$nextTick();
+              await nextTick();
             });
 
             it('calls service when emits approve', () => {
               expect(service.approveMergeRequestWithAuth).toHaveBeenCalledWith(TEST_PASSWORD);
             });
 
-            it('sets isApproving', () => {
+            it('sets isApproving', async () => {
               wrapper.findComponent(ApprovalsFoss).setData({ isApproving: true });
 
-              return wrapper.vm.$nextTick().then(() => {
+              await nextTick();
               expect(findApprovalsAuth().props('isApproving')).toBe(true);
             });
-            });
 
-            it('sets hasError when auth fails', () => {
+            it('sets hasError when auth fails', async () => {
               wrapper.findComponent(ApprovalsFoss).setData({ hasApprovalAuthError: true });
 
-              return wrapper.vm.$nextTick().then(() => {
+              await nextTick();
               expect(findApprovalsAuth().props('hasError')).toBe(true);
             });
-            });
 
             it('shows flash if general error', () => {
               expect(createFlash).toHaveBeenCalledWith({ message: APPROVE_ERROR });
@@ -363,13 +360,13 @@ describe('EE MRWidget approvals', () => {
     });
 
     describe('when user has approved', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         mr.approvals.user_has_approved = true;
         mr.approvals.user_can_approve = false;
 
         createComponent();
 
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('revoke action is rendered', () => {
@@ -382,10 +379,10 @@ describe('EE MRWidget approvals', () => {
 
       describe('when revoke action is clicked', () => {
         describe('and successful', () => {
-          beforeEach(() => {
+          beforeEach(async () => {
             findAction().vm.$emit('click');
 
-            return wrapper.vm.$nextTick();
+            await nextTick();
           });
 
           it('calls service unapprove', () => {
@@ -406,11 +403,11 @@ describe('EE MRWidget approvals', () => {
         });
 
         describe('and error', () => {
-          beforeEach(() => {
+          beforeEach(async () => {
             jest.spyOn(service, 'unapproveMergeRequest').mockRejectedValue();
             findAction().vm.$emit('click');
 
-            return wrapper.vm.$nextTick();
+            await nextTick();
           });
 
           it('flashes error message', () => {
@@ -431,12 +428,12 @@ describe('EE MRWidget approvals', () => {
       });
 
       describe('and can approve', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           mr.approvals.user_can_approve = true;
 
           createComponent();
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('is shown', () => {
@@ -449,12 +446,12 @@ describe('EE MRWidget approvals', () => {
       });
 
       describe('and cannot approve', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           mr.approvals.user_can_approve = false;
 
           createComponent();
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('is shown', () => {
@@ -469,11 +466,11 @@ describe('EE MRWidget approvals', () => {
   });
 
   describe('approvals summary', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       jest.spyOn(service, 'fetchApprovals').mockResolvedValue(testApprovals());
       createComponent();
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('is rendered with props', () => {
@@ -493,11 +490,11 @@ describe('EE MRWidget approvals', () => {
   describe('footer', () => {
     let footer;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       jest.spyOn(service, 'fetchApprovals').mockResolvedValue(testApprovals());
       createComponent();
 
-      return wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     beforeEach(() => {
@@ -516,11 +513,11 @@ describe('EE MRWidget approvals', () => {
 
     describe('when opened', () => {
       describe('and loading', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           jest.spyOn(service, 'fetchApprovalSettings').mockReturnValue(new Promise(() => {}));
           footer.vm.$emit('input', true);
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('calls service fetch approval rules', () => {
@@ -534,10 +531,10 @@ describe('EE MRWidget approvals', () => {
       });
 
       describe('and finished loading', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           footer.vm.$emit('input', true);
 
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
         it('sets approval rules', () => {
@@ -549,11 +546,11 @@ describe('EE MRWidget approvals', () => {
         });
 
         describe('and closed', () => {
-          beforeEach(() => {
+          beforeEach(async () => {
             service.fetchApprovalSettings.mockClear();
             footer.vm.$emit('input', false);
 
-            return wrapper.vm.$nextTick();
+            await nextTick();
           });
 
           it('does not call service fetch approval rules', () => {

ee/spec/frontend/vue_mr_widget/components/merge_immediately_confirmation_dialog_spec.js

 import { GlSprintf, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import MergeImmediatelyConfirmationDialog from 'ee/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue';
 import { trimText } from 'helpers/text_helper';
 
@@ -7,7 +8,7 @@ describe('MergeImmediatelyConfirmationDialog', () => {
   const docsUrl = 'path/to/merge/immediately/docs';
   let wrapper;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     wrapper = shallowMount(MergeImmediatelyConfirmationDialog, {
       propsData: { docsUrl },
       stubs: {
@@ -15,7 +16,7 @@ describe('MergeImmediatelyConfirmationDialog', () => {
       },
     });
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   });
 
   it('should render informational text explaining why merging immediately can be dangerous', () => {

ee/spec/frontend/vue_mr_widget/components/states/mr_widget_enable_feature_prompt_spec.js

 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import MrWidgetEnableFeaturePrompt from 'ee/vue_merge_request_widget/components/states/mr_widget_enable_feature_prompt.vue';
 import { stubExperiments } from 'helpers/experimentation_helper';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
@@ -56,7 +57,7 @@ describe('MrWidgetEnableFeaturePrompt', () => {
       const button = findDismissButton();
       button.vm.$emit('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(localStorage.getItem(LOCAL_STORAGE_KEY)).toBe('true');
       expect(wrapper.text()).toBe('');

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

 import { GlLink, GlSprintf } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import MergeImmediatelyConfirmationDialog from 'ee/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue';
 import MergeTrainFailedPipelineConfirmationDialog from 'ee/vue_merge_request_widget/components/merge_train_failed_pipeline_confirmation_dialog.vue';
 import MergeTrainHelperIcon from 'ee/vue_merge_request_widget/components/merge_train_helper_icon.vue';
@@ -297,41 +298,35 @@ describe('ReadyToMerge', () => {
   describe('merge immediately warning dialog', () => {
     let dialog;
 
-    const clickMergeImmediately = () => {
+    const clickMergeImmediately = async () => {
       dialog = wrapper.findComponent(MergeImmediatelyConfirmationDialog);
 
       expect(dialog.exists()).toBe(true);
       dialog.vm.show = jest.fn();
       vm.handleMergeButtonClick = jest.fn();
       findMergeButtonDropdown().trigger('click');
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       findMergeImmediatelyButton().trigger('click');
-        return wrapper.vm.$nextTick();
-      });
+      await nextTick();
     };
 
-    it('should show a warning dialog asking for confirmation if the user is trying to skip the merge train', () => {
+    it('should show a warning dialog asking for confirmation if the user is trying to skip the merge train', async () => {
       factory({ preferredAutoMergeStrategy: MT_MERGE_STRATEGY }, false);
-      return clickMergeImmediately().then(() => {
+      await clickMergeImmediately();
       expect(dialog.vm.show).toHaveBeenCalled();
       expect(vm.handleMergeButtonClick).not.toHaveBeenCalled();
     });
-    });
 
-    it('should perform the merge when the user confirms their intent to merge immediately', () => {
+    it('should perform the merge when the user confirms their intent to merge immediately', async () => {
       factory({ preferredAutoMergeStrategy: MT_MERGE_STRATEGY }, false);
-      return clickMergeImmediately()
-        .then(() => {
+      await clickMergeImmediately();
       dialog.vm.$emit('mergeImmediately');
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
+      await nextTick();
       // false (no auto merge), true (merge immediately), true (confirmation clicked)
       expect(vm.handleMergeButtonClick).toHaveBeenCalledWith(false, true, true);
     });
-    });
 
-    it('should not ask for confirmation in non-merge train scenarios', () => {
+    it('should not ask for confirmation in non-merge train scenarios', async () => {
       factory(
         {
           isPipelineActive: true,
@@ -339,12 +334,11 @@ describe('ReadyToMerge', () => {
         },
         false,
       );
-      return clickMergeImmediately().then(() => {
+      await clickMergeImmediately();
       expect(dialog.vm.show).not.toHaveBeenCalled();
       expect(vm.handleMergeButtonClick).toHaveBeenCalled();
     });
   });
-  });
 
   describe('cannot merge', () => {
     describe('when isMergeAllowed=false', () => {

ee/spec/frontend/vue_mr_widget/ee_mr_widget_options_spec.js

@@ -393,25 +393,24 @@ describe('ee merge request widget options', () => {
 
         describe('text connector', () => {
           it('should only render information about fixed issues', (done) => {
-            setImmediate(() => {
+            setImmediate(async () => {
               wrapper.vm.mr.browserPerformanceMetrics.degraded = [];
               wrapper.vm.mr.browserPerformanceMetrics.same = [];
 
-              nextTick(() => {
+              await nextTick();
               expect(
                 trimText(wrapper.find('.js-browser-performance-widget .js-code-text').text()),
               ).toEqual('Browser performance test metrics: 1 improved');
               done();
             });
           });
-          });
 
           it('should only render information about added issues', (done) => {
-            setImmediate(() => {
+            setImmediate(async () => {
               wrapper.vm.mr.browserPerformanceMetrics.improved = [];
               wrapper.vm.mr.browserPerformanceMetrics.same = [];
 
-              nextTick(() => {
+              await nextTick();
               expect(
                 trimText(wrapper.find('.js-browser-performance-widget .js-code-text').text()),
               ).toEqual('Browser performance test metrics: 2 degraded');
@@ -420,7 +419,6 @@ describe('ee merge request widget options', () => {
           });
         });
       });
-      });
 
       describe.each`
         degradation_threshold | shouldExist
@@ -537,28 +535,24 @@ describe('ee merge request widget options', () => {
         });
 
         describe('text connector', () => {
-          it('should only render information about fixed issues', (done) => {
+          it('should only render information about fixed issues', async () => {
             wrapper.vm.mr.loadPerformanceMetrics.degraded = [];
             wrapper.vm.mr.loadPerformanceMetrics.same = [];
 
-            nextTick(() => {
-              expect(
-                trimText(wrapper.find('.js-load-performance-widget .js-code-text').text()),
-              ).toBe('Load performance test metrics: 2 improved');
-              done();
-            });
+            await nextTick();
+            expect(trimText(wrapper.find('.js-load-performance-widget .js-code-text').text())).toBe(
+              'Load performance test metrics: 2 improved',
+            );
           });
 
-          it('should only render information about added issues', (done) => {
+          it('should only render information about added issues', async () => {
             wrapper.vm.mr.loadPerformanceMetrics.improved = [];
             wrapper.vm.mr.loadPerformanceMetrics.same = [];
 
-            nextTick(() => {
-              expect(
-                trimText(wrapper.find('.js-load-performance-widget .js-code-text').text()),
-              ).toBe('Load performance test metrics: 1 degraded');
-              done();
-            });
+            await nextTick();
+            expect(trimText(wrapper.find('.js-load-performance-widget .js-code-text').text())).toBe(
+              'Load performance test metrics: 1 degraded',
+            );
           });
         });
       });
@@ -1091,34 +1085,28 @@ describe('ee merge request widget options', () => {
       });
     });
 
-    it('renders when user cannot remove branch and branch should be removed', (done) => {
+    it('renders when user cannot remove branch and branch should be removed', async () => {
       wrapper.vm.mr.canRemoveSourceBranch = false;
       wrapper.vm.mr.shouldRemoveSourceBranch = true;
       wrapper.vm.mr.state = 'readyToMerge';
 
-      nextTick(() => {
+      await nextTick();
       const tooltip = wrapper.find('[data-testid="question-o-icon"]');
 
       expect(wrapper.text()).toContain('Deletes the source branch');
       expect(tooltip.attributes('title')).toBe(
         'A user with write access to the source branch selected this option',
       );
-
-        done();
-      });
     });
 
-    it('does not render in merged state', (done) => {
+    it('does not render in merged state', async () => {
       wrapper.vm.mr.canRemoveSourceBranch = false;
       wrapper.vm.mr.shouldRemoveSourceBranch = true;
       wrapper.vm.mr.state = 'merged';
 
-      nextTick(() => {
+      await nextTick();
       expect(wrapper.text()).toContain('The source branch has been deleted');
       expect(wrapper.text()).not.toContain('Removes source branch');
-
-        done();
-      });
     });
   });
 
@@ -1137,7 +1125,7 @@ describe('ee merge request widget options', () => {
       status: SUCCESS,
     };
 
-    beforeEach((done) => {
+    beforeEach(async () => {
       createComponent({
         propsData: {
           mrData: {
@@ -1156,7 +1144,7 @@ describe('ee merge request widget options', () => {
         },
       );
 
-      nextTick(done);
+      await nextTick();
     });
 
     it('renders multiple deployments', () => {

ee/spec/frontend/vue_shared/components/accordion/accordion_item_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { uniqueId } from 'lodash';
 import { AccordionItem } from 'ee/vue_shared/components/accordion';
 import accordionEventBus from 'ee/vue_shared/components/accordion/accordion_event_bus';
@@ -89,18 +90,17 @@ describe('AccordionItem component', () => {
 
     it.each([true, false])(
       'passes the "isExpanded" and "isDisabled" state to the title slot',
-      (state) => {
+      async (state) => {
         const titleSlot = jest.fn();
 
         factory({ propsData: { disabled: state }, titleSlot });
         wrapper.vm.isExpanded = state;
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         expect(titleSlot).toHaveBeenCalledWith({
           isExpanded: state,
           isDisabled: state,
         });
-        });
       },
     );
   });
@@ -112,15 +112,14 @@ describe('AccordionItem component', () => {
       expect(contentContainer().isVisible()).toBe(false);
     });
 
-    it('expands when the trigger-element gets clicked', () => {
+    it('expands when the trigger-element gets clicked', async () => {
       expect(contentContainer().isVisible()).toBe(false);
 
       expansionTrigger().trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(contentContainer().isVisible()).toBe(true);
     });
-    });
 
     it('emits a namespaced "closeOtherAccordionItems" event, containing the trigger item as a payload', () => {
       expansionTrigger().trigger('click');
@@ -178,17 +177,16 @@ describe('AccordionItem component', () => {
       expect(contentContainer().attributes('id')).toBe(mockUniqueId);
     });
 
-    it('has a trigger element that has an "aria-expanded" attribute set, to show if it is expanded or collapsed', () => {
+    it('has a trigger element that has an "aria-expanded" attribute set, to show if it is expanded or collapsed', async () => {
       expect(expansionTrigger().attributes('aria-expanded')).toBeFalsy();
 
       // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
       // eslint-disable-next-line no-restricted-syntax
       wrapper.setData({ isExpanded: true });
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(expansionTrigger().attributes('aria-expanded')).toBe('true');
     });
-    });
 
     it('has a trigger element that has a "aria-controls" attribute, which points to the content element', () => {
       expect(expansionTrigger().attributes('aria-controls')).toBeTruthy();

ee/spec/frontend/vue_shared/components/filtered_search_bar/tokens/epic_token_spec.js

 import { GlFilteredSearchTokenSegment } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -79,7 +79,7 @@ describe('EpicToken', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
   });
 
@@ -138,7 +138,7 @@ describe('EpicToken', () => {
         data: { epics: mockEpics },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
     });
 
     it('renders BaseToken component', () => {
@@ -161,7 +161,7 @@ describe('EpicToken', () => {
         value: { data: value },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(getTokenValueEl().text()).toBe(tokenValueString);
     });

ee/spec/frontend/vue_shared/components/filtered_search_bar/tokens/iteration_token_spec.js

@@ -4,6 +4,7 @@ import {
   GlFilteredSearchSuggestion,
 } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
 import IterationToken from 'ee/vue_shared/components/filtered_search_bar/tokens/iteration_token.vue';
@@ -70,7 +71,7 @@ describe('IterationToken', () => {
   it('renders iteration value', async () => {
     wrapper = createComponent({ value: { data: id } });
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
 

ee/spec/frontend/vue_shared/components/sidebar/epics_select/base_spec.js

 import { GlLoadingIcon, GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import { DropdownVariant } from 'ee/vue_shared/components/sidebar/epics_select//constants';
 import EpicsSelectBase from 'ee/vue_shared/components/sidebar/epics_select/base.vue';
 import DropdownValue from 'ee/vue_shared/components/sidebar/epics_select/dropdown_value.vue';
@@ -74,7 +75,7 @@ describe('EpicsSelect', () => {
             issueId: 123,
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
           expect(wrapper.vm.$store.state.issueId).toBe(123);
         });
       });
@@ -85,7 +86,7 @@ describe('EpicsSelect', () => {
             initialEpic: mockEpic2,
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
           expect(wrapper.vm.$store.state.selectedEpic).toBe(mockEpic2);
         });
       });
@@ -96,7 +97,7 @@ describe('EpicsSelect', () => {
             initialEpic: mockEpic2,
           });
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
           expect(wrapper.vm.$store.state.selectedEpic).toBe(mockEpic2);
         });
       });
@@ -109,14 +110,14 @@ describe('EpicsSelect', () => {
         it('should call action `fetchEpics` with `searchQuery` when value is set and `groupEpics` is empty', async () => {
           wrapper.vm.$store.dispatch('setSearchQuery', 'foo');
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
           expect(wrapper.vm.fetchEpics).toHaveBeenCalledWith('foo');
         });
 
         it('should call action `fetchEpics` without any params when value is empty', async () => {
           wrapper.vm.$store.dispatch('setSearchQuery', '');
 
-          await wrapper.vm.$nextTick();
+          await nextTick();
           expect(wrapper.vm.fetchEpics).toHaveBeenCalledWith();
         });
       });
@@ -175,7 +176,7 @@ describe('EpicsSelect', () => {
             epicIssueId: 0,
           });
 
-          await wrapperStandalone.vm.$nextTick();
+          await nextTick();
           wrapperStandalone.vm.handleItemSelect(mockEpic2);
 
           expect(wrapperStandalone.emitted('epicSelect')).toBeTruthy();
@@ -219,7 +220,7 @@ describe('EpicsSelect', () => {
       it('should render DropdownValue component when `showDropdown` is false', async () => {
         wrapper.vm.showDropdown = false;
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findComponent(DropdownValue).exists()).toBe(true);
       });
 
@@ -230,7 +231,7 @@ describe('EpicsSelect', () => {
       it('should render dropdown container element when props `canEdit` & `showDropdown` are true', async () => {
         showDropdown();
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.find('.epic-dropdown-container').exists()).toBe(true);
         expect(wrapper.findComponent(GlDropdown).exists()).toBe(true);
       });
@@ -242,20 +243,20 @@ describe('EpicsSelect', () => {
       it('should render dropdown menu container element when props `canEdit` & `showDropdown` are true', async () => {
         showDropdown();
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.find('.dropdown-menu-epics').exists()).toBe(true);
       });
 
       it('should render a dropdown header component when props `canEdit` & `showDropdown` are true', async () => {
         showDropdown();
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findComponent(GlDropdown).props('headerText')).toBe('Assign Epic');
       });
 
       it('should render a dropdown header component when variant is "standalone"', async () => {
         showDropdown(wrapperStandalone);
-        await wrapperStandalone.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findComponent(GlDropdown).props('headerText')).toBe('Assign Epic');
       });
 
@@ -263,7 +264,7 @@ describe('EpicsSelect', () => {
         showDropdown();
         store.dispatch('receiveEpicsSuccess', [mockEpic1]);
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findAllComponents(GlDropdownItem)).toHaveLength(2);
       });
 
@@ -271,7 +272,7 @@ describe('EpicsSelect', () => {
         showDropdown();
         store.dispatch('requestEpics');
 
-        await wrapper.vm.$nextTick();
+        await nextTick();
         expect(wrapper.findComponent(GlDropdown).findComponent(GlLoadingIcon).exists()).toBe(true);
       });
 

ee/spec/frontend/vue_shared/components/sidebar/epics_select/dropdown_value_spec.js

 import { GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import DropdownValue from 'ee/vue_shared/components/sidebar/epics_select/dropdown_value.vue';
 
 import { mockEpic1 } from '../mock_data';
@@ -30,17 +31,16 @@ describe('EpicsSelect', () => {
           expect(wrapper.vm.hasEpic).toBe(true);
         });
 
-        it('should return `false` when provided `epic` prop is an invalid Epic object', () => {
+        it('should return `false` when provided `epic` prop is an invalid Epic object', async () => {
           wrapper.setProps({
             epic: {},
           });
 
-          return wrapper.vm.$nextTick().then(() => {
+          await nextTick();
           expect(wrapper.vm.hasEpic).toBe(false);
         });
       });
     });
-    });
 
     describe('template', () => {
       it('should render component container', () => {
@@ -57,12 +57,12 @@ describe('EpicsSelect', () => {
         expect(titleEl.text()).toBe(mockEpic1.title);
       });
 
-      it('should render no value element with slot contents when `hasEpic` is false', () => {
+      it('should render no value element with slot contents when `hasEpic` is false', async () => {
         wrapper.setProps({
           epic: {},
         });
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         const noValueEl = wrapper.find('span.no-value');
 
         expect(noValueEl.exists()).toBe(true);
@@ -70,5 +70,4 @@ describe('EpicsSelect', () => {
       });
     });
   });
-  });
 });

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

 import { GlModal, GlSprintf } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import Component from 'ee/vue_shared/license_compliance/components/delete_confirmation_modal.vue';
 import { approvedLicense } from '../mock_data';
@@ -98,13 +98,13 @@ describe('DeleteConfirmationModal', () => {
   describe('interaction', () => {
     it('triggering resetLicenseInModal on cancel', async () => {
       findModal().vm.$emit('cancel', mockEvent);
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(actions.resetLicenseInModal).toHaveBeenCalled();
     });
 
     it('triggering deleteLicense on cancel', async () => {
       findModal().vm.$emit('primary', mockEvent);
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(actions.deleteLicense).toHaveBeenCalled();
     });
   });

ee/spec/frontend/vue_shared/license_compliance/license_management_spec.js

 import { GlButton, GlLoadingIcon, GlIcon, GlPopover } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import LicenseComplianceApprovals from 'ee/approvals/components/license_compliance/index.vue';
 import AddLicenseForm from 'ee/vue_shared/license_compliance/components/add_license_form.vue';
@@ -127,7 +127,7 @@ describe('License Management', () => {
 
   describe('permission based functionality', () => {
     describe('when admin', () => {
-      it('should invoke `setLicenseApproval` action on `addLicense` event on form only', () => {
+      it('should invoke `setLicenseApproval` action on `addLicense` event on form only', async () => {
         const setLicenseApprovalMock = jest.fn();
         createComponent({
           state: { isLoadingManagedLicenses: false },
@@ -136,11 +136,10 @@ describe('License Management', () => {
         });
         wrapper.findComponent(GlButton).vm.$emit('click');
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         wrapper.findComponent(AddLicenseForm).vm.$emit('addLicense');
         expect(setLicenseApprovalMock).toHaveBeenCalled();
       });
-      });
 
       describe('when not loading', () => {
         beforeEach(() => {
@@ -151,14 +150,13 @@ describe('License Management', () => {
           expect(wrapper.findComponent(LicenseComplianceApprovals).exists()).toBe(true);
         });
 
-        it('should render the form if the form is open and disable the form button', () => {
+        it('should render the form if the form is open and disable the form button', async () => {
           wrapper.findComponent(GlButton).vm.$emit('click');
 
-          return wrapper.vm.$nextTick().then(() => {
+          await nextTick();
           expect(wrapper.findComponent(AddLicenseForm).exists()).toBe(true);
           expect(wrapper.findComponent(GlButton).attributes('disabled')).toBe('true');
         });
-        });
 
         it('should not render the form if the form is closed and have active button', () => {
           expect(wrapper.findComponent(AddLicenseForm).exists()).toBe(false);

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

 import { GlButton } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import component from 'ee/vue_shared/security_reports/components/dismiss_button.vue';
 
 describe('DismissalButton', () => {
@@ -21,24 +22,22 @@ describe('DismissalButton', () => {
       expect(wrapper.text()).toBe('Dismiss vulnerability');
     });
 
-    it('should emit dismiss vulnerability when clicked', () => {
+    it('should emit dismiss vulnerability when clicked', async () => {
       wrapper.findComponent(GlButton).trigger('click');
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted().dismissVulnerability).toBeTruthy();
     });
-    });
 
     it('should render the dismiss with comment button', () => {
       expect(wrapper.find('.js-dismiss-with-comment').exists()).toBe(true);
     });
 
-    it('should emit openDismissalCommentBox when clicked', () => {
+    it('should emit openDismissalCommentBox when clicked', async () => {
       wrapper.find('.js-dismiss-with-comment').trigger('click');
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted().openDismissalCommentBox).toBeTruthy();
     });
   });
-  });
 
   describe('with a dismissed vulnerability', () => {
     beforeEach(() => {
@@ -52,12 +51,11 @@ describe('DismissalButton', () => {
       expect(wrapper.text()).toBe('Undo dismiss');
     });
 
-    it('should emit revertDismissVulnerability when clicked', () => {
+    it('should emit revertDismissVulnerability when clicked', async () => {
       wrapper.findComponent(GlButton).trigger('click');
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted().revertDismissVulnerability).toBeTruthy();
     });
-    });
 
     it('should not render the dismiss with comment button', () => {
       expect(wrapper.find('.js-dismiss-with-comment').exists()).toBe(false);

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

 import { GlFormTextarea } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import component from 'ee/vue_shared/security_reports/components/dismissal_comment_box.vue';
 
 describe('DismissalCommentBox', () => {
@@ -18,31 +19,28 @@ describe('DismissalCommentBox', () => {
     expect(wrapper.emitted().clearError).toBeTruthy();
   });
 
-  it('should submit the comment when cmd+enter is pressed', () => {
+  it('should submit the comment when cmd+enter is pressed', async () => {
     wrapper.findComponent(GlFormTextarea).trigger('keydown.enter', {
       metaKey: true,
     });
 
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     expect(wrapper.emitted().submit).toBeTruthy();
   });
-  });
 
-  it('should render the error message', () => {
+  it('should render the error message', async () => {
     const errorMessage = 'You did something wrong';
     wrapper.setProps({ errorMessage });
 
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     expect(wrapper.find('.js-error').text()).toBe(errorMessage);
   });
-  });
 
-  it('should render the placeholder', () => {
+  it('should render the placeholder', async () => {
     const placeholder = 'Please type into the box';
     wrapper.setProps({ placeholder });
 
-    return wrapper.vm.$nextTick(() => {
+    await nextTick();
     expect(wrapper.findComponent(GlFormTextarea).attributes('placeholder')).toBe(placeholder);
   });
-  });
 });

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

 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import component from 'ee/vue_shared/security_reports/components/dismissal_comment_modal_footer.vue';
 import Tracking from '~/tracking';
 
@@ -29,26 +30,24 @@ describe('DismissalCommentModalFooter', () => {
       expect(findAddAndDismissButton().text()).toBe('Add comment & dismiss');
     });
 
-    it('should emit the "addCommentAndDismiss" event when clicked', () => {
+    it('should emit the "addCommentAndDismiss" event when clicked', async () => {
       findAddAndDismissButton().trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted().addCommentAndDismiss).toBeTruthy();
       expect(Tracking.event).toHaveBeenCalledWith(
         '_track_category_',
         'click_add_comment_and_dismiss',
       );
     });
-    });
 
-    it('should emit the cancel event when the cancel button is clicked', () => {
+    it('should emit the cancel event when the cancel button is clicked', async () => {
       wrapper.find('.js-cancel').trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted().cancel).toBeTruthy();
     });
   });
-  });
 
   describe('with an already dismissed vulnerability', () => {
     describe('and adding a comment', () => {
@@ -63,15 +62,14 @@ describe('DismissalCommentModalFooter', () => {
         expect(findAddAndDismissButton().text()).toBe('Add comment');
       });
 
-      it('should emit the "addCommentAndDismiss" event when clicked', () => {
+      it('should emit the "addCommentAndDismiss" event when clicked', async () => {
         findAddAndDismissButton().trigger('click');
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         expect(wrapper.emitted().addDismissalComment).toBeTruthy();
         expect(Tracking.event).toHaveBeenCalledWith('_track_category_', 'click_add_comment');
       });
     });
-    });
 
     describe('and editing a comment', () => {
       beforeEach(() => {
@@ -86,14 +84,13 @@ describe('DismissalCommentModalFooter', () => {
         expect(findAddAndDismissButton().text()).toBe('Save comment');
       });
 
-      it('should emit the "addCommentAndDismiss" event when clicked', () => {
+      it('should emit the "addCommentAndDismiss" event when clicked', async () => {
         findAddAndDismissButton().trigger('click');
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         expect(wrapper.emitted().addDismissalComment).toBeTruthy();
         expect(Tracking.event).toHaveBeenCalledWith('_track_category_', 'click_edit_comment');
       });
     });
   });
-  });
 });

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

 import { GlButton } from '@gitlab/ui';
 
+import { nextTick } from 'vue';
 import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
 import Component from 'ee/vue_shared/security_reports/components/event_item.vue';
 import NoteHeader from '~/notes/components/note_header.vue';
@@ -96,19 +97,14 @@ describe('Event Item', () => {
       expect(wrapper.element).toMatchSnapshot();
     });
 
-    it('emits the button events when clicked', () => {
+    it('emits the button events when clicked', async () => {
       const buttons = wrapper.findAllComponents(GlButton);
       buttons.at(0).trigger('click');
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
+      await nextTick();
       buttons.at(1).trigger('click');
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
+      await nextTick();
       expect(propsData.actionButtons[0].onClick).toHaveBeenCalledTimes(1);
       expect(propsData.actionButtons[1].onClick).toHaveBeenCalledTimes(1);
     });
   });
-  });
 });

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

 import { GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import DismissButton from 'ee/vue_shared/security_reports/components/dismiss_button.vue';
 import component from 'ee/vue_shared/security_reports/components/modal_footer.vue';
 import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue';
@@ -40,14 +41,13 @@ describe('Security Reports modal footer', () => {
       expect(findActionButton().text()).toBe('Create issue');
     });
 
-    it('emits createIssue when create issue button is clicked', () => {
+    it('emits createIssue when create issue button is clicked', async () => {
       findActionButton().trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted().createNewIssue).toBeTruthy();
     });
   });
-  });
 
   describe('can only create jira issue', () => {
     const url = 'https://gitlab.atlassian.net/create-issue';
@@ -95,14 +95,13 @@ describe('Security Reports modal footer', () => {
       expect(findActionButton().text()).toBe('Resolve with merge request');
     });
 
-    it('emits createMergeRequest when create merge request button is clicked', () => {
+    it('emits createMergeRequest when create merge request button is clicked', async () => {
       findActionButton().trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted().createMergeRequest).toBeTruthy();
     });
   });
-  });
 
   describe('can download download patch', () => {
     beforeEach(() => {
@@ -118,14 +117,13 @@ describe('Security Reports modal footer', () => {
       expect(findActionButton().text()).toBe('Download patch to resolve');
     });
 
-    it('emits downloadPatch when download patch button is clicked', () => {
+    it('emits downloadPatch when download patch button is clicked', async () => {
       findActionButton().trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(wrapper.emitted().downloadPatch).toBeTruthy();
     });
   });
-  });
 
   describe('can create merge request and issue', () => {
     beforeEach(() => {

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

 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import SolutionCard from 'ee/vue_shared/security_reports/components/solution_card.vue';
 import { s__ } from '~/locale';
 
@@ -57,9 +58,9 @@ describe('Solution Card', () => {
     });
 
     describe('with download patch', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         wrapper.setProps({ hasDownload: true });
-        return wrapper.vm.$nextTick();
+        await nextTick();
       });
 
       it('renders the create a merge request to implement this solution message', () => {

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

 import { GlCard } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import component from 'ee/vue_shared/security_reports/components/solution_card_vuex.vue';
 import { s__ } from '~/locale';
 
@@ -78,17 +78,16 @@ describe('Solution Card', () => {
       });
 
       describe('with download patch', () => {
-        beforeEach(() => {
+        beforeEach(async () => {
           wrapper.setProps({ hasDownload: true });
-          return wrapper.vm.$nextTick();
+          await nextTick();
         });
 
-        it('does not render the download and apply solution message when there is a file download and a merge request already exists', () => {
+        it('does not render the download and apply solution message when there is a file download and a merge request already exists', async () => {
           wrapper.setProps({ hasMr: true });
-          return wrapper.vm.$nextTick().then(() => {
+          await nextTick();
           expect(wrapper.find('.card-footer').exists()).toBe(false);
         });
-        });
 
         it('renders the create a merge request to implement this solution message', () => {
           expect(wrapper.find('[data-testid="merge-request-solution"]').text()).toMatch(

ee/spec/frontend/vue_shared/survey_banner/survey_banner_spec.js

 import { GlBanner, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import SharedSurveyBanner from 'ee/vue_shared/survey_banner/survey_banner.vue';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
@@ -77,7 +78,7 @@ describe('Shared Survey Banner component', () => {
     async ({ localStorageValue, isShown }) => {
       localStorage.setItem(TEST_LOCAL_STORAGE_KEY, localStorageValue);
       createWrapper();
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findGlBanner().exists()).toBe(isShown);
     },
@@ -92,7 +93,7 @@ describe('Shared Survey Banner component', () => {
       expect(findGlBanner().exists()).toBe(true);
 
       findAskLaterButton().vm.$emit('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
       const date = new Date(localStorage.getItem(TEST_LOCAL_STORAGE_KEY));
 
       expect(findGlBanner().exists()).toBe(false);
@@ -104,7 +105,7 @@ describe('Shared Survey Banner component', () => {
       expect(findGlBanner().exists()).toBe(true);
 
       findGlBanner().vm.$emit('close');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findGlBanner().exists()).toBe(false);
       expect(localStorage.getItem(TEST_LOCAL_STORAGE_KEY)).toBe(TEST_BANNER_ID);

ee/spec/frontend/vulnerabilities/header_spec.js

 import { GlButton, GlBadge } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import VueApollo from 'vue-apollo';
 import Api from 'ee/api';
@@ -285,14 +285,13 @@ describe('Vulnerability Header', () => {
         expect(findGlButton().text()).toBe('Download patch to resolve');
       });
 
-      it('emits downloadPatch when download patch button is clicked', () => {
+      it('emits downloadPatch when download patch button is clicked', async () => {
         findGlButton().vm.$emit('click');
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         expect(download).toHaveBeenCalledWith({ fileData: diff, fileName: `remediation.patch` });
       });
     });
   });
-  });
 
   describe('state badge', () => {
     const badgeVariants = {
@@ -369,7 +368,7 @@ describe('Vulnerability Header', () => {
 
     it('the resolution alert component should not be shown if when the vulnerability is already resolved', async () => {
       wrapper.vm.vulnerability.state = 'resolved';
-      await wrapper.vm.$nextTick();
+      await nextTick();
       const alert = findResolutionAlert();
 
       expect(alert.exists()).toBe(false);

ee/spec/frontend/vulnerabilities/history_comment_editor_spec.js

 import { GlFormTextarea } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import HistoryCommentEditor from 'ee/vulnerabilities/components/history_comment_editor.vue';
 
 describe('History Comment Editor', () => {
@@ -76,7 +77,7 @@ describe('History Comment Editor', () => {
   it('disables the save button when there is no text or only whitespace in the textarea', async () => {
     createWrapper({ initialComment: 'some comment' });
     textarea().vm.$emit('input', '    ');
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(saveButton().props('disabled')).toBe(true);
   });

ee/spec/frontend/vulnerabilities/history_comment_spec.js

 import { mount } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createNoteMutation from 'ee/security_dashboard/graphql/mutations/note_create.mutation.graphql';
 import destroyNoteMutation from 'ee/security_dashboard/graphql/mutations/note_destroy.mutation.graphql';
@@ -104,14 +104,14 @@ describe('History Comment', () => {
 
   // Either the add comment button or the edit button will exist, but not both at the same time, so we'll just find
   // whichever one exists and click it to show the editor.
-  const showEditView = () => {
+  const showEditView = async () => {
     if (addCommentButton().exists()) {
       addCommentButton().trigger('click');
     } else {
       editButton().vm.$emit('click');
     }
 
-    return wrapper.vm.$nextTick();
+    await nextTick();
   };
 
   const editAndSaveNewContent = async (content) => {
@@ -138,13 +138,11 @@ describe('History Comment', () => {
       });
     });
 
-    it('shows the add comment button when the cancel button is clicked in the comment editor', () => {
-      return showEditView()
-        .then(() => {
+    it('shows the add comment button when the cancel button is clicked in the comment editor', async () => {
+      await showEditView();
       commentEditor().vm.$emit('onCancel');
-          return wrapper.vm.$nextTick();
-        })
-        .then(expectAddCommentView);
+      await nextTick();
+      expectAddCommentView();
     });
   });
 
@@ -165,39 +163,30 @@ describe('History Comment', () => {
       });
     });
 
-    it('shows the comment when the cancel button is clicked in the comment editor', () => {
-      return showEditView()
-        .then(() => {
+    it('shows the comment when the cancel button is clicked in the comment editor', async () => {
+      await showEditView();
       commentEditor().vm.$emit('onCancel');
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
+      await nextTick();
       expectExistingCommentView();
       expect(eventItem().element.innerHTML).toContain(note.bodyHtml);
     });
-    });
 
-    it('shows the delete confirmation buttons when the delete button is clicked', () => {
+    it('shows the delete confirmation buttons when the delete button is clicked', async () => {
       deleteButton().trigger('click');
-
-      return wrapper.vm.$nextTick().then(expectDeleteConfirmView);
+      await nextTick();
+      expectDeleteConfirmView();
     });
 
-    it('shows the comment when the cancel button is clicked on the delete confirmation', () => {
+    it('shows the comment when the cancel button is clicked on the delete confirmation', async () => {
       deleteButton().trigger('click');
 
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
+      await nextTick();
       cancelDeleteButton().trigger('click');
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
+      await nextTick();
       expectExistingCommentView();
       expect(eventItem().element.innerHTML).toContain(note.bodyHtml);
     });
   });
-  });
 
   const EXPECTED_CREATE_VARS = {
     discussionId: TEST_DISCUSSION_GID,
@@ -233,7 +222,7 @@ describe('History Comment', () => {
       createWrapper({ propsData });
 
       await editAndSaveNewContent('new comment');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(commentEditor().props('isSaving')).toBe(true);
     });
@@ -297,10 +286,10 @@ describe('History Comment', () => {
 
       deleteButton().trigger('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       confirmDeleteButton().trigger('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(confirmDeleteButton().props('loading')).toBe(true);
       expect(cancelDeleteButton().props('disabled')).toBe(true);
 
@@ -313,7 +302,7 @@ describe('History Comment', () => {
       createWrapper({ propsData: { comment: note } });
 
       deleteButton().trigger('click');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       confirmDeleteButton().trigger('click');
       expect(destroyNoteMutationSpy).toHaveBeenCalledWith({
@@ -327,7 +316,7 @@ describe('History Comment', () => {
 
       deleteButton().trigger('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       confirmDeleteButton().trigger('click');
 
       await waitForPromises();
@@ -343,7 +332,7 @@ describe('History Comment', () => {
 
       deleteButton().trigger('click');
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
       confirmDeleteButton().trigger('click');
 
       await waitForPromises();

ee/spec/frontend/vulnerabilities/related_issues_spec.js

 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
+import { nextTick } from 'vue';
 import RelatedIssues from 'ee/vulnerabilities/components/related_issues.vue';
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
@@ -178,7 +179,7 @@ describe('Vulnerability related issues component', () => {
       createWrapper({ data: { isFormVisible: from } });
 
       blockEmit('toggleAddRelatedIssuesForm');
-      await wrapper.vm.$nextTick();
+      await nextTick();
       expect(blockProp('isFormVisible')).toBe(to);
     });
 
@@ -191,7 +192,7 @@ describe('Vulnerability related issues component', () => {
         },
       });
       blockEmit('addIssuableFormCancel');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(blockProp('isFormVisible')).toBe(false);
       expect(blockProp('inputValue')).toBe('');
@@ -206,7 +207,7 @@ describe('Vulnerability related issues component', () => {
       const touchedReference = 'touchedReference';
       createWrapper({ data: { state: { pendingReferences } } });
       blockEmit('addIssuableFormInput', { untouchedRawReferences, touchedReference });
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(blockProp('pendingReferences')).toEqual(
         pendingReferences.concat(untouchedRawReferences),
@@ -217,7 +218,7 @@ describe('Vulnerability related issues component', () => {
     it('processes pending references', async () => {
       createWrapper();
       blockEmit('addIssuableFormBlur', '135 246');
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(blockProp('pendingReferences')).toEqual(['135', '246']);
       expect(blockProp('inputValue')).toBe('');
@@ -226,7 +227,7 @@ describe('Vulnerability related issues component', () => {
     it('removes pending reference', async () => {
       createWrapper({ data: { state: { pendingReferences: ['135', '246', '357'] } } });
       blockEmit('pendingIssuableRemoveRequest', 1);
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(blockProp('pendingReferences')).toEqual(['135', '357']);
     });

ee/spec/frontend/vulnerabilities/vulnerability_state_dropdown_spec.js

 import { GlDropdown } from '@gitlab/ui';
+import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import VulnerabilityStateDropdown from 'ee/vulnerabilities/components/vulnerability_state_dropdown.vue';
 import { VULNERABILITY_STATE_OBJECTS } from 'ee/vulnerabilities/constants';
@@ -51,18 +52,17 @@ describe('Vulnerability state dropdown component', () => {
 
     it.each(vulnerabilityStateObjects)(
       `when the %s dropdown item is clicked, it's the only one that's selected`,
-      ({ state }) => {
+      async ({ state }) => {
         // Start off with an unknown state so we can click through each item and see it change.
         createWrapper('some unknown state');
         const dropdownItem = dropdownItemFor(state);
 
         dropdownItem.trigger('click');
 
-        return wrapper.vm.$nextTick().then(() => {
+        await nextTick();
         dropdownItems().wrappers.forEach((item) => {
           expect(isSelected(item)).toBe(item.attributes('data-testid') === state);
         });
-        });
       },
     );
   });
@@ -70,78 +70,67 @@ describe('Vulnerability state dropdown component', () => {
   describe('tests that use the default wrapper', () => {
     beforeEach(() => createWrapper());
 
-    it('the save button should be enabled/disabled based on if the selected item has changed or not', () => {
+    it('the save button should be enabled/disabled based on if the selected item has changed or not', async () => {
       const originalItem = selectedItem();
 
       expect(isDisabled(saveButton())).toBe(true); // Check that the save button starts off as disabled.
       firstUnselectedItem().trigger('click'); // Click on an unselected item.
 
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
+      await nextTick();
       expect(isDisabled(saveButton())).toBe(false); // Check that the save button has been enabled.
       originalItem.trigger('click'); // Re-select the original item.
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
+
+      await nextTick();
       expect(isDisabled(saveButton())).toBe(true); // Check that the save button has once again been disabled.
     });
-    });
 
-    it('clicking on the save button will close the dropdown and fire a change event', () => {
+    it('clicking on the save button will close the dropdown and fire a change event', async () => {
       createWrapper();
 
       expect(isDisabled(saveButton())).toBe(true); // Check that the save button starts off disabled.
       firstUnselectedItem().trigger('click'); // Click on an unselected item.
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       saveButton().vm.$emit('click'); // Click on the save button.
       const changeEvent = wrapper.emitted('change');
       expect(wrapper.vm.$refs.dropdown.hide).toHaveBeenCalledTimes(1); // Check that the dropdown hide function was called.
       expect(changeEvent).toHaveLength(1); // Check that a change event was emitted.
       expect(changeEvent[0][0]).toBeTruthy(); // Check that the change event has been emitted with something as its first parameter.
     });
-    });
 
-    it('clicking on the cancel button will close the dropdown without emitting any events', () => {
+    it('clicking on the cancel button will close the dropdown without emitting any events', async () => {
       expect(isDisabled(saveButton())).toBe(true); // Check that the save button starts out disabled.
       firstUnselectedItem().trigger('click'); // Click on an unselected item.
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(isDisabled(saveButton())).toBe(false); // Check that the save button is enabled.
       cancelButton().vm.$emit('click'); // Click on the cancel button.
       expect(Object.keys(wrapper.emitted())).toHaveLength(0); // Check that no events have been emitted.
       expect(wrapper.vm.$refs.dropdown.hide).toHaveBeenCalledTimes(1); // Check that hide was called on the inner dropdown.
     });
-    });
 
-    it('when the dropdown is closed, the selected item resets back to the initial item', () => {
+    it('when the dropdown is closed, the selected item resets back to the initial item', async () => {
       const initialSelectedItem = selectedItem();
 
       firstUnselectedItem().trigger('click'); // Click on an unselected item.
 
-      return wrapper.vm
-        .$nextTick()
-        .then(() => {
+      await nextTick();
       expect(selectedItem().element).not.toBe(initialSelectedItem.element); // Check that the selected item actually changed.
       innerDropdown().vm.$emit('hide'); // Emit the dropdown hide event.
-          return wrapper.vm.$nextTick();
-        })
-        .then(() => {
+
+      await nextTick();
       expect(selectedItem().element).toBe(initialSelectedItem.element); // Check that the selected item has been reset back to the initial item.
     });
-    });
 
-    it('when the parent component changes the state, the dropdown will update its selected and initial item', () => {
+    it('when the parent component changes the state, the dropdown will update its selected and initial item', async () => {
       const stateObject = vulnerabilityStateObjects[1];
 
       wrapper.setProps({ initialState: stateObject.state }); // Change the state.
 
-      return wrapper.vm.$nextTick().then(() => {
+      await nextTick();
       expect(innerDropdown().props('text')).toBe(stateObject.buttonText); // Check that the dropdown button's value matches the initial state.
       expect(selectedItem().text()).toMatch(stateObject.dropdownText); // Check that the selected item is the initial state.
       expect(isDisabled(saveButton())).toBe(true); // Check that the save button is disabled.
     });
   });
-  });
 });