Add latest changes from gitlab-org/gitlab@master

68 files changed, 187 insertions, 176 deletions

diff --git a/spec/frontend/__helpers__/keep_alive_component_helper_spec.js b/spec/frontend/__helpers__/keep_alive_component_helper_spec.js
index dcccc14f396..54d397d0997 100644
--- a/spec/frontend/__helpers__/keep_alive_component_helper_spec.js
+++ b/spec/frontend/__helpers__/keep_alive_component_helper_spec.js
@@ -17,16 +17,16 @@ describe('keepAlive', () => {
   });
 
   it('converts a component to a keep-alive component', async () => {
-    const { element } = wrapper.find(component);
+    const { element } = wrapper.findComponent(component);
 
     await wrapper.vm.deactivate();
-    expect(wrapper.find(component).exists()).toBe(false);
+    expect(wrapper.findComponent(component).exists()).toBe(false);
 
     await wrapper.vm.activate();
 
     // assert that when the component is destroyed and re-rendered, the
     // newly rendered component has the reference to the old component
     // (i.e. the old component was deactivated and activated)
-    expect(wrapper.find(component).element).toBe(element);
+    expect(wrapper.findComponent(component).element).toBe(element);
   });
 });
diff --git a/spec/frontend/access_tokens/components/new_access_token_app_spec.js b/spec/frontend/access_tokens/components/new_access_token_app_spec.js
index b25ac4c6aa8..9aaf2d310e6 100644
--- a/spec/frontend/access_tokens/components/new_access_token_app_spec.js
+++ b/spec/frontend/access_tokens/components/new_access_token_app_spec.js
@@ -23,12 +23,14 @@ describe('~/access_tokens/components/new_access_token_app', () => {
   };
 
   const triggerSuccess = async (newToken = 'new token') => {
-    wrapper.find(DomElementListener).vm.$emit(EVENT_SUCCESS, { detail: [{ new_token: newToken }] });
+    wrapper
+      .findComponent(DomElementListener)
+      .vm.$emit(EVENT_SUCCESS, { detail: [{ new_token: newToken }] });
     await nextTick();
   };
 
   const triggerError = async (errors = ['1', '2']) => {
-    wrapper.find(DomElementListener).vm.$emit(EVENT_ERROR, { detail: [{ errors }] });
+    wrapper.findComponent(DomElementListener).vm.$emit(EVENT_ERROR, { detail: [{ errors }] });
     await nextTick();
   };
 
diff --git a/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js b/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js
index bffadbde087..a2dc3ac0a76 100644
--- a/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js
+++ b/spec/frontend/add_context_commits_modal/components/add_context_commits_modal_spec.js
@@ -48,8 +48,8 @@ describe('AddContextCommitsModal', () => {
     return wrapper;
   };
 
-  const findModal = () => wrapper.find(GlModal);
-  const findSearch = () => wrapper.find(GlSearchBoxByType);
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findSearch = () => wrapper.findComponent(GlSearchBoxByType);
 
   beforeEach(() => {
     wrapper = createWrapper();
@@ -107,7 +107,7 @@ describe('AddContextCommitsModal', () => {
 
     it('a disabled ok button in first tab, when row is selected in second tab', () => {
       createWrapper({ selectedContextCommits: [commit] });
-      expect(wrapper.find(GlModal).attributes('ok-disabled')).toBe('true');
+      expect(wrapper.findComponent(GlModal).attributes('ok-disabled')).toBe('true');
     });
   });
 
diff --git a/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js b/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js
index 85ecb4313c2..1a92b9ee536 100644
--- a/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js
+++ b/spec/frontend/add_context_commits_modal/components/review_tab_container_spec.js
@@ -32,7 +32,7 @@ describe('ReviewTabContainer', () => {
 
   it('shows loading icon when commits are being loaded', () => {
     createWrapper({ isLoading: true });
-    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 
   it('shows loading error text when API call fails', () => {
diff --git a/spec/frontend/admin/topics/components/topic_select_spec.js b/spec/frontend/admin/topics/components/topic_select_spec.js
index fae5ca1ef5f..f61af6203f0 100644
--- a/spec/frontend/admin/topics/components/topic_select_spec.js
+++ b/spec/frontend/admin/topics/components/topic_select_spec.js
@@ -77,8 +77,8 @@ describe('TopicSelect', () => {
 
     const dropdownItems = findAllDropdownItems();
 
-    expect(dropdownItems.at(0).find(GlAvatarLabeled).props('label')).toBe('Topic 1');
-    expect(dropdownItems.at(1).find(GlAvatarLabeled).props('label')).toBe('GitLab');
+    expect(dropdownItems.at(0).findComponent(GlAvatarLabeled).props('label')).toBe('Topic 1');
+    expect(dropdownItems.at(1).findComponent(GlAvatarLabeled).props('label')).toBe('GitLab');
   });
 
   it('emits `click` event when topic selected', () => {
diff --git a/spec/frontend/alert_management/components/alert_management_empty_state_spec.js b/spec/frontend/alert_management/components/alert_management_empty_state_spec.js
index c2bf90e7635..0d6bc1b74fb 100644
--- a/spec/frontend/alert_management/components/alert_management_empty_state_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_empty_state_spec.js
@@ -25,7 +25,7 @@ describe('AlertManagementEmptyState', () => {
     }
   });
 
-  const EmptyState = () => wrapper.find(GlEmptyState);
+  const EmptyState = () => wrapper.findComponent(GlEmptyState);
 
   describe('Empty state', () => {
     it('shows empty state', () => {
diff --git a/spec/frontend/alert_management/components/alert_management_list_wrapper_spec.js b/spec/frontend/alert_management/components/alert_management_list_wrapper_spec.js
index bba5fcbbf08..3a5fb99fdf1 100644
--- a/spec/frontend/alert_management/components/alert_management_list_wrapper_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_list_wrapper_spec.js
@@ -28,8 +28,8 @@ describe('AlertManagementList', () => {
 
   describe('Alert List Wrapper', () => {
     it('should show the empty state when alerts are not enabled', () => {
-      expect(wrapper.find(AlertManagementEmptyState).exists()).toBe(true);
-      expect(wrapper.find(AlertManagementTable).exists()).toBe(false);
+      expect(wrapper.findComponent(AlertManagementEmptyState).exists()).toBe(true);
+      expect(wrapper.findComponent(AlertManagementTable).exists()).toBe(false);
     });
 
     it('should show the alerts table when alerts are enabled', () => {
@@ -39,8 +39,8 @@ describe('AlertManagementList', () => {
         },
       });
 
-      expect(wrapper.find(AlertManagementEmptyState).exists()).toBe(false);
-      expect(wrapper.find(AlertManagementTable).exists()).toBe(true);
+      expect(wrapper.findComponent(AlertManagementEmptyState).exists()).toBe(false);
+      expect(wrapper.findComponent(AlertManagementTable).exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/alert_management/components/alert_management_table_spec.js b/spec/frontend/alert_management/components/alert_management_table_spec.js
index 5b823694b99..3e1438c37d6 100644
--- a/spec/frontend/alert_management/components/alert_management_table_spec.js
+++ b/spec/frontend/alert_management/components/alert_management_table_spec.js
@@ -172,8 +172,8 @@ describe('AlertManagementTable', () => {
 
       await nextTick();
 
-      expect(wrapper.find(GlTable).exists()).toBe(true);
-      expect(findAlertsTable().find(GlIcon).classes('icon-critical')).toBe(true);
+      expect(wrapper.findComponent(GlTable).exists()).toBe(true);
+      expect(findAlertsTable().findComponent(GlIcon).classes('icon-critical')).toBe(true);
     });
 
     it('renders severity text', () => {
@@ -200,7 +200,7 @@ describe('AlertManagementTable', () => {
         loading: false,
       });
 
-      const avatar = findAssignees().at(1).find(GlAvatar);
+      const avatar = findAssignees().at(1).findComponent(GlAvatar);
       const { src, label } = avatar.attributes();
       const { name, avatarUrl } = mockAlerts[1].assignees.nodes[0];
 
diff --git a/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js b/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
index dba9c8be669..1e125bdfd3a 100644
--- a/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
+++ b/spec/frontend/alerts_settings/components/alert_mapping_builder_spec.js
@@ -47,7 +47,7 @@ describe('AlertMappingBuilder', () => {
     expect(findColumnInRow(0, 2).text()).toContain(i18n.columns.payloadKeyTitle);
     expect(findColumnInRow(0, 3).text()).toContain(i18n.columns.fallbackKeyTitle);
 
-    const fallbackColumnIcon = findColumnInRow(0, 3).find(GlIcon);
+    const fallbackColumnIcon = findColumnInRow(0, 3).findComponent(GlIcon);
     expect(fallbackColumnIcon.exists()).toBe(true);
     expect(fallbackColumnIcon.attributes('name')).toBe('question');
     expect(fallbackColumnIcon.attributes('title')).toBe(i18n.fallbackTooltip);
@@ -55,7 +55,7 @@ describe('AlertMappingBuilder', () => {
 
   it('renders disabled form input for each mapped field', () => {
     alertFields.forEach((field, index) => {
-      const input = findColumnInRow(index + 1, 0).find(GlFormInput);
+      const input = findColumnInRow(index + 1, 0).findComponent(GlFormInput);
       const types = field.types.map((t) => capitalizeFirstCharacter(t.toLowerCase())).join(' or ');
       expect(input.attributes('value')).toBe(`${field.label} (${types})`);
       expect(input.attributes('disabled')).toBe('');
@@ -71,7 +71,7 @@ describe('AlertMappingBuilder', () => {
 
   it('renders mapping dropdown for each field', () => {
     alertFields.forEach(({ types }, index) => {
-      const dropdown = findColumnInRow(index + 1, 2).find(GlDropdown);
+      const dropdown = findColumnInRow(index + 1, 2).findComponent(GlDropdown);
       const { searchBox, dropdownItems, mappingOptions } = getDropdownContent(dropdown, types);
 
       expect(dropdown.exists()).toBe(true);
@@ -82,7 +82,7 @@ describe('AlertMappingBuilder', () => {
 
   it('renders fallback dropdown only for the fields that have fallback', () => {
     alertFields.forEach(({ types, numberOfFallbacks }, index) => {
-      const dropdown = findColumnInRow(index + 1, 3).find(GlDropdown);
+      const dropdown = findColumnInRow(index + 1, 3).findComponent(GlDropdown);
       expect(dropdown.exists()).toBe(Boolean(numberOfFallbacks));
 
       if (numberOfFallbacks) {
@@ -96,8 +96,8 @@ describe('AlertMappingBuilder', () => {
   it('emits event with selected mapping', () => {
     const mappingToSave = { fieldName: 'TITLE', mapping: 'PARSED_TITLE' };
     jest.spyOn(transformationUtils, 'transformForSave').mockReturnValue(mappingToSave);
-    const dropdown = findColumnInRow(1, 2).find(GlDropdown);
-    const option = dropdown.find(GlDropdownItem);
+    const dropdown = findColumnInRow(1, 2).findComponent(GlDropdown);
+    const option = dropdown.findComponent(GlDropdownItem);
     option.vm.$emit('click');
     expect(wrapper.emitted('onMappingUpdate')[0]).toEqual([mappingToSave]);
   });
diff --git a/spec/frontend/alerts_settings/components/alerts_form_spec.js b/spec/frontend/alerts_settings/components/alerts_form_spec.js
index a045954dfb8..33098282bf8 100644
--- a/spec/frontend/alerts_settings/components/alerts_form_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_form_spec.js
@@ -5,7 +5,7 @@ describe('Alert integration settings form', () => {
   let wrapper;
   const service = { updateSettings: jest.fn().mockResolvedValue() };
 
-  const findForm = () => wrapper.find({ ref: 'settingsForm' });
+  const findForm = () => wrapper.findComponent({ ref: 'settingsForm' });
 
   beforeEach(() => {
     wrapper = shallowMount(AlertsSettingsForm, {
diff --git a/spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js b/spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js
index 3ffbb7ab60a..6658db92524 100644
--- a/spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js
@@ -53,8 +53,8 @@ describe('AlertIntegrationsList', () => {
     mountComponent();
   });
 
-  const findTableComponent = () => wrapper.find(GlTable);
-  const findTableComponentRows = () => wrapper.find(GlTable).findAll('table tbody tr');
+  const findTableComponent = () => wrapper.findComponent(GlTable);
+  const findTableComponentRows = () => wrapper.findComponent(GlTable).findAll('table tbody tr');
   const finsStatusCell = () => wrapper.findAll('[data-testid="integration-activated-status"]');
 
   it('renders a table', () => {
@@ -78,7 +78,7 @@ describe('AlertIntegrationsList', () => {
   describe('integration status', () => {
     it('enabled', () => {
       const cell = finsStatusCell().at(0);
-      const activatedIcon = cell.find(GlIcon);
+      const activatedIcon = cell.findComponent(GlIcon);
       expect(cell.text()).toBe(i18n.status.enabled.name);
       expect(activatedIcon.attributes('name')).toBe('check');
       expect(activatedIcon.attributes('title')).toBe(i18n.status.enabled.tooltip);
@@ -86,7 +86,7 @@ describe('AlertIntegrationsList', () => {
 
     it('disabled', () => {
       const cell = finsStatusCell().at(1);
-      const notActivatedIcon = cell.find(GlIcon);
+      const notActivatedIcon = cell.findComponent(GlIcon);
       expect(cell.text()).toBe(i18n.status.disabled.name);
       expect(notActivatedIcon.attributes('name')).toBe('warning-solid');
       expect(notActivatedIcon.attributes('title')).toBe(i18n.status.disabled.tooltip);
diff --git a/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js b/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
index 7d9d2875cf8..fb9e97e7505 100644
--- a/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_settings_form_spec.js
@@ -325,9 +325,9 @@ describe('AlertsSettingsForm', () => {
         });
 
         await nextTick();
-        expect(findSamplePayloadSection().find(GlFormTextarea).attributes('disabled')).toBe(
-          disabled,
-        );
+        expect(
+          findSamplePayloadSection().findComponent(GlFormTextarea).attributes('disabled'),
+        ).toBe(disabled);
       });
     });
 
diff --git a/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js b/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
index ed185c11732..aa9bee59e8c 100644
--- a/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_settings_wrapper_spec.js
@@ -63,14 +63,14 @@ describe('AlertsSettingsWrapper', () => {
 
   const findLoader = () => wrapper.findComponent(IntegrationsList).findComponent(GlLoadingIcon);
   const findIntegrationsList = () => wrapper.findComponent(IntegrationsList);
-  const findIntegrations = () => wrapper.find(IntegrationsList).findAll('table tbody tr');
+  const findIntegrations = () => wrapper.findComponent(IntegrationsList).findAll('table tbody tr');
   const findAddIntegrationBtn = () => wrapper.findByTestId('add-integration-btn');
   const findAlertsSettingsForm = () => wrapper.findComponent(AlertsSettingsForm);
   const findAlert = () => wrapper.findComponent(GlAlert);
 
   function destroyHttpIntegration(localWrapper) {
     localWrapper
-      .find(IntegrationsList)
+      .findComponent(IntegrationsList)
       .vm.$emit('delete-integration', { id: integrationToDestroy.id });
   }
 
@@ -189,7 +189,7 @@ describe('AlertsSettingsWrapper', () => {
         data: { integrations: [] },
         loading: true,
       });
-      expect(wrapper.find(IntegrationsList).exists()).toBe(true);
+      expect(wrapper.findComponent(IntegrationsList).exists()).toBe(true);
       expect(findLoader().exists()).toBe(true);
     });
   });
diff --git a/spec/frontend/analytics/components/activity_chart_spec.js b/spec/frontend/analytics/components/activity_chart_spec.js
index a6b45ffe20f..c26407f5c1d 100644
--- a/spec/frontend/analytics/components/activity_chart_spec.js
+++ b/spec/frontend/analytics/components/activity_chart_spec.js
@@ -18,7 +18,7 @@ describe('Activity Chart Bundle', () => {
     wrapper = null;
   });
 
-  const findChart = () => wrapper.find(GlColumnChart);
+  const findChart = () => wrapper.findComponent(GlColumnChart);
   const findNoData = () => wrapper.find('[data-testid="noActivityChartData"]');
 
   describe('Activity Chart', () => {
diff --git a/spec/frontend/analytics/shared/components/metric_popover_spec.js b/spec/frontend/analytics/shared/components/metric_popover_spec.js
index ffec77c2708..6a58f8c6d29 100644
--- a/spec/frontend/analytics/shared/components/metric_popover_spec.js
+++ b/spec/frontend/analytics/shared/components/metric_popover_spec.js
@@ -30,7 +30,7 @@ describe('MetricPopover', () => {
   const findAllMetricLinks = () => wrapper.findAll('[data-testid="metric-link"]');
   const findMetricDescription = () => wrapper.findByTestId('metric-description');
   const findMetricDocsLink = () => wrapper.findByTestId('metric-docs-link');
-  const findMetricDocsLinkIcon = () => findMetricDocsLink().find(GlIcon);
+  const findMetricDocsLinkIcon = () => findMetricDocsLink().findComponent(GlIcon);
 
   afterEach(() => {
     wrapper.destroy();
@@ -83,7 +83,9 @@ describe('MetricPopover', () => {
             const allLinkContainers = findAllMetricLinks();
 
             expect(allLinkContainers.at(idx).text()).toContain(link.name);
-            expect(allLinkContainers.at(idx).find(GlLink).attributes('href')).toBe(link.url);
+            expect(allLinkContainers.at(idx).findComponent(GlLink).attributes('href')).toBe(
+              link.url,
+            );
           });
         });
 
diff --git a/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js b/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
index 69918c1db65..b3e0d77a40f 100644
--- a/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
+++ b/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js
@@ -79,7 +79,7 @@ describe('ProjectsDropdownFilter component', () => {
   const findClearAllButton = () => wrapper.findByText('Clear all');
   const findSelectedProjectsLabel = () => wrapper.findComponent(GlTruncate);
 
-  const findDropdown = () => wrapper.find(GlDropdown);
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
 
   const findDropdownItems = () =>
     findDropdown()
diff --git a/spec/frontend/analytics/usage_trends/components/app_spec.js b/spec/frontend/analytics/usage_trends/components/app_spec.js
index 156be26f895..4d8107adf33 100644
--- a/spec/frontend/analytics/usage_trends/components/app_spec.js
+++ b/spec/frontend/analytics/usage_trends/components/app_spec.js
@@ -21,7 +21,7 @@ describe('UsageTrendsApp', () => {
   });
 
   it('displays the usage counts component', () => {
-    expect(wrapper.find(UsageCounts).exists()).toBe(true);
+    expect(wrapper.findComponent(UsageCounts).exists()).toBe(true);
   });
 
   ['Total projects & groups', 'Pipelines', 'Issues & merge requests'].forEach((usage) => {
@@ -35,6 +35,6 @@ describe('UsageTrendsApp', () => {
   });
 
   it('displays the users chart component', () => {
-    expect(wrapper.find(UsersChart).exists()).toBe(true);
+    expect(wrapper.findComponent(UsersChart).exists()).toBe(true);
   });
 });
diff --git a/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js b/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js
index 02cf7f42a0b..65ccca7334d 100644
--- a/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js
+++ b/spec/frontend/analytics/usage_trends/components/usage_trends_count_chart_spec.js
@@ -50,9 +50,9 @@ describe('UsageTrendsCountChart', () => {
     wrapper = null;
   });
 
-  const findLoader = () => wrapper.find(ChartSkeletonLoader);
-  const findChart = () => wrapper.find(GlLineChart);
-  const findAlert = () => wrapper.find(GlAlert);
+  const findLoader = () => wrapper.findComponent(ChartSkeletonLoader);
+  const findChart = () => wrapper.findComponent(GlLineChart);
+  const findAlert = () => wrapper.findComponent(GlAlert);
 
   describe('while loading', () => {
     beforeEach(() => {
diff --git a/spec/frontend/analytics/usage_trends/components/users_chart_spec.js b/spec/frontend/analytics/usage_trends/components/users_chart_spec.js
index 32a664a5026..6b9f09629e2 100644
--- a/spec/frontend/analytics/usage_trends/components/users_chart_spec.js
+++ b/spec/frontend/analytics/usage_trends/components/users_chart_spec.js
@@ -47,9 +47,9 @@ describe('UsersChart', () => {
     wrapper = null;
   });
 
-  const findLoader = () => wrapper.find(ChartSkeletonLoader);
-  const findAlert = () => wrapper.find(GlAlert);
-  const findChart = () => wrapper.find(GlAreaChart);
+  const findLoader = () => wrapper.findComponent(ChartSkeletonLoader);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findChart = () => wrapper.findComponent(GlAreaChart);
 
   describe('while loading', () => {
     beforeEach(() => {
diff --git a/spec/frontend/artifacts_settings/components/keep_latest_artifact_checkbox_spec.js b/spec/frontend/artifacts_settings/components/keep_latest_artifact_checkbox_spec.js
index 2f3ff2b22f2..ca94acfa444 100644
--- a/spec/frontend/artifacts_settings/components/keep_latest_artifact_checkbox_spec.js
+++ b/spec/frontend/artifacts_settings/components/keep_latest_artifact_checkbox_spec.js
@@ -39,8 +39,8 @@ describe('Keep latest artifact checkbox', () => {
   const fullPath = 'gitlab-org/gitlab';
   const helpPagePath = '/help/ci/pipelines/job_artifacts';
 
-  const findCheckbox = () => wrapper.find(GlFormCheckbox);
-  const findHelpLink = () => wrapper.find(GlLink);
+  const findCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+  const findHelpLink = () => wrapper.findComponent(GlLink);
 
   const createComponent = (handlers) => {
     requestHandlers = {
diff --git a/spec/frontend/authentication/two_factor_auth/components/recovery_codes_spec.js b/spec/frontend/authentication/two_factor_auth/components/recovery_codes_spec.js
index 2dcc537809f..beb9efd00ed 100644
--- a/spec/frontend/authentication/two_factor_auth/components/recovery_codes_spec.js
+++ b/spec/frontend/authentication/two_factor_auth/components/recovery_codes_spec.js
@@ -31,9 +31,9 @@ describe('RecoveryCodes', () => {
   };
 
   const queryByText = (text, options) => within(wrapper.element).queryByText(text, options);
-  const findAlert = () => wrapper.find(GlAlert);
+  const findAlert = () => wrapper.findComponent(GlAlert);
   const findRecoveryCodes = () => wrapper.findByTestId('recovery-codes');
-  const findCopyButton = () => wrapper.find(ClipboardButton);
+  const findCopyButton = () => wrapper.findComponent(ClipboardButton);
   const findButtonByText = (text) =>
     wrapper.findAll(GlButton).wrappers.find((buttonWrapper) => buttonWrapper.text() === text);
   const findDownloadButton = () => findButtonByText('Download codes');
diff --git a/spec/frontend/authentication/two_factor_auth/index_spec.js b/spec/frontend/authentication/two_factor_auth/index_spec.js
index f9a6b2df662..427159bacd9 100644
--- a/spec/frontend/authentication/two_factor_auth/index_spec.js
+++ b/spec/frontend/authentication/two_factor_auth/index_spec.js
@@ -10,7 +10,7 @@ describe('initRecoveryCodes', () => {
   let el;
   let wrapper;
 
-  const findRecoveryCodesComponent = () => wrapper.find(RecoveryCodes);
+  const findRecoveryCodesComponent = () => wrapper.findComponent(RecoveryCodes);
 
   beforeEach(() => {
     el = document.createElement('div');
diff --git a/spec/frontend/badges/components/badge_settings_spec.js b/spec/frontend/badges/components/badge_settings_spec.js
index 79cf5f3e4ff..bddb6d3801c 100644
--- a/spec/frontend/badges/components/badge_settings_spec.js
+++ b/spec/frontend/badges/components/badge_settings_spec.js
@@ -42,7 +42,7 @@ describe('BadgeSettings component', () => {
     button.vm.$emit('click');
     await nextTick();
 
-    const modal = wrapper.find(GlModal);
+    const modal = wrapper.findComponent(GlModal);
     expect(modal.isVisible()).toBe(true);
   });
 
@@ -51,7 +51,7 @@ describe('BadgeSettings component', () => {
   });
 
   it('displays badge list', () => {
-    expect(wrapper.find(BadgeList).isVisible()).toBe(true);
+    expect(wrapper.findComponent(BadgeList).isVisible()).toBe(true);
   });
 
   describe('when editing', () => {
@@ -64,7 +64,7 @@ describe('BadgeSettings component', () => {
     });
 
     it('displays no badge list', () => {
-      expect(wrapper.find(BadgeList).isVisible()).toBe(false);
+      expect(wrapper.findComponent(BadgeList).isVisible()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/batch_comments/components/draft_note_spec.js b/spec/frontend/batch_comments/components/draft_note_spec.js
index d7796f38680..03ecbc01a56 100644
--- a/spec/frontend/batch_comments/components/draft_note_spec.js
+++ b/spec/frontend/batch_comments/components/draft_note_spec.js
@@ -61,7 +61,7 @@ describe('Batch comments draft note component', () => {
     createComponent();
     expect(wrapper.findComponent(GlBadge).exists()).toBe(true);
 
-    const note = wrapper.find(NoteableNote);
+    const note = wrapper.findComponent(NoteableNote);
 
     expect(note.exists()).toBe(true);
     expect(note.props().note).toEqual(draft);
@@ -122,7 +122,7 @@ describe('Batch comments draft note component', () => {
   describe('update', () => {
     it('dispatches updateDraft', async () => {
       createComponent();
-      const note = wrapper.find(NoteableNote);
+      const note = wrapper.findComponent(NoteableNote);
 
       note.vm.$emit('handleEdit');
 
@@ -147,7 +147,7 @@ describe('Batch comments draft note component', () => {
       createComponent();
       jest.spyOn(window, 'confirm').mockImplementation(() => true);
 
-      const note = wrapper.find(NoteableNote);
+      const note = wrapper.findComponent(NoteableNote);
 
       note.vm.$emit('handleDeleteNote', draft);
 
diff --git a/spec/frontend/batch_comments/components/publish_dropdown_spec.js b/spec/frontend/batch_comments/components/publish_dropdown_spec.js
index a3168931f1f..7506dc49a18 100644
--- a/spec/frontend/batch_comments/components/publish_dropdown_spec.js
+++ b/spec/frontend/batch_comments/components/publish_dropdown_spec.js
@@ -34,6 +34,6 @@ describe('Batch comments publish dropdown component', () => {
   it('renders draft count in dropdown title', () => {
     createComponent();
 
-    expect(wrapper.find(GlDropdown).props('headerText')).toEqual('2 pending comments');
+    expect(wrapper.findComponent(GlDropdown).props('headerText')).toEqual('2 pending comments');
   });
 });
diff --git a/spec/frontend/captcha/captcha_modal_spec.js b/spec/frontend/captcha/captcha_modal_spec.js
index b8448f9ff0a..20e69b5a834 100644
--- a/spec/frontend/captcha/captcha_modal_spec.js
+++ b/spec/frontend/captcha/captcha_modal_spec.js
@@ -40,7 +40,7 @@ describe('Captcha Modal', () => {
   });
 
   const findGlModal = () => {
-    const glModal = wrapper.find(GlModal);
+    const glModal = wrapper.findComponent(GlModal);
 
     jest.spyOn(glModal.vm, 'show').mockImplementation(() => glModal.vm.$emit('shown'));
     jest
diff --git a/spec/frontend/cascading_settings/components/lock_popovers_spec.js b/spec/frontend/cascading_settings/components/lock_popovers_spec.js
index 182e3c1c8ff..ff6ce18ead8 100644
--- a/spec/frontend/cascading_settings/components/lock_popovers_spec.js
+++ b/spec/frontend/cascading_settings/components/lock_popovers_spec.js
@@ -39,7 +39,7 @@ describe('LockPopovers', () => {
     wrapper = mountExtended(LockPopovers);
   };
 
-  const findPopover = () => extendedWrapper(wrapper.find(GlPopover));
+  const findPopover = () => extendedWrapper(wrapper.findComponent(GlPopover));
   const findByTextInPopover = (text, options) =>
     findPopover().findByText((_, element) => element.textContent === text, options);
 
diff --git a/spec/frontend/ci_lint/components/ci_lint_spec.js b/spec/frontend/ci_lint/components/ci_lint_spec.js
index 0ad6ed56b0e..ea69a80274e 100644
--- a/spec/frontend/ci_lint/components/ci_lint_spec.js
+++ b/spec/frontend/ci_lint/components/ci_lint_spec.js
@@ -36,9 +36,9 @@ describe('CI Lint', () => {
     });
   };
 
-  const findEditor = () => wrapper.find(SourceEditor);
-  const findAlert = () => wrapper.find(GlAlert);
-  const findCiLintResults = () => wrapper.find(CiLintResults);
+  const findEditor = () => wrapper.findComponent(SourceEditor);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findCiLintResults = () => wrapper.findComponent(CiLintResults);
   const findValidateBtn = () => wrapper.find('[data-testid="ci-lint-validate"]');
   const findClearBtn = () => wrapper.find('[data-testid="ci-lint-clear"]');
 
diff --git a/spec/frontend/ci_secure_files/components/secure_files_list_spec.js b/spec/frontend/ci_secure_files/components/secure_files_list_spec.js
index 04d38a3281a..5273aafbb04 100644
--- a/spec/frontend/ci_secure_files/components/secure_files_list_spec.js
+++ b/spec/frontend/ci_secure_files/components/secure_files_list_spec.js
@@ -83,7 +83,9 @@ describe('SecureFilesList', () => {
       const [secureFile] = secureFiles;
 
       expect(findCell(0, 0).text()).toBe(secureFile.name);
-      expect(findCell(0, 1).find(TimeAgoTooltip).props('time')).toBe(secureFile.created_at);
+      expect(findCell(0, 1).findComponent(TimeAgoTooltip).props('time')).toBe(
+        secureFile.created_at,
+      );
     });
 
     describe('event tracking', () => {
diff --git a/spec/frontend/ci_settings_pipeline_triggers/components/triggers_list_spec.js b/spec/frontend/ci_settings_pipeline_triggers/components/triggers_list_spec.js
index 2c6155055bf..01eb08f4ece 100644
--- a/spec/frontend/ci_settings_pipeline_triggers/components/triggers_list_spec.js
+++ b/spec/frontend/ci_settings_pipeline_triggers/components/triggers_list_spec.js
@@ -16,13 +16,13 @@ describe('TriggersList', () => {
     });
   };
 
-  const findTable = () => wrapper.find(GlTable);
+  const findTable = () => wrapper.findComponent(GlTable);
   const findHeaderAt = (i) => wrapper.findAll('thead th').at(i);
   const findRows = () => wrapper.findAll('tbody tr');
   const findRowAt = (i) => findRows().at(i);
   const findCell = (i, col) => findRowAt(i).findAll('td').at(col);
-  const findClipboardBtn = (i) => findCell(i, 0).find(ClipboardButton);
-  const findInvalidBadge = (i) => findCell(i, 0).find(GlBadge);
+  const findClipboardBtn = (i) => findCell(i, 0).findComponent(ClipboardButton);
+  const findInvalidBadge = (i) => findCell(i, 0).findComponent(GlBadge);
   const findEditBtn = (i) => findRowAt(i).find('[data-testid="edit-btn"]');
   const findRevokeBtn = (i) => findRowAt(i).find('[data-testid="trigger_revoke_button"]');
 
@@ -65,7 +65,7 @@ describe('TriggersList', () => {
   it('displays a time ago label when last used', () => {
     expect(findCell(0, 3).text()).toBe('Never');
 
-    expect(findCell(1, 3).find(TimeAgoTooltip).props('time')).toBe(triggers[1].lastUsed);
+    expect(findCell(1, 3).findComponent(TimeAgoTooltip).props('time')).toBe(triggers[1].lastUsed);
   });
 
   it('displays actions in a rows', () => {
diff --git a/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js
index 94a1c5e16e7..a8fec9b23dd 100644
--- a/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_variable_modal_spec.js
@@ -58,9 +58,9 @@ describe('Ci variable modal', () => {
     });
   };
 
-  const findCiEnvironmentsDropdown = () => wrapper.find(CiEnvironmentsDropdown);
+  const findCiEnvironmentsDropdown = () => wrapper.findComponent(CiEnvironmentsDropdown);
   const findReferenceWarning = () => wrapper.findByTestId('contains-variable-reference');
-  const findModal = () => wrapper.find(ModalStub);
+  const findModal = () => wrapper.findComponent(ModalStub);
   const findAWSTip = () => wrapper.findByTestId('aws-guidance-tip');
   const findAddorUpdateButton = () => wrapper.findByTestId('ciUpdateOrAddVariableBtn');
   const deleteVariableButton = () =>
@@ -72,7 +72,8 @@ describe('Ci variable modal', () => {
   const findMaskedVariableCheckbox = () => wrapper.findByTestId('ci-variable-masked-checkbox');
   const findValueField = () => wrapper.find('#ci-variable-value');
   const findEnvScopeLink = () => wrapper.findByTestId('environment-scope-link');
-  const findEnvScopeInput = () => wrapper.findByTestId('environment-scope').find(GlFormInput);
+  const findEnvScopeInput = () =>
+    wrapper.findByTestId('environment-scope').findComponent(GlFormInput);
   const findVariableTypeDropdown = () => wrapper.find('#ci-variable-type');
 
   afterEach(() => {
diff --git a/spec/frontend/ci_variable_list/components/ci_variable_popover_spec.js b/spec/frontend/ci_variable_list/components/ci_variable_popover_spec.js
index b43153d3d7c..4d0c378d10e 100644
--- a/spec/frontend/ci_variable_list/components/ci_variable_popover_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_variable_popover_spec.js
@@ -18,7 +18,7 @@ describe('Ci Variable Popover', () => {
     });
   };
 
-  const findButton = () => wrapper.find(GlButton);
+  const findButton = () => wrapper.findComponent(GlButton);
 
   beforeEach(() => {
     createComponent();
diff --git a/spec/frontend/ci_variable_list/components/legacy_ci_variable_modal_spec.js b/spec/frontend/ci_variable_list/components/legacy_ci_variable_modal_spec.js
index 6681ab91a4a..d8d2cbc764f 100644
--- a/spec/frontend/ci_variable_list/components/legacy_ci_variable_modal_spec.js
+++ b/spec/frontend/ci_variable_list/components/legacy_ci_variable_modal_spec.js
@@ -40,8 +40,8 @@ describe('Ci variable modal', () => {
     });
   };
 
-  const findCiEnvironmentsDropdown = () => wrapper.find(CiEnvironmentsDropdown);
-  const findModal = () => wrapper.find(ModalStub);
+  const findCiEnvironmentsDropdown = () => wrapper.findComponent(CiEnvironmentsDropdown);
+  const findModal = () => wrapper.findComponent(ModalStub);
   const findAddorUpdateButton = () => findModal().find('[data-testid="ciUpdateOrAddVariableBtn"]');
   const deleteVariableButton = () =>
     findModal()
@@ -213,7 +213,7 @@ describe('Ci variable modal', () => {
 
           const environmentScopeInput = wrapper
             .find('[data-testid="environment-scope"]')
-            .find(GlFormInput);
+            .findComponent(GlFormInput);
           expect(findCiEnvironmentsDropdown().exists()).toBe(false);
           expect(environmentScopeInput.attributes('readonly')).toBe('readonly');
         });
diff --git a/spec/frontend/clusters_list/components/agent_table_spec.js b/spec/frontend/clusters_list/components/agent_table_spec.js
index b78f0a3686c..9cbb83eedd2 100644
--- a/spec/frontend/clusters_list/components/agent_table_spec.js
+++ b/spec/frontend/clusters_list/components/agent_table_spec.js
@@ -36,7 +36,7 @@ describe('AgentTable', () => {
 
   const findAgentLink = (at) => wrapper.findAllByTestId('cluster-agent-name-link').at(at);
   const findStatusText = (at) => wrapper.findAllByTestId('cluster-agent-connection-status').at(at);
-  const findStatusIcon = (at) => findStatusText(at).find(GlIcon);
+  const findStatusIcon = (at) => findStatusText(at).findComponent(GlIcon);
   const findLastContactText = (at) => wrapper.findAllByTestId('cluster-agent-last-contact').at(at);
   const findVersionText = (at) => wrapper.findAllByTestId('cluster-agent-version').at(at);
   const findConfiguration = (at) =>
@@ -113,7 +113,7 @@ describe('AgentTable', () => {
         texts,
         lineNumber,
       }) => {
-        const findIcon = () => findVersionText(lineNumber).find(GlIcon);
+        const findIcon = () => findVersionText(lineNumber).findComponent(GlIcon);
         const findPopover = () => wrapper.findByTestId(`popover-${agent}`);
         const versionWarning = versionMismatch || versionOutdated;
 
@@ -151,7 +151,7 @@ describe('AgentTable', () => {
     `(
       'displays config file path as "$agentPath" at line $lineNumber',
       ({ agentConfig, link, lineNumber }) => {
-        const findLink = findConfiguration(lineNumber).find(GlLink);
+        const findLink = findConfiguration(lineNumber).findComponent(GlLink);
 
         expect(findLink.attributes('href')).toBe(link);
         expect(findConfiguration(lineNumber).text()).toBe(agentConfig);
diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js
index 92cfff7d490..bff1e573dbd 100644
--- a/spec/frontend/clusters_list/components/agents_spec.js
+++ b/spec/frontend/clusters_list/components/agents_spec.js
@@ -334,7 +334,7 @@ describe('Agents', () => {
     });
 
     it('displays a loading icon', () => {
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/clusters_list/components/ancestor_notice_spec.js b/spec/frontend/clusters_list/components/ancestor_notice_spec.js
index a9f11e6fdf8..758f6586e1a 100644
--- a/spec/frontend/clusters_list/components/ancestor_notice_spec.js
+++ b/spec/frontend/clusters_list/components/ancestor_notice_spec.js
@@ -46,7 +46,7 @@ describe('ClustersAncestorNotice', () => {
     });
 
     it('displays link', () => {
-      expect(wrapper.find(GlLink).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLink).exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/clusters_list/components/clusters_spec.js b/spec/frontend/clusters_list/components/clusters_spec.js
index 5c7635c1617..a3f42c1f161 100644
--- a/spec/frontend/clusters_list/components/clusters_spec.js
+++ b/spec/frontend/clusters_list/components/clusters_spec.js
@@ -142,7 +142,7 @@ describe('Clusters', () => {
       ({ lineNumber, result }) => {
         const statuses = findStatuses();
         const status = statuses.at(lineNumber);
-        expect(status.find(GlLoadingIcon).exists()).toBe(result);
+        expect(status.findComponent(GlLoadingIcon).exists()).toBe(result);
       },
     );
   });
diff --git a/spec/frontend/clusters_list/components/node_error_help_text_spec.js b/spec/frontend/clusters_list/components/node_error_help_text_spec.js
index 8187ab75c58..3211ba44eff 100644
--- a/spec/frontend/clusters_list/components/node_error_help_text_spec.js
+++ b/spec/frontend/clusters_list/components/node_error_help_text_spec.js
@@ -11,7 +11,7 @@ describe('NodeErrorHelpText', () => {
     await nextTick();
   };
 
-  const findPopover = () => wrapper.find(GlPopover);
+  const findPopover = () => wrapper.findComponent(GlPopover);
 
   afterEach(() => {
     wrapper.destroy();
diff --git a/spec/frontend/code_navigation/components/app_spec.js b/spec/frontend/code_navigation/components/app_spec.js
index b85047dc816..b9be262efd0 100644
--- a/spec/frontend/code_navigation/components/app_spec.js
+++ b/spec/frontend/code_navigation/components/app_spec.js
@@ -63,7 +63,7 @@ describe('Code navigation app component', () => {
   it('hides popover when no definition set', () => {
     factory();
 
-    expect(wrapper.find(Popover).exists()).toBe(false);
+    expect(wrapper.findComponent(Popover).exists()).toBe(false);
   });
 
   it('renders popover when definition set', () => {
@@ -73,7 +73,7 @@ describe('Code navigation app component', () => {
       currentBlobPath: 'index.js',
     });
 
-    expect(wrapper.find(Popover).exists()).toBe(true);
+    expect(wrapper.findComponent(Popover).exists()).toBe(true);
   });
 
   it('calls showDefinition when clicking blob viewer', () => {
diff --git a/spec/frontend/code_navigation/components/popover_spec.js b/spec/frontend/code_navigation/components/popover_spec.js
index c038c04a0f8..874263e046a 100644
--- a/spec/frontend/code_navigation/components/popover_spec.js
+++ b/spec/frontend/code_navigation/components/popover_spec.js
@@ -115,8 +115,8 @@ describe('Code navigation popover component', () => {
         definitionPathPrefix: DEFINITION_PATH_PREFIX,
       });
 
-      expect(wrapper.find({ ref: 'code-output' }).exists()).toBe(true);
-      expect(wrapper.find({ ref: 'doc-output' }).exists()).toBe(false);
+      expect(wrapper.findComponent({ ref: 'code-output' }).exists()).toBe(true);
+      expect(wrapper.findComponent({ ref: 'doc-output' }).exists()).toBe(false);
     });
   });
 
@@ -128,8 +128,8 @@ describe('Code navigation popover component', () => {
         definitionPathPrefix: DEFINITION_PATH_PREFIX,
       });
 
-      expect(wrapper.find({ ref: 'code-output' }).exists()).toBe(false);
-      expect(wrapper.find({ ref: 'doc-output' }).exists()).toBe(true);
+      expect(wrapper.findComponent({ ref: 'code-output' }).exists()).toBe(false);
+      expect(wrapper.findComponent({ ref: 'doc-output' }).exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/commit/commit_pipeline_status_component_spec.js b/spec/frontend/commit/commit_pipeline_status_component_spec.js
index 43db6db00c1..73720c1cc88 100644
--- a/spec/frontend/commit/commit_pipeline_status_component_spec.js
+++ b/spec/frontend/commit/commit_pipeline_status_component_spec.js
@@ -37,9 +37,9 @@ describe('Commit pipeline status component', () => {
     });
   };
 
-  const findLoader = () => wrapper.find(GlLoadingIcon);
+  const findLoader = () => wrapper.findComponent(GlLoadingIcon);
   const findLink = () => wrapper.find('a');
-  const findCiIcon = () => findLink().find(CiIcon);
+  const findCiIcon = () => findLink().findComponent(CiIcon);
 
   afterEach(() => {
     wrapper.destroy();
diff --git a/spec/frontend/confidential_merge_request/components/dropdown_spec.js b/spec/frontend/confidential_merge_request/components/dropdown_spec.js
index 14a0b98a0d5..bbb6d4f9a26 100644
--- a/spec/frontend/confidential_merge_request/components/dropdown_spec.js
+++ b/spec/frontend/confidential_merge_request/components/dropdown_spec.js
@@ -36,12 +36,12 @@ describe('Confidential merge request project dropdown component', () => {
   it('shows lock icon', () => {
     factory();
 
-    expect(vm.find(GlDropdown).props('icon')).toBe('lock');
+    expect(vm.findComponent(GlDropdown).props('icon')).toBe('lock');
   });
 
   it('has dropdown text', () => {
     factory();
 
-    expect(vm.find(GlDropdown).props('text')).toBe('Select private project');
+    expect(vm.findComponent(GlDropdown).props('text')).toBe('Select private project');
   });
 });
diff --git a/spec/frontend/content_editor/components/bubble_menus/media_bubble_menu_spec.js b/spec/frontend/content_editor/components/bubble_menus/media_bubble_menu_spec.js
index c34862b6f3f..13c6495ac41 100644
--- a/spec/frontend/content_editor/components/bubble_menus/media_bubble_menu_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/media_bubble_menu_spec.js
@@ -62,7 +62,7 @@ describe.each`
     };
 
     const selectFile = async (file) => {
-      const input = wrapper.find({ ref: 'fileSelector' });
+      const input = wrapper.findComponent({ ref: 'fileSelector' });
 
       // override the property definition because `input.files` isn't directly modifyable
       Object.defineProperty(input.element, 'files', { value: [file], writable: true });
diff --git a/spec/frontend/content_editor/components/toolbar_image_button_spec.js b/spec/frontend/content_editor/components/toolbar_image_button_spec.js
index 5a9d16e7a87..5473d43f5a1 100644
--- a/spec/frontend/content_editor/components/toolbar_image_button_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_image_button_spec.js
@@ -27,7 +27,7 @@ describe('content_editor/components/toolbar_image_button', () => {
   const findDropdown = () => wrapper.findComponent(GlDropdown);
 
   const selectFile = async (file) => {
-    const input = wrapper.find({ ref: 'fileSelector' });
+    const input = wrapper.findComponent({ ref: 'fileSelector' });
 
     // override the property definition because `input.files` isn't directly modifyable
     Object.defineProperty(input.element, 'files', { value: [file], writable: true });
diff --git a/spec/frontend/content_editor/components/toolbar_link_button_spec.js b/spec/frontend/content_editor/components/toolbar_link_button_spec.js
index 295b41528fe..40e859e96af 100644
--- a/spec/frontend/content_editor/components/toolbar_link_button_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_link_button_spec.js
@@ -30,7 +30,7 @@ describe('content_editor/components/toolbar_link_button', () => {
   const findRemoveLinkButton = () => wrapper.findByText('Remove link');
 
   const selectFile = async (file) => {
-    const input = wrapper.find({ ref: 'fileSelector' });
+    const input = wrapper.findComponent({ ref: 'fileSelector' });
 
     // override the property definition because `input.files` isn't directly modifyable
     Object.defineProperty(input.element, 'files', { value: [file], writable: true });
diff --git a/spec/frontend/content_editor/components/wrappers/code_block_spec.js b/spec/frontend/content_editor/components/wrappers/code_block_spec.js
index 17a365e12bb..a5ef19fb8e8 100644
--- a/spec/frontend/content_editor/components/wrappers/code_block_spec.js
+++ b/spec/frontend/content_editor/components/wrappers/code_block_spec.js
@@ -104,7 +104,7 @@ describe('content/components/wrappers/code_block', () => {
     it('does not render a preview if showPreview: false', async () => {
       createWrapper({ language: 'plantuml', isDiagram: true, showPreview: false });
 
-      expect(wrapper.find({ ref: 'diagramContainer' }).exists()).toBe(false);
+      expect(wrapper.findComponent({ ref: 'diagramContainer' }).exists()).toBe(false);
     });
 
     it('does not update preview when diagram is not active', async () => {
@@ -134,7 +134,7 @@ describe('content/components/wrappers/code_block', () => {
       await nextTick();
 
       expect(wrapper.find('img').attributes('src')).toBe('url/to/some/diagram');
-      expect(wrapper.find(SandboxedMermaid).exists()).toBe(false);
+      expect(wrapper.findComponent(SandboxedMermaid).exists()).toBe(false);
     });
 
     it('renders an iframe with preview for a mermaid diagram', async () => {
@@ -143,7 +143,7 @@ describe('content/components/wrappers/code_block', () => {
       await emitEditorEvent({ event: 'transaction', tiptapEditor });
       await nextTick();
 
-      expect(wrapper.find(SandboxedMermaid).props('source')).toBe('');
+      expect(wrapper.findComponent(SandboxedMermaid).props('source')).toBe('');
       expect(wrapper.find('img').exists()).toBe(false);
     });
   });
diff --git a/spec/frontend/crm/form_spec.js b/spec/frontend/crm/form_spec.js
index f0e9150cada..57e28b396cf 100644
--- a/spec/frontend/crm/form_spec.js
+++ b/spec/frontend/crm/form_spec.js
@@ -298,7 +298,7 @@ describe('Reusable form component', () => {
     `(
       'should render the correct component for #$id with the value "$value"',
       ({ index, id, component, value }) => {
-        const findFormElement = () => findFormGroup(index).find(component);
+        const findFormElement = () => findFormGroup(index).findComponent(component);
 
         expect(findFormElement().attributes('id')).toBe(id);
         expect(findFormElement().attributes('value')).toBe(value);
@@ -307,7 +307,8 @@ describe('Reusable form component', () => {
 
     it('should render a checked GlFormCheckbox for #active', () => {
       const activeCheckboxIndex = 6;
-      const findFormElement = () => findFormGroup(activeCheckboxIndex).find(GlFormCheckbox);
+      const findFormElement = () =>
+        findFormGroup(activeCheckboxIndex).findComponent(GlFormCheckbox);
 
       expect(findFormElement().attributes('id')).toBe('active');
       expect(findFormElement().attributes('checked')).toBe('true');
diff --git a/spec/frontend/cycle_analytics/base_spec.js b/spec/frontend/cycle_analytics/base_spec.js
index ea3da86c7b2..013bea671a8 100644
--- a/spec/frontend/cycle_analytics/base_spec.js
+++ b/spec/frontend/cycle_analytics/base_spec.js
@@ -201,7 +201,7 @@ describe('Value stream analytics component', () => {
     it('renders the stage table with a loading icon', () => {
       const tableWrapper = findStageTable();
       expect(tableWrapper.exists()).toBe(true);
-      expect(tableWrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(tableWrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
 
     it('renders the path navigation loading state', () => {
diff --git a/spec/frontend/cycle_analytics/path_navigation_spec.js b/spec/frontend/cycle_analytics/path_navigation_spec.js
index fa9eadbd071..fec1526359c 100644
--- a/spec/frontend/cycle_analytics/path_navigation_spec.js
+++ b/spec/frontend/cycle_analytics/path_navigation_spec.js
@@ -56,7 +56,9 @@ describe('Project PathNavigation', () => {
 
   describe('displays correctly', () => {
     it('has the correct props', () => {
-      expect(wrapper.find(GlPath).props('items')).toMatchObject(transformedProjectStagePathData);
+      expect(wrapper.findComponent(GlPath).props('items')).toMatchObject(
+        transformedProjectStagePathData,
+      );
     });
 
     it('contains all the expected stages', () => {
@@ -69,11 +71,11 @@ describe('Project PathNavigation', () => {
     describe('loading', () => {
       describe('is false', () => {
         it('displays the gl-path component', () => {
-          expect(wrapper.find(GlPath).exists()).toBe(true);
+          expect(wrapper.findComponent(GlPath).exists()).toBe(true);
         });
 
         it('hides the gl-skeleton-loading component', () => {
-          expect(wrapper.find(GlSkeletonLoader).exists()).toBe(false);
+          expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(false);
         });
 
         it('renders each stage', () => {
@@ -112,11 +114,11 @@ describe('Project PathNavigation', () => {
         });
 
         it('hides the gl-path component', () => {
-          expect(wrapper.find(GlPath).exists()).toBe(false);
+          expect(wrapper.findComponent(GlPath).exists()).toBe(false);
         });
 
         it('displays the gl-skeleton-loading component', () => {
-          expect(wrapper.find(GlSkeletonLoader).exists()).toBe(true);
+          expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(true);
         });
       });
     });
diff --git a/spec/frontend/deploy_freeze/components/deploy_freeze_modal_spec.js b/spec/frontend/deploy_freeze/components/deploy_freeze_modal_spec.js
index 7c46c280d46..bbafdc000db 100644
--- a/spec/frontend/deploy_freeze/components/deploy_freeze_modal_spec.js
+++ b/spec/frontend/deploy_freeze/components/deploy_freeze_modal_spec.js
@@ -42,7 +42,7 @@ describe('Deploy freeze modal', () => {
 
     wrapper.find('#deploy-freeze-start').trigger('input');
     wrapper.find('#deploy-freeze-end').trigger('input');
-    wrapper.find(TimezoneDropdown).trigger('input');
+    wrapper.findComponent(TimezoneDropdown).trigger('input');
   };
 
   afterEach(() => {
diff --git a/spec/frontend/deploy_freeze/components/deploy_freeze_settings_spec.js b/spec/frontend/deploy_freeze/components/deploy_freeze_settings_spec.js
index cc044800e5e..637efe30022 100644
--- a/spec/frontend/deploy_freeze/components/deploy_freeze_settings_spec.js
+++ b/spec/frontend/deploy_freeze/components/deploy_freeze_settings_spec.js
@@ -31,11 +31,11 @@ describe('Deploy freeze settings', () => {
 
   describe('Deploy freeze table contains components', () => {
     it('contains deploy freeze table', () => {
-      expect(wrapper.find(DeployFreezeTable).exists()).toBe(true);
+      expect(wrapper.findComponent(DeployFreezeTable).exists()).toBe(true);
     });
 
     it('contains deploy freeze modal', () => {
-      expect(wrapper.find(DeployFreezeModal).exists()).toBe(true);
+      expect(wrapper.findComponent(DeployFreezeModal).exists()).toBe(true);
     });
   });
 });
diff --git a/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js b/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js
index aea81daecef..304c8250151 100644
--- a/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js
+++ b/spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js
@@ -96,7 +96,7 @@ describe('Deploy freeze timezone dropdown', () => {
     });
 
     it('renders selected time zone as dropdown label', () => {
-      expect(wrapper.find(GlDropdown).vm.text).toBe('Alaska');
+      expect(wrapper.findComponent(GlDropdown).vm.text).toBe('Alaska');
     });
   });
 });
diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js
index 96f2ac1692c..65831b71fd4 100644
--- a/spec/frontend/diffs/components/app_spec.js
+++ b/spec/frontend/diffs/components/app_spec.js
@@ -30,7 +30,7 @@ const UPDATED_COMMIT_URL = `${TEST_HOST}/COMMIT/NEW`;
 Vue.use(Vuex);
 
 function getCollapsedFilesWarning(wrapper) {
-  return wrapper.find(CollapsedFilesWarning);
+  return wrapper.findComponent(CollapsedFilesWarning);
 }
 
 describe('diffs/components/app', () => {
@@ -167,7 +167,7 @@ describe('diffs/components/app', () => {
       state.diffs.isLoading = true;
     });
 
-    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 
   it('displays loading icon on batch loading', () => {
@@ -175,13 +175,13 @@ describe('diffs/components/app', () => {
       state.diffs.batchLoadingState = 'loading';
     });
 
-    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 
   it('displays diffs container when not loading', () => {
     createComponent();
 
-    expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
     expect(wrapper.find('#diffs').exists()).toBe(true);
   });
 
@@ -263,7 +263,7 @@ describe('diffs/components/app', () => {
     it('renders empty state when no diff files exist', () => {
       createComponent();
 
-      expect(wrapper.find(NoChanges).exists()).toBe(true);
+      expect(wrapper.findComponent(NoChanges).exists()).toBe(true);
     });
 
     it('does not render empty state when diff files exist', () => {
@@ -273,7 +273,7 @@ describe('diffs/components/app', () => {
         });
       });
 
-      expect(wrapper.find(NoChanges).exists()).toBe(false);
+      expect(wrapper.findComponent(NoChanges).exists()).toBe(false);
       expect(wrapper.findAll(DiffFile).length).toBe(1);
     });
   });
@@ -487,8 +487,8 @@ describe('diffs/components/app', () => {
         state.diffs.mergeRequestDiff = mergeRequestDiff;
       });
 
-      expect(wrapper.find(CompareVersions).exists()).toBe(true);
-      expect(wrapper.find(CompareVersions).props()).toEqual(
+      expect(wrapper.findComponent(CompareVersions).exists()).toBe(true);
+      expect(wrapper.findComponent(CompareVersions).props()).toEqual(
         expect.objectContaining({
           diffFilesCountText: null,
         }),
@@ -506,8 +506,8 @@ describe('diffs/components/app', () => {
             state.diffs.size = 1;
           });
 
-          expect(wrapper.find(HiddenFilesWarning).exists()).toBe(true);
-          expect(wrapper.find(HiddenFilesWarning).props()).toEqual(
+          expect(wrapper.findComponent(HiddenFilesWarning).exists()).toBe(true);
+          expect(wrapper.findComponent(HiddenFilesWarning).props()).toEqual(
             expect.objectContaining({
               total: '5',
               plainDiffPath: 'plain diff path',
@@ -547,7 +547,7 @@ describe('diffs/components/app', () => {
         };
       });
 
-      expect(wrapper.find(CommitWidget).exists()).toBe(true);
+      expect(wrapper.findComponent(CommitWidget).exists()).toBe(true);
     });
 
     it('should display diff file if there are diff files', () => {
@@ -555,13 +555,13 @@ describe('diffs/components/app', () => {
         state.diffs.diffFiles.push({ sha: '123' });
       });
 
-      expect(wrapper.find(DiffFile).exists()).toBe(true);
+      expect(wrapper.findComponent(DiffFile).exists()).toBe(true);
     });
 
     it("doesn't render tree list when no changes exist", () => {
       createComponent();
 
-      expect(wrapper.find(TreeList).exists()).toBe(false);
+      expect(wrapper.findComponent(TreeList).exists()).toBe(false);
     });
 
     it('should render tree list', () => {
@@ -569,7 +569,7 @@ describe('diffs/components/app', () => {
         state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }];
       });
 
-      expect(wrapper.find(TreeList).exists()).toBe(true);
+      expect(wrapper.findComponent(TreeList).exists()).toBe(true);
     });
   });
 
@@ -641,7 +641,7 @@ describe('diffs/components/app', () => {
 
     describe('pagination', () => {
       const fileByFileNav = () => wrapper.find('[data-testid="file-by-file-navigation"]');
-      const paginator = () => fileByFileNav().find(GlPagination);
+      const paginator = () => fileByFileNav().findComponent(GlPagination);
 
       it('sets previous button as disabled', async () => {
         createComponent({ fileByFileUserPreference: true }, ({ state }) => {
diff --git a/spec/frontend/diffs/components/collapsed_files_warning_spec.js b/spec/frontend/diffs/components/collapsed_files_warning_spec.js
index cc4f13ab0cf..eca5b536a35 100644
--- a/spec/frontend/diffs/components/collapsed_files_warning_spec.js
+++ b/spec/frontend/diffs/components/collapsed_files_warning_spec.js
@@ -28,8 +28,8 @@ describe('CollapsedFilesWarning', () => {
   Vue.use(Vuex);
 
   const getAlertActionButton = () =>
-    wrapper.find(CollapsedFilesWarning).find('button.gl-alert-action:first-child');
-  const getAlertCloseButton = () => wrapper.find(CollapsedFilesWarning).find('button');
+    wrapper.findComponent(CollapsedFilesWarning).find('button.gl-alert-action:first-child');
+  const getAlertCloseButton = () => wrapper.findComponent(CollapsedFilesWarning).find('button');
 
   const createComponent = (props = {}, { full } = { full: false }) => {
     const mounter = full ? mount : shallowMount;
diff --git a/spec/frontend/diffs/components/commit_item_spec.js b/spec/frontend/diffs/components/commit_item_spec.js
index 286e94ae7fd..440f169be86 100644
--- a/spec/frontend/diffs/components/commit_item_spec.js
+++ b/spec/frontend/diffs/components/commit_item_spec.js
@@ -27,7 +27,7 @@ describe('diffs/components/commit_item', () => {
   const getAvatarElement = () => wrapper.find('.user-avatar-link');
   const getCommitterElement = () => wrapper.find('.committer');
   const getCommitActionsElement = () => wrapper.find('.commit-actions');
-  const getCommitPipelineStatus = () => wrapper.find(CommitPipelineStatus);
+  const getCommitPipelineStatus = () => wrapper.findComponent(CommitPipelineStatus);
 
   const mountComponent = (propsData) => {
     wrapper = mount(Component, {
diff --git a/spec/frontend/diffs/components/commit_widget_spec.js b/spec/frontend/diffs/components/commit_widget_spec.js
index fbff473e4df..f650ead6f83 100644
--- a/spec/frontend/diffs/components/commit_widget_spec.js
+++ b/spec/frontend/diffs/components/commit_widget_spec.js
@@ -12,7 +12,7 @@ describe('diffs/components/commit_widget', () => {
   });
 
   it('renders commit item', () => {
-    const commitElement = wrapper.find(CommitItem);
+    const commitElement = wrapper.findComponent(CommitItem);
 
     expect(commitElement.exists()).toBe(true);
   });
diff --git a/spec/frontend/diffs/components/diff_comment_cell_spec.js b/spec/frontend/diffs/components/diff_comment_cell_spec.js
index b636a178593..2acfc2c6d7e 100644
--- a/spec/frontend/diffs/components/diff_comment_cell_spec.js
+++ b/spec/frontend/diffs/components/diff_comment_cell_spec.js
@@ -20,24 +20,24 @@ describe('DiffCommentCell', () => {
   it('renders discussions if line has discussions', () => {
     const wrapper = createWrapper({ renderDiscussion: true });
 
-    expect(wrapper.find(DiffDiscussions).exists()).toBe(true);
+    expect(wrapper.findComponent(DiffDiscussions).exists()).toBe(true);
   });
 
   it('does not render discussions if line has no discussions', () => {
     const wrapper = createWrapper();
 
-    expect(wrapper.find(DiffDiscussions).exists()).toBe(false);
+    expect(wrapper.findComponent(DiffDiscussions).exists()).toBe(false);
   });
 
   it('renders discussion reply if line has no draft', () => {
     const wrapper = createWrapper();
 
-    expect(wrapper.find(DiffDiscussionReply).exists()).toBe(true);
+    expect(wrapper.findComponent(DiffDiscussionReply).exists()).toBe(true);
   });
 
   it('does not render discussion reply if line has draft', () => {
     const wrapper = createWrapper({ hasDraft: true });
 
-    expect(wrapper.find(DiffDiscussionReply).exists()).toBe(false);
+    expect(wrapper.findComponent(DiffDiscussionReply).exists()).toBe(false);
   });
 });
diff --git a/spec/frontend/diffs/components/diff_content_spec.js b/spec/frontend/diffs/components/diff_content_spec.js
index 6844e6e497a..9f593ee0d49 100644
--- a/spec/frontend/diffs/components/diff_content_spec.js
+++ b/spec/frontend/diffs/components/diff_content_spec.js
@@ -110,13 +110,13 @@ describe('DiffContent', () => {
         props: { diffFile: textDiffFile },
       });
 
-      expect(wrapper.find(DiffView).exists()).toBe(true);
+      expect(wrapper.findComponent(DiffView).exists()).toBe(true);
     });
 
     it('renders rendering more lines loading icon', () => {
       createComponent({ props: { diffFile: { ...textDiffFile, renderingLines: true } } });
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
   });
 
@@ -133,7 +133,7 @@ describe('DiffContent', () => {
         props: { diffFile: { ...emptyDiffFile, viewer: { name: diffViewerModes.no_preview } } },
       });
 
-      expect(wrapper.find(NoPreviewViewer).exists()).toBe(true);
+      expect(wrapper.findComponent(NoPreviewViewer).exists()).toBe(true);
     });
 
     it('should render not diffable view if viewer set to non_diffable', () => {
@@ -141,7 +141,7 @@ describe('DiffContent', () => {
         props: { diffFile: { ...emptyDiffFile, viewer: { name: diffViewerModes.not_diffable } } },
       });
 
-      expect(wrapper.find(NotDiffableViewer).exists()).toBe(true);
+      expect(wrapper.findComponent(NotDiffableViewer).exists()).toBe(true);
     });
   });
 
@@ -156,7 +156,7 @@ describe('DiffContent', () => {
         },
       });
 
-      expect(wrapper.find(DiffDiscussions).exists()).toBe(true);
+      expect(wrapper.findComponent(DiffDiscussions).exists()).toBe(true);
     });
 
     it('emits saveDiffDiscussion when note-form emits `handleFormUpdate`', () => {
@@ -169,7 +169,7 @@ describe('DiffContent', () => {
         },
       });
 
-      wrapper.find(NoteForm).vm.$emit('handleFormUpdate', noteStub);
+      wrapper.findComponent(NoteForm).vm.$emit('handleFormUpdate', noteStub);
       expect(saveDiffDiscussionMock).toHaveBeenCalledWith(expect.any(Object), {
         note: noteStub,
         formData: {
diff --git a/spec/frontend/diffs/components/diff_discussion_reply_spec.js b/spec/frontend/diffs/components/diff_discussion_reply_spec.js
index f03c0357a0e..5ccd2002462 100644
--- a/spec/frontend/diffs/components/diff_discussion_reply_spec.js
+++ b/spec/frontend/diffs/components/diff_discussion_reply_spec.js
@@ -64,7 +64,7 @@ describe('DiffDiscussionReply', () => {
         hasForm: false,
       });
 
-      expect(wrapper.find(ReplyPlaceholder).exists()).toBe(true);
+      expect(wrapper.findComponent(ReplyPlaceholder).exists()).toBe(true);
     });
   });
 
@@ -83,6 +83,6 @@ describe('DiffDiscussionReply', () => {
       hasForm: false,
     });
 
-    expect(wrapper.find(NoteSignedOutWidget).exists()).toBe(true);
+    expect(wrapper.findComponent(NoteSignedOutWidget).exists()).toBe(true);
   });
 });
diff --git a/spec/frontend/diffs/components/diff_discussions_spec.js b/spec/frontend/diffs/components/diff_discussions_spec.js
index 2da68adddf6..b3945257fbd 100644
--- a/spec/frontend/diffs/components/diff_discussions_spec.js
+++ b/spec/frontend/diffs/components/diff_discussions_spec.js
@@ -32,9 +32,9 @@ describe('DiffDiscussions', () => {
     it('should have notes list', () => {
       createComponent();
 
-      expect(wrapper.find(NoteableDiscussion).exists()).toBe(true);
-      expect(wrapper.find(DiscussionNotes).exists()).toBe(true);
-      expect(wrapper.find(DiscussionNotes).findAll(TimelineEntryItem).length).toBe(
+      expect(wrapper.findComponent(NoteableDiscussion).exists()).toBe(true);
+      expect(wrapper.findComponent(DiscussionNotes).exists()).toBe(true);
+      expect(wrapper.findComponent(DiscussionNotes).findAll(TimelineEntryItem).length).toBe(
         discussionsMockData.notes.length,
       );
     });
@@ -48,7 +48,7 @@ describe('DiffDiscussions', () => {
       const diffNotesToggle = findDiffNotesToggle();
 
       expect(diffNotesToggle.exists()).toBe(true);
-      expect(diffNotesToggle.find(GlIcon).exists()).toBe(true);
+      expect(diffNotesToggle.findComponent(GlIcon).exists()).toBe(true);
       expect(diffNotesToggle.classes('diff-notes-collapse')).toBe(true);
     });
 
@@ -80,12 +80,12 @@ describe('DiffDiscussions', () => {
       discussions[0].expanded = false;
       createComponent({ discussions, shouldCollapseDiscussions: true });
 
-      expect(wrapper.find(NoteableDiscussion).isVisible()).toBe(false);
+      expect(wrapper.findComponent(NoteableDiscussion).isVisible()).toBe(false);
     });
 
     it('renders badge on avatar', () => {
       createComponent({ renderAvatarBadge: true });
-      const noteableDiscussion = wrapper.find(NoteableDiscussion);
+      const noteableDiscussion = wrapper.findComponent(NoteableDiscussion);
 
       expect(noteableDiscussion.find('.design-note-pin').exists()).toBe(true);
       expect(noteableDiscussion.find('.design-note-pin').text().trim()).toBe('1');
diff --git a/spec/frontend/diffs/components/diff_file_header_spec.js b/spec/frontend/diffs/components/diff_file_header_spec.js
index 92b8b2d4aa3..c23eb2f3d24 100644
--- a/spec/frontend/diffs/components/diff_file_header_spec.js
+++ b/spec/frontend/diffs/components/diff_file_header_spec.js
@@ -76,18 +76,19 @@ describe('DiffFileHeader component', () => {
     wrapper.destroy();
   });
 
-  const findHeader = () => wrapper.find({ ref: 'header' });
-  const findTitleLink = () => wrapper.find({ ref: 'titleWrapper' });
-  const findExpandButton = () => wrapper.find({ ref: 'expandDiffToFullFileButton' });
+  const findHeader = () => wrapper.findComponent({ ref: 'header' });
+  const findTitleLink = () => wrapper.findComponent({ ref: 'titleWrapper' });
+  const findExpandButton = () => wrapper.findComponent({ ref: 'expandDiffToFullFileButton' });
   const findFileActions = () => wrapper.find('.file-actions');
-  const findModeChangedLine = () => wrapper.find({ ref: 'fileMode' });
+  const findModeChangedLine = () => wrapper.findComponent({ ref: 'fileMode' });
   const findLfsLabel = () => wrapper.find('[data-testid="label-lfs"]');
-  const findToggleDiscussionsButton = () => wrapper.find({ ref: 'toggleDiscussionsButton' });
-  const findExternalLink = () => wrapper.find({ ref: 'externalLink' });
-  const findReplacedFileButton = () => wrapper.find({ ref: 'replacedFileButton' });
-  const findViewFileButton = () => wrapper.find({ ref: 'viewButton' });
-  const findCollapseIcon = () => wrapper.find({ ref: 'collapseIcon' });
-  const findEditButton = () => wrapper.find({ ref: 'editButton' });
+  const findToggleDiscussionsButton = () =>
+    wrapper.findComponent({ ref: 'toggleDiscussionsButton' });
+  const findExternalLink = () => wrapper.findComponent({ ref: 'externalLink' });
+  const findReplacedFileButton = () => wrapper.findComponent({ ref: 'replacedFileButton' });
+  const findViewFileButton = () => wrapper.findComponent({ ref: 'viewButton' });
+  const findCollapseIcon = () => wrapper.findComponent({ ref: 'collapseIcon' });
+  const findEditButton = () => wrapper.findComponent({ ref: 'editButton' });
   const findReviewFileCheckbox = () => wrapper.find("[data-testid='fileReviewCheckbox']");
 
   const createComponent = ({ props, options = {} } = {}) => {
@@ -153,7 +154,7 @@ describe('DiffFileHeader component', () => {
     });
 
     it('displays a copy to clipboard button', () => {
-      expect(wrapper.find(ClipboardButton).exists()).toBe(true);
+      expect(wrapper.findComponent(ClipboardButton).exists()).toBe(true);
     });
 
     it('triggers the copy to clipboard tracking event', () => {
diff --git a/spec/frontend/diffs/components/diff_file_row_spec.js b/spec/frontend/diffs/components/diff_file_row_spec.js
index 1d1c5fec293..c5b76551fcc 100644
--- a/spec/frontend/diffs/components/diff_file_row_spec.js
+++ b/spec/frontend/diffs/components/diff_file_row_spec.js
@@ -32,7 +32,7 @@ describe('Diff File Row component', () => {
       ...diffFileRowProps,
     });
 
-    expect(wrapper.find(FileRow).props()).toEqual(
+    expect(wrapper.findComponent(FileRow).props()).toEqual(
       expect.objectContaining({
         ...sharedProps,
       }),
@@ -47,7 +47,7 @@ describe('Diff File Row component', () => {
       showTooltip: true,
     });
 
-    expect(wrapper.find(ChangedFileIcon).props()).toEqual(
+    expect(wrapper.findComponent(ChangedFileIcon).props()).toEqual(
       expect.objectContaining({
         file: {},
         size: 16,
@@ -74,7 +74,7 @@ describe('Diff File Row component', () => {
         hideFileStats: false,
         viewedFiles: isViewed ? { '#123456789': true } : {},
       });
-      expect(wrapper.find(FileRow).props('fileClasses')).toBe(expected);
+      expect(wrapper.findComponent(FileRow).props('fileClasses')).toBe(expected);
     },
   );
 
@@ -92,7 +92,7 @@ describe('Diff File Row component', () => {
         },
         hideFileStats,
       });
-      expect(wrapper.find(FileRowStats).exists()).toEqual(value);
+      expect(wrapper.findComponent(FileRowStats).exists()).toEqual(value);
     });
   });
 
diff --git a/spec/frontend/diffs/components/diff_file_spec.js b/spec/frontend/diffs/components/diff_file_spec.js
index 9e8d9e1ca29..944cec77efb 100644
--- a/spec/frontend/diffs/components/diff_file_spec.js
+++ b/spec/frontend/diffs/components/diff_file_spec.js
@@ -100,7 +100,7 @@ function createComponent({ file, first = false, last = false, options = {}, prop
   };
 }
 
-const findDiffHeader = (wrapper) => wrapper.find(DiffFileHeaderComponent);
+const findDiffHeader = (wrapper) => wrapper.findComponent(DiffFileHeaderComponent);
 const findDiffContentArea = (wrapper) => wrapper.find('[data-testid="content-area"]');
 const findLoader = (wrapper) => wrapper.find('[data-testid="loader-icon"]');
 const findToggleButton = (wrapper) => wrapper.find('[data-testid="expand-button"]');
@@ -209,14 +209,14 @@ describe('DiffFile', () => {
 
       expect(el.querySelectorAll('.diff-content.hidden').length).toEqual(0);
       expect(el.querySelector('.js-file-title')).toBeDefined();
-      expect(wrapper.find(DiffFileHeaderComponent).exists()).toBe(true);
+      expect(wrapper.findComponent(DiffFileHeaderComponent).exists()).toBe(true);
       expect(el.querySelector('.js-syntax-highlight')).toBeDefined();
 
       markFileToBeRendered(store);
 
       await nextTick();
 
-      expect(wrapper.find(DiffContentComponent).exists()).toBe(true);
+      expect(wrapper.findComponent(DiffContentComponent).exists()).toBe(true);
     });
   });
 
@@ -320,7 +320,7 @@ describe('DiffFile', () => {
       });
 
       it('should have the file content', async () => {
-        expect(wrapper.find(DiffContentComponent).exists()).toBe(true);
+        expect(wrapper.findComponent(DiffContentComponent).exists()).toBe(true);
       });
 
       it('should style the component so that it `.has-body` for layout purposes', () => {
@@ -473,8 +473,8 @@ describe('DiffFile', () => {
           await nextTick();
 
           expect(wrapper.classes('has-body')).toBe(true);
-          expect(wrapper.find(DiffContentComponent).exists()).toBe(true);
-          expect(wrapper.find(DiffContentComponent).isVisible()).toBe(true);
+          expect(wrapper.findComponent(DiffContentComponent).exists()).toBe(true);
+          expect(wrapper.findComponent(DiffContentComponent).isVisible()).toBe(true);
         },
       );
     });
diff --git a/spec/frontend/diffs/components/diff_line_note_form_spec.js b/spec/frontend/diffs/components/diff_line_note_form_spec.js
index 542d61c4680..9493dc8855e 100644
--- a/spec/frontend/diffs/components/diff_line_note_form_spec.js
+++ b/spec/frontend/diffs/components/diff_line_note_form_spec.js
@@ -82,7 +82,7 @@ describe('DiffLineNoteForm', () => {
   });
 
   it('shows note form', () => {
-    expect(wrapper.find(NoteForm).exists()).toBe(true);
+    expect(wrapper.findComponent(NoteForm).exists()).toBe(true);
   });
 
   it('passes the provided range of lines to comment form', () => {
diff --git a/spec/frontend/diffs/components/diff_view_spec.js b/spec/frontend/diffs/components/diff_view_spec.js
index c681d0cf7f9..33b6acd5fd5 100644
--- a/spec/frontend/diffs/components/diff_view_spec.js
+++ b/spec/frontend/diffs/components/diff_view_spec.js
@@ -89,7 +89,7 @@ describe('DiffView', () => {
         inline: type === 'inline',
       });
       expect(wrapper.findAll(DiffCommentCell).length).toBe(total);
-      expect(wrapper.find(container).find(DiffCommentCell).exists()).toBe(true);
+      expect(wrapper.find(container).findComponent(DiffCommentCell).exists()).toBe(true);
     },
   );
 
@@ -97,7 +97,7 @@ describe('DiffView', () => {
     const wrapper = createWrapper({
       diffLines: [{ renderCommentRow: true, left: { lineDraft: { isDraft: true } } }],
     });
-    expect(wrapper.find(DraftNote).exists()).toBe(true);
+    expect(wrapper.findComponent(DraftNote).exists()).toBe(true);
   });
 
   describe('drag operations', () => {
diff --git a/spec/frontend/diffs/components/image_diff_overlay_spec.js b/spec/frontend/diffs/components/image_diff_overlay_spec.js
index 70191620eb6..ccf942bdcef 100644
--- a/spec/frontend/diffs/components/image_diff_overlay_spec.js
+++ b/spec/frontend/diffs/components/image_diff_overlay_spec.js
@@ -57,7 +57,7 @@ describe('Diffs image diff overlay component', () => {
   it('renders icon when showCommentIcon is true', () => {
     createComponent({ showCommentIcon: true });
 
-    expect(wrapper.find(GlIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(GlIcon).exists()).toBe(true);
   });
 
   it('sets badge comment positions', () => {
diff --git a/spec/frontend/diffs/components/no_changes_spec.js b/spec/frontend/diffs/components/no_changes_spec.js
index 6903b844e5e..dbfe9770e07 100644
--- a/spec/frontend/diffs/components/no_changes_spec.js
+++ b/spec/frontend/diffs/components/no_changes_spec.js
@@ -56,7 +56,7 @@ describe('Diff no changes empty state', () => {
     it('Show create commit button', () => {
       createComponent();
 
-      expect(wrapper.find(GlButton).exists()).toBe(true);
+      expect(wrapper.findComponent(GlButton).exists()).toBe(true);
     });
 
     it.each`
diff --git a/spec/frontend/diffs/components/tree_list_spec.js b/spec/frontend/diffs/components/tree_list_spec.js
index 931a9562d36..2e37425519d 100644
--- a/spec/frontend/diffs/components/tree_list_spec.js
+++ b/spec/frontend/diffs/components/tree_list_spec.js
@@ -175,7 +175,7 @@ describe('Diffs tree list component', () => {
       await nextTick();
       // Have to use $attrs['viewed-files'] because we are passing down an object
       // and attributes('') stringifies values (e.g. [object])...
-      expect(wrapper.find(FileTree).vm.$attrs['viewed-files']).toBe(viewedDiffFileIds);
+      expect(wrapper.findComponent(FileTree).vm.$attrs['viewed-files']).toBe(viewedDiffFileIds);
     });
   });
 });