1 files changed, 17 insertions, 6 deletions
diff --git a/spec/frontend/performance_bar/components/request_warning_spec.js b/spec/frontend/performance_bar/components/request_warning_spec.js
index a4f0d388e33..a85f83e9da7 100644
--- a/spec/frontend/performance_bar/components/request_warning_spec.js
+++ b/spec/frontend/performance_bar/components/request_warning_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import RequestWarning from '~/performance_bar/components/request_warning.vue';
 
 Vue.config.ignoredElements = ['gl-emoji'];
@@ -8,9 +8,20 @@ describe('request warning', () => {
   let wrapper;
   const htmlId = 'request-123';
 
+  const createComponent = ({ propsData = {} } = {}) => {
+    wrapper = shallowMountExtended(RequestWarning, {
+      propsData,
+      stubs: {
+        GlEmoji: { template: `<div id="${htmlId}" />` },
+      },
+    });
+  };
+
+  const findEmoji = () => wrapper.findByTestId('warning');
+
   describe('when the request has warnings', () => {
     beforeEach(() => {
-      wrapper = shallowMount(RequestWarning, {
+      createComponent({
         propsData: {
           htmlId,
           warnings: ['gitaly calls: 30 over 10', 'gitaly duration: 1500 over 1000'],
@@ -19,14 +30,14 @@ describe('request warning', () => {
     });
 
     it('adds a warning emoji with the correct ID', () => {
-      expect(wrapper.find('span gl-emoji[id]').attributes('id')).toEqual(htmlId);
-      expect(wrapper.find('span gl-emoji[id]').element.dataset.name).toEqual('warning');
+      expect(findEmoji().attributes('id')).toEqual(htmlId);
+      expect(findEmoji().element.dataset.name).toEqual('warning');
     });
   });
 
   describe('when the request does not have warnings', () => {
     beforeEach(() => {
-      wrapper = shallowMount(RequestWarning, {
+      createComponent({
         propsData: {
           htmlId,
           warnings: [],
@@ -35,7 +46,7 @@ describe('request warning', () => {
     });
 
     it('does nothing', () => {
-      expect(wrapper.html()).toBe('');
+      expect(findEmoji().exists()).toBe(false);
     });
   });
 });