1 files changed, 10 insertions, 8 deletions
diff --git a/spec/javascripts/environments/environment_item_spec.js b/spec/javascripts/environments/environment_item_spec.js
index 7fea80ed799..4d42de4d549 100644
--- a/spec/javascripts/environments/environment_item_spec.js
+++ b/spec/javascripts/environments/environment_item_spec.js
@@ -1,10 +1,12 @@
-window.timeago = require('timeago.js');
-const EnvironmentItem = require('~/environments/components/environment_item');
+import 'timeago.js';
+import Vue from 'vue';
+import environmentItemComp from '~/environments/components/environment_item';
 
 describe('Environment item', () => {
-  preloadFixtures('static/environments/table.html.raw');
+  let EnvironmentItem;
+
   beforeEach(() => {
-    loadFixtures('static/environments/table.html.raw');
+    EnvironmentItem = Vue.extend(environmentItemComp);
   });
 
   describe('When item is folder', () => {
@@ -21,13 +23,13 @@ describe('Environment item', () => {
       };
 
       component = new EnvironmentItem({
-        el: document.querySelector('tr#environment-row'),
         propsData: {
           model: mockItem,
           canCreateDeployment: false,
           canReadEnvironment: true,
+          service: {},
         },
-      });
+      }).$mount();
     });
 
     it('Should render folder icon and name', () => {
@@ -109,13 +111,13 @@ describe('Environment item', () => {
       };
 
       component = new EnvironmentItem({
-        el: document.querySelector('tr#environment-row'),
         propsData: {
           model: environment,
           canCreateDeployment: true,
           canReadEnvironment: true,
+          service: {},
         },
-      });
+      }).$mount();
     });
 
     it('should render environment name', () => {