diff --git a/ee/spec/frontend/boards/components/group_select_spec.js b/ee/spec/frontend/boards/components/group_select_spec.js
index 479fbb1b2645ccd1a1c34363a5625fe2624794ff..2496001c3eb8195e81e4d138965c020575cc176e 100644
--- a/ee/spec/frontend/boards/components/group_select_spec.js
+++ b/ee/spec/frontend/boards/components/group_select_spec.js
@@ -1,10 +1,11 @@
 import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import Vue from 'vue';
 import Vuex from 'vuex';
 import GroupSelect from 'ee/boards/components/group_select.vue';
 import defaultState from 'ee/boards/stores/state';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
 import { mockList } from 'jest/boards/mock_data';
 import { mockGroup0, mockSubGroups } from '../mock_data';
 
@@ -22,7 +23,13 @@ describe('GroupSelect component', () => {
   const findInMenuLoadingIcon = () => wrapper.findByTestId('dropdown-text-loading-icon');
   const findEmptySearchMessage = () => wrapper.findByTestId('empty-result-message');
 
-  const createStore = ({ state = {}, subGroups, selectedGroup, moreGroupsLoading = false }) => {
+  const createStore = ({
+    state = {},
+    subGroups,
+    selectedGroup,
+    moreGroupsLoading,
+    fetchSubGroupsMock,
+  }) => {
     Vue.use(Vuex);
 
     store = new Vuex.Store({
@@ -38,7 +45,7 @@ describe('GroupSelect component', () => {
         },
       },
       actions: {
-        fetchSubGroups: jest.fn(),
+        fetchSubGroups: fetchSubGroupsMock,
         setSelectedGroup: jest.fn(),
       },
     });
@@ -50,6 +57,7 @@ describe('GroupSelect component', () => {
     selectedGroup = {},
     loading = false,
     moreGroupsLoading = false,
+    fetchSubGroupsMock = jest.fn(),
   } = {}) => {
     createStore({
       state,
@@ -57,6 +65,7 @@ describe('GroupSelect component', () => {
       selectedGroup,
       loading,
       moreGroupsLoading,
+      fetchSubGroupsMock,
     });
 
     wrapper = extendedWrapper(
@@ -64,11 +73,6 @@ describe('GroupSelect component', () => {
         propsData: {
           list: mockList,
         },
-        data() {
-          return {
-            initialLoading: loading,
-          };
-        },
         store,
         provide: {
           groupId: 1,
@@ -92,13 +96,18 @@ describe('GroupSelect component', () => {
 
   describe('when mounted', () => {
     it('displays a loading icon while descendant groups are being fetched', async () => {
-      createWrapper({ loading: true });
-      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
-      // eslint-disable-next-line no-restricted-syntax
-      wrapper.setData({ initialLoading: true });
-      await nextTick();
+      let promiseResolve;
+      const mockPromise = new Promise((resolve) => {
+        promiseResolve = resolve;
+      });
+      createWrapper({ fetchSubGroupsMock: () => mockPromise });
 
       expect(findGlDropdownLoadingIcon().exists()).toBe(true);
+
+      promiseResolve();
+      await waitForPromises();
+
+      expect(findGlDropdownLoadingIcon().exists()).toBe(false);
     });
   });
 
@@ -121,7 +130,7 @@ describe('GroupSelect component', () => {
         expect(findFirstGlDropdownItem().text()).toContain(mockGroup0.name);
       });
 
-      it("doesn't render loading icon in the menu", () => {
+      it('does not render loading icon in the menu', () => {
         expect(findInMenuLoadingIcon().isVisible()).toBe(false);
       });