diff --git a/spec/frontend/webhooks/components/form_custom_headers_spec.js b/spec/frontend/webhooks/components/form_custom_headers_spec.js
index fb7b022af3b4832057377de5bf1a5ff9aeb8d526..2630a94dea62fc4908bfba34130467344fa98680 100644
--- a/spec/frontend/webhooks/components/form_custom_headers_spec.js
+++ b/spec/frontend/webhooks/components/form_custom_headers_spec.js
@@ -3,8 +3,8 @@ import { nextTick } from 'vue';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import FormCustomHeaders from '~/webhooks/components/form_custom_headers.vue';
 import FormCustomHeaderItem from '~/webhooks/components/form_custom_header_item.vue';
-
-import { mountExtended } from 'helpers/vue_test_utils_helper';
+import CrudComponent from '~/vue_shared/components/crud_component.vue';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 
 jest.mock('~/lib/utils/common_utils');
@@ -24,8 +24,11 @@ describe('FormCustomHeaders', () => {
   });
 
   const createComponent = ({ props } = {}) => {
-    wrapper = mountExtended(FormCustomHeaders, {
+    wrapper = shallowMountExtended(FormCustomHeaders, {
       propsData: props,
+      stubs: {
+        CrudComponent,
+      },
     });
   };
 
@@ -49,7 +52,7 @@ describe('FormCustomHeaders', () => {
 
         expect(findAllCustomHeaderItems()).toHaveLength(3);
 
-        const lastItem = findAllCustomHeaderItems().at(-1);
+        const lastItem = findAllCustomHeaderItems().at(2);
         expect(lastItem.props()).toMatchObject({
           headerKey: '',
           headerValue: '',