1 files changed, 21 insertions, 5 deletions
diff --git a/spec/javascripts/jobs/components/manual_variables_form_spec.js b/spec/javascripts/jobs/components/manual_variables_form_spec.js
index 093aa905185..1f2bf8674c1 100644
--- a/spec/javascripts/jobs/components/manual_variables_form_spec.js
+++ b/spec/javascripts/jobs/components/manual_variables_form_spec.js
@@ -1,9 +1,12 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlButton } from '@gitlab/ui';
 import Form from '~/jobs/components/manual_variables_form.vue';
 
+const localVue = createLocalVue();
+
 describe('Manual Variables Form', () => {
   let wrapper;
+
   const requiredProps = {
     action: {
       path: '/play',
@@ -14,8 +17,10 @@ describe('Manual Variables Form', () => {
   };
 
   const factory = (props = {}) => {
-    wrapper = shallowMount(Form, {
+    wrapper = shallowMount(localVue.extend(Form), {
       propsData: props,
+      localVue,
+      sync: false,
     });
   };
 
@@ -23,8 +28,15 @@ describe('Manual Variables Form', () => {
     factory(requiredProps);
   });
 
-  afterEach(() => {
-    wrapper.destroy();
+  afterEach(done => {
+    // The component has a `nextTick` callback after some events so we need
+    // to wait for those to finish before destroying.
+    setImmediate(() => {
+      wrapper.destroy();
+      wrapper = null;
+
+      done();
+    });
   });
 
   it('renders empty form with correct placeholders', () => {
@@ -71,7 +83,7 @@ describe('Manual Variables Form', () => {
   });
 
   describe('when deleting a variable', () => {
-    it('removes the variable row', () => {
+    beforeEach(done => {
       wrapper.vm.variables = [
         {
           key: 'new key',
@@ -80,6 +92,10 @@ describe('Manual Variables Form', () => {
         },
       ];
 
+      wrapper.vm.$nextTick(done);
+    });
+
+    it('removes the variable row', () => {
       wrapper.find(GlButton).vm.$emit('click');
 
       expect(wrapper.vm.variables.length).toBe(0);